App.css

@import "tailwindcss";

@theme {
  --color-primary: #FF0000;
  --color-on-primary: var(--color-on-primary-val);
  --color-secondary: var(--color-secondary-val);
  --color-background: var(--color-background-val);
  --color-surface: var(--color-surface-val);
  --color-surface-container-low: var(--color-surface-container-low-val);
  --color-surface-container: var(--color-surface-container-val);
  --color-surface-container-high: var(--color-surface-container-high-val);
  --color-surface-container-highest: var(--color-surface-container-highest-val);
  --color-surface-row: var(--color-surface-row-val);
  --color-surface-row-hover: var(--color-surface-row-hover-val);
  --color-surface-row-control: var(--color-surface-container-high);
  --color-surface-row-control-hover: var(--color-surface-container-highest);
  --color-outline-variant: var(--color-outline-variant-val);
  --color-on-surface: var(--color-on-surface-val);
  --color-on-surface-variant: var(--color-on-surface-variant-val);
  --color-error: #F44336;

  /* Profile colours: Flow for Android's eight seeds keep their hue and take the tones of
     ProfileColors.kt (light: container 90, content 10; dark: container 30, content 90). */
  --color-profile-blue-container: var(--profile-blue-container-val);
  --color-profile-blue-content: var(--profile-blue-content-val);
  --color-profile-teal-container: var(--profile-teal-container-val);
  --color-profile-teal-content: var(--profile-teal-content-val);
  --color-profile-green-container: var(--profile-green-container-val);
  --color-profile-green-content: var(--profile-green-content-val);
  --color-profile-amber-container: var(--profile-amber-container-val);
  --color-profile-amber-content: var(--profile-amber-content-val);
  --color-profile-orange-container: var(--profile-orange-container-val);
  --color-profile-orange-content: var(--profile-orange-content-val);
  --color-profile-red-container: var(--profile-red-container-val);
  --color-profile-red-content: var(--profile-red-content-val);
  --color-profile-pink-container: var(--profile-pink-container-val);
  --color-profile-pink-content: var(--profile-pink-content-val);
  --color-profile-purple-container: var(--profile-purple-container-val);
  --color-profile-purple-content: var(--profile-purple-content-val);

  /* --- Chrome palette (custom-themes migration) ---
     Mirrors Tailwind's default palette exactly (oklch values copied from
     tailwindcss/theme.css) so swapping a literal `zinc-800`-style class for
     one of these tokens is a zero-diff refactor. Not split by light/dark on
     purpose: the classes they replace never responded to color-scheme either. */
  --color-chrome-white: #ffffff;
  --color-chrome-black: #000000;

  --color-chrome-neutral-50: oklch(98.5% 0 0);
  --color-chrome-neutral-100: oklch(97% 0 0);
  --color-chrome-neutral-200: oklch(92.2% 0 0);
  --color-chrome-neutral-300: oklch(87% 0 0);
  --color-chrome-neutral-400: oklch(70.8% 0 0);
  --color-chrome-neutral-500: oklch(55.6% 0 0);
  --color-chrome-neutral-600: oklch(43.9% 0 0);
  --color-chrome-neutral-700: oklch(37.1% 0 0);
  --color-chrome-neutral-800: oklch(26.9% 0 0);
  --color-chrome-neutral-900: oklch(20.5% 0 0);
  --color-chrome-neutral-950: oklch(14.5% 0 0);

  --color-chrome-zinc-100: oklch(96.7% 0.001 286.375);
  --color-chrome-zinc-200: oklch(92% 0.004 286.32);
  --color-chrome-zinc-300: oklch(87.1% 0.006 286.286);
  --color-chrome-zinc-400: oklch(70.5% 0.015 286.067);
  --color-chrome-zinc-500: oklch(55.2% 0.016 285.938);
  --color-chrome-zinc-600: oklch(44.2% 0.017 285.786);
  --color-chrome-zinc-700: oklch(37% 0.013 285.805);
  --color-chrome-zinc-800: oklch(27.4% 0.006 286.033);
  --color-chrome-zinc-900: oklch(21% 0.006 285.885);
  --color-chrome-zinc-950: oklch(14.1% 0.005 285.823);

  --color-chrome-red-300: oklch(80.8% 0.114 19.571);
  --color-chrome-red-400: oklch(70.4% 0.191 22.216);
  --color-chrome-red-500: oklch(63.7% 0.237 25.331);
  --color-chrome-red-600: oklch(57.7% 0.245 27.325);
  --color-chrome-red-700: oklch(50.5% 0.213 27.518);
  --color-chrome-red-800: oklch(44.4% 0.177 26.899);
  --color-chrome-red-900: oklch(39.6% 0.141 25.723);
  --color-chrome-red-950: oklch(25.8% 0.092 26.042);

  --color-chrome-emerald-400: oklch(76.5% 0.177 163.223);
  --color-chrome-emerald-500: oklch(69.6% 0.17 162.48);
  --color-chrome-emerald-800: oklch(43.2% 0.095 166.913);
  --color-chrome-emerald-900: oklch(37.8% 0.077 168.94);
  --color-chrome-emerald-950: oklch(26.2% 0.051 172.552);

  --color-chrome-amber-400: oklch(82.8% 0.189 84.429);
  --color-chrome-amber-500: oklch(76.9% 0.188 70.08);

  --color-chrome-blue-400: oklch(70.7% 0.165 254.624);
  --color-chrome-sky-400: oklch(74.6% 0.16 232.661);
  --color-chrome-green-400: oklch(79.2% 0.209 151.711);
  --color-chrome-green-500: oklch(72.3% 0.219 149.579);

  /* One-off literal UI-chrome colors (player toasts/popovers/search bars),
     named instead of inline hex so a future theme can restyle them too. */
  --color-chrome-toast: #1A1A1A;
  --color-chrome-toast-border: #2A2A2A;
  --color-chrome-popover: #151515;
  --color-chrome-searchbar: #121212;
  --color-chrome-dropdown: #181818;
  --color-chrome-input-surface: #0F0F0F;
}

@layer base {
  :root {
    --color-secondary-val: #606060;
    --color-background-val: #FFFFFF;
    --color-surface-val: #F9F9F9;
    --color-surface-container-low-val: #F3F3F3;
    --color-surface-container-val: #EEEEEE;
    --color-surface-container-high-val: #E8E8E8;
    --color-surface-container-highest-val: #E1E1E1;
    --color-surface-row-val: #E8E8E8;
    --color-surface-row-hover-val: #E1E1E1;
    --color-outline-variant-val: #D7D7D7;
    --color-on-surface-val: #111111;
    --color-on-surface-variant-val: #5F5F5F;
    --color-on-primary-val: #FFFFFF;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --color-secondary-val: #AAAAAA;
      --color-background-val: #0F0F0F;
      --color-surface-val: #1d1d1d;
      --color-surface-container-low-val: #171717;
      --color-surface-container-val: #1D1D1D;
      --color-surface-container-high-val: #242424;
      --color-surface-container-highest-val: #303030;
      --color-surface-row-val: #171717;
      --color-surface-row-hover-val: #1D1D1D;
      --color-outline-variant-val: #2A2A2A;
      --color-on-surface-val: #F4F4F4;
      --color-on-surface-variant-val: #B8B8B8;
      --color-on-primary-val: #FFFFFF;
    }
  }

  /* Dark tones by default (dark and amoled), light tones once a light theme applies. */
  :root {
    --profile-blue-container-val: #0043A4;
    --profile-blue-content-val: #BEDDFF;
    --profile-teal-container-val: #005448;
    --profile-teal-content-val: #8BF5E4;
    --profile-green-container-val: #005500;
    --profile-green-content-val: #9BF897;
    --profile-amber-container-val: #6F3B00;
    --profile-amber-content-val: #FFD443;
    --profile-orange-container-val: #8E1700;
    --profile-orange-content-val: #FFBC5D;
    --profile-red-container-val: #990013;
    --profile-red-content-val: #FFB0A2;
    --profile-pink-container-val: #95004A;
    --profile-pink-content-val: #FFB2E6;
    --profile-purple-container-val: #533197;
    --profile-purple-content-val: #FCCCFF;
  }

  :root[data-theme-variant="light"] {
    --profile-blue-container-val: #BEDDFF;
    --profile-blue-content-val: #001B6F;
    --profile-teal-container-val: #8BF5E4;
    --profile-teal-content-val: #00281D;
    --profile-green-container-val: #9BF897;
    --profile-green-content-val: #002900;
    --profile-amber-container-val: #FFD443;
    --profile-amber-content-val: #430C00;
    --profile-orange-container-val: #FFBC5D;
    --profile-orange-content-val: #590000;
    --profile-red-container-val: #FFB0A2;
    --profile-red-content-val: #5F0000;
    --profile-pink-container-val: #FFB2E6;
    --profile-pink-content-val: #5B001F;
    --profile-purple-container-val: #FCCCFF;
    --profile-purple-content-val: #180263;
  }

  body {
    @apply bg-background text-chrome-zinc-100 antialiased overflow-hidden select-none;
    /* Inter has no Arabic letters. Naming Arabic fonts keeps Linux from falling back to whatever
       fontconfig finds first, which can lose the dots and the joins between letters. */
    font-family: 'Inter', system-ui, -apple-system, "Noto Sans Arabic", "Noto Naskh Arabic", sans-serif;
  }

  /* A title or name in another script keeps its own word order and ellipsis (dir="auto") but
     lines up with the interface, as YouTube does, so it stays beside its thumbnail. */
  [dir="auto"] {
    text-align: match-parent;
  }

  /* Typed text runs in its own direction, so Arabic in an English field or English in an Arabic
     one reads right; an empty field keeps the interface's direction for its placeholder. */
  textarea,
  input:not([type]),
  input[type="text"],
  input[type="search"] {
    unicode-bidi: plaintext;
  }
}

/* Scrollbars stay hidden everywhere; wheel, trackpad, keys and touch still scroll. */
* {
  scrollbar-width: none;
}

::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.active-nav-item {
  @apply bg-chrome-red-950/40 text-primary border-l-4 border-primary;
}

.deep-flow-topbar-active {
  color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.deep-flow-topbar-active:hover {
  color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
}

@keyframes pane-fade-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-pane-in {
  animation: pane-fade-in 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The recap story: a page slides in the way it was stepped, then its parts rise in turn. */
@keyframes story-page-next {
  from {
    opacity: 0;
    transform: translateX(48px);
  }
}

@keyframes story-page-prev {
  from {
    opacity: 0;
    transform: translateX(-48px);
  }
}

@keyframes story-rise {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}

@keyframes story-dial {
  from {
    opacity: 0;
    transform: rotate(-24deg) scale(0.86);
  }
}

.story-page-next {
  animation: story-page-next 320ms var(--motion-ease) both;
}

.story-page-prev {
  animation: story-page-prev 320ms var(--motion-ease) both;
}

.story-stagger > * {
  animation: story-rise 420ms var(--motion-ease) both;
}

.story-stagger > :nth-child(2) { animation-delay: 60ms; }
.story-stagger > :nth-child(3) { animation-delay: 120ms; }
.story-stagger > :nth-child(4) { animation-delay: 180ms; }
.story-stagger > :nth-child(5) { animation-delay: 240ms; }
.story-stagger > :nth-child(n + 6) { animation-delay: 300ms; }

.story-dial {
  animation: story-dial 520ms var(--motion-ease) both;
  animation-delay: 120ms;
}

@media (prefers-reduced-motion: reduce) {
  .story-page-next,
  .story-page-prev,
  .story-stagger > *,
  .story-dial {
    animation: none;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-slide-up {
  animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in {
  animation: fade-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes section-crossfade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-section-crossfade {
  animation: section-crossfade var(--motion-menu-out) var(--motion-ease) forwards;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--color-chrome-white) 6%, transparent),
    transparent
  );
  animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes player-feedback-pop {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }
  14% {
    opacity: 1;
    transform: scale(1);
  }
  74% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.92);
  }
}

.animate-player-feedback {
  animation: player-feedback-pop 1.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Double-click seek, after Android's SeekAnimationOverlay: the side's tint flashes brighter on
   every step and settles, and two chevrons slide toward the seek on an 800 ms loop. */
@keyframes seek-ripple-pulse {
  from {
    opacity: 0.28;
  }
  to {
    opacity: 0.15;
  }
}

@keyframes seek-label-in {
  from {
    opacity: 0;
  }
}

@keyframes seek-chevron-fade {
  0% {
    opacity: 0;
  }
  20%,
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes seek-chevron-forward {
  to {
    transform: translateX(24px);
  }
}

@keyframes seek-chevron-backward {
  to {
    transform: translateX(-24px);
  }
}

.animate-seek-ripple {
  animation: seek-ripple-pulse 260ms var(--motion-ease);
}

.animate-seek-label-in {
  animation: seek-label-in 150ms var(--motion-ease);
}

.animate-seek-chevron {
  display: block;
  animation: seek-chevron-fade 800ms linear infinite;
}

.animate-seek-chevron-forward {
  animation: seek-chevron-forward 800ms cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-seek-chevron-backward {
  animation: seek-chevron-backward 800ms cubic-bezier(0, 0, 0.2, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-seek-ripple,
  .animate-seek-label-in,
  .animate-seek-chevron,
  .animate-seek-chevron-forward,
  .animate-seek-chevron-backward {
    animation: none;
  }
}

/*
  Shared motion. Enters use the side rail's curve; exits accelerate away and are always
  shorter than the enter, so nothing that is closing seems to linger. Scripted motion
  reads these same tokens (src/lib/motion.ts).
*/
:root {
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --motion-menu-in: 150ms;
  --motion-menu-out: 100ms;
  --motion-pane: 180ms;
  --motion-page: 200ms;
  --motion-layout: 320ms;
  --motion-panel: 360ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-menu-in: 0ms;
    --motion-menu-out: 0ms;
    --motion-pane: 0ms;
    --motion-page: 0ms;
    --motion-layout: 0ms;
    --motion-panel: 0ms;
  }
}

/* Menus grow from the corner nearest the button that opened them; the menu sets that origin. */
@keyframes menu-pop-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.animate-menu-in {
  animation: menu-pop-in var(--motion-menu-in) var(--motion-ease);
  transform-origin: top;
}

/* The bell swings once, from its top, when notifications for a channel turn on. */
@keyframes bell-ring {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(14deg); }
  32% { transform: rotate(-12deg); }
  50% { transform: rotate(8deg); }
  68% { transform: rotate(-5deg); }
  84% { transform: rotate(2deg); }
}

.animate-bell-ring {
  animation: bell-ring 700ms var(--motion-ease);
  transform-origin: 50% 8%;
}

@media (prefers-reduced-motion: reduce) {
  .animate-bell-ring {
    animation: none;
  }
}


/*
  The side rail pushes the page as it opens and closes. One duration and curve serve both
  directions and the drawer on the watch and settings pages, so they all move alike.
  Icons sit in a fixed 56 px slot, so only labels and the extra sections fade.
*/
:root {
  --sidebar-motion-duration: 600ms;
  --sidebar-motion-ease: cubic-bezier(0.2, 0, 0, 1);
}

.sidebar-rail {
  width: 72px;
  transition: width var(--sidebar-motion-duration) var(--sidebar-motion-ease);
}

.sidebar-rail[data-expanded="true"] {
  width: 240px;
}

/* Hidden content keeps no height, so the rail never scrolls through it. */
.sidebar-when-expanded,
.sidebar-when-collapsed {
  overflow: hidden;
}

[data-expanded="false"] .sidebar-when-expanded,
[data-expanded="true"] .sidebar-when-collapsed {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms linear, visibility 0s linear 200ms, max-height 0s linear 200ms;
}

[data-expanded="true"] .sidebar-when-expanded,
[data-expanded="false"] .sidebar-when-collapsed {
  max-height: 9999px;
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms linear 200ms, visibility 0s linear 200ms, max-height 0s linear 200ms;
}

.sidebar-label {
  transition: opacity 200ms linear;
}

[data-expanded="false"] .sidebar-label {
  opacity: 0;
}

[data-expanded="true"] .sidebar-label {
  opacity: 1;
  transition: opacity 320ms linear 160ms;
}

.sidebar-drawer {
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform var(--sidebar-motion-duration) var(--sidebar-motion-ease),
    visibility 0s linear var(--sidebar-motion-duration);
}

/* Right to left, the drawer sits on the right and hides past that edge. */
[dir="rtl"] .sidebar-drawer {
  transform: translateX(100%);
}

[data-open="true"] > .sidebar-drawer {
  transform: none;
  visibility: visible;
  transition: transform var(--sidebar-motion-duration) var(--sidebar-motion-ease), visibility 0s;
}

.sidebar-scrim {
  opacity: 0;
  transition: opacity 300ms linear;
}

[data-open="true"] > .sidebar-scrim {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-drawer,
  .sidebar-scrim,
  .sidebar-rail,
  .sidebar-label,
  .sidebar-when-expanded,
  .sidebar-when-collapsed {
    transition: none !important;
  }
}

/*
  The full player's colours ease over a second on a song change, as on Android.
  Registering them as colours is what lets a gradient that reads them animate.
*/
@property --player-ground { syntax: "<color>"; inherits: true; initial-value: black; }
@property --player-base { syntax: "<color>"; inherits: true; initial-value: black; }
@property --player-accent { syntax: "<color>"; inherits: true; initial-value: black; }

.player-palette-ease {
  transition: --player-ground 1s linear, --player-base 1s linear, --player-accent 1s linear;
}

/* The routed page while the full music player covers it (useCoverAppContent). */
[data-app-content][data-covered] {
  content-visibility: hidden;
}

/* The Moving lyrics background: two copies of the cover's colours, each on its own path. */
@keyframes lyrics-drift-x {
  0%,
  100% {
    transform: translateX(-42%);
  }
  50% {
    transform: translateX(42%);
  }
}

@keyframes lyrics-drift-y {
  0%,
  100% {
    transform: translateY(42%);
  }
  50% {
    transform: translateY(-42%);
  }
}

.lyrics-drift-x,
.lyrics-drift-y {
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.lyrics-drift-x {
  animation-name: lyrics-drift-x;
}

.lyrics-drift-y {
  animation-name: lyrics-drift-y;
}

.lyrics-drift-paused .lyrics-drift-x,
.lyrics-drift-paused .lyrics-drift-y {
  animation-play-state: paused;
}

@keyframes music-wave {
  0%,
  100% {
    transform: scaleY(0.35);
  }
  45% {
    transform: scaleY(1);
  }
}

.music-wave-bar {
  transform-origin: bottom;
  animation: music-wave 760ms ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .music-wave-bar {
    animation: none;
  }

  .lyrics-drift-x,
  .lyrics-drift-y {
    animation: none;
  }

  /* The wash animates through inline styles, so reduced motion has to outrank them. */
  .color-wash {
    transform: none !important;
    transition: opacity 120ms linear !important;
  }
}

/*
  Material 3 Expressive slider.

  The 3px handle sits inside a 6px gap cut out of the track, and that gap has to
  show the surface behind it rather than a colour — so the two track segments are
  positioned off `--m3-fill` (0..1) instead of being painted as one gradient.
  Handle position is measured from its centre so narrowing it on press stays
  symmetric.
*/
.m3-slider {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 1.75rem;
  touch-action: none;
}

.m3-slider__track {
  position: absolute;
  height: 0.75rem;
  border-radius: 9999px;
}

.m3-slider__track--active {
  inset-inline-start: 0;
  width: max(0px, calc(var(--m3-fill) * (100% - 3px) - 6px));
  background-color: var(--color-primary);
}

.m3-slider__track--inactive {
  inset-inline-start: calc(var(--m3-fill) * (100% - 3px) + 9px);
  inset-inline-end: 0;
  background-color: var(--color-surface-container-highest);
}

.m3-slider__handle {
  --m3-handle-width: 3px;
  position: absolute;
  inset-inline-start: calc(1.5px + var(--m3-fill) * (100% - 3px));
  /* Centred on its position by a logical margin, not a transform, so it mirrors with the fill. */
  margin-inline-start: calc(var(--m3-handle-width) / -2);
  width: var(--m3-handle-width);
  height: 1.5rem;
  border-radius: 9999px;
  background-color: var(--color-primary);
  transition: width 120ms ease-out;
}

.m3-slider[data-pressed="true"] .m3-slider__handle {
  --m3-handle-width: 2px;
}

/* The music progress bar's shapes. */
.m3-slider[data-bar-style="thick"] {
  height: 2.5rem;
}
.m3-slider[data-bar-style="thick"] .m3-slider__track {
  height: 1.5rem;
}
.m3-slider[data-bar-style="thick"] .m3-slider__handle {
  height: 2.5rem;
}
.m3-slider[data-bar-style="compact"] .m3-slider__track {
  height: 0.375rem;
}
.m3-slider[data-bar-style="compact"] .m3-slider__handle {
  height: 1rem;
}
.m3-slider[data-bar-style="slim"] .m3-slider__track {
  height: 0.1875rem;
}
.m3-slider[data-bar-style="slim"] .m3-slider__handle,
.m3-slider[data-bar-style="slim"] .m3-slider__stop {
  display: none;
}
.m3-slider[data-bar-style="slim"] .m3-slider__track--active {
  width: calc(var(--m3-fill) * 100%);
}
.m3-slider[data-bar-style="slim"] .m3-slider__track--inactive {
  inset-inline-start: calc(var(--m3-fill) * 100%);
  width: auto;
  inset-inline-end: 0;
}
.m3-slider[data-bar-style="wavy"] .m3-slider__track--active {
  height: 0.75rem;
  border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 6 Q6 0 12 6 T24 6' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") repeat-x center / 24px 12px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 6 Q6 0 12 6 T24 6' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E") repeat-x center / 24px 12px;
}
.m3-slider[data-bar-style="wavy"] .m3-slider__track--inactive {
  height: 0.1875rem;
}

/* Marks the end of travel; pointless once the handle has reached it. */
.m3-slider__stop {
  position: absolute;
  inset-inline-end: 6px;
  width: 3px;
  height: 3px;
  border-radius: 9999px;
  background-color: var(--color-primary);
}

/* The real control: invisible, but keeps native dragging, keyboard and a11y. */
.m3-slider__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.m3-slider__input:disabled {
  cursor: not-allowed;
}

.m3-slider[data-disabled="true"] {
  opacity: 0.5;
}

/* Progressive enhancement — `:has()` is missing on older WebKitGTK builds. */
.m3-slider:has(.m3-slider__input:focus-visible) .m3-slider__handle {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/*
  Vertical variant (EQ bands). Same geometry rotated: the fill grows from the
  bottom, so every offset is measured from `bottom` instead of `left`. The
  hidden input keeps the writing-mode pair the EQ sliders already used, which is
  what makes a native range drag bottom-to-top.
*/
.m3-slider--vertical {
  width: 1.25rem;
  height: 6.5rem;
  justify-content: center;
}

.m3-slider--vertical .m3-slider__track {
  left: 50%;
  height: auto;
  width: 0.75rem;
  transform: translateX(-50%);
}

.m3-slider--vertical .m3-slider__track--active {
  top: auto;
  bottom: 0;
  height: max(0px, calc(var(--m3-fill) * (100% - 3px) - 6px));
}

.m3-slider--vertical .m3-slider__track--inactive {
  top: 0;
  left: 50%;
  right: auto;
  bottom: calc(var(--m3-fill) * (100% - 3px) + 9px);
}

.m3-slider--vertical .m3-slider__handle {
  margin-inline-start: 0;
  left: 50%;
  top: auto;
  bottom: calc(1.5px + var(--m3-fill) * (100% - 3px));
  width: 1.25rem;
  height: 3px;
  transform: translate(-50%, 50%);
  transition: height 120ms ease-out;
}

.m3-slider--vertical[data-pressed="true"] .m3-slider__handle {
  width: 1.25rem;
  height: 2px;
}

.m3-slider--vertical .m3-slider__stop {
  right: auto;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
}

.m3-slider--vertical .m3-slider__input {
  writing-mode: vertical-lr;
  direction: rtl;
}

/* The pre-expressive look, kept for the Settings opt-out. */
.m3-slider-legacy {
  width: 100%;
  height: 0.25rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.m3-slider-legacy--vertical {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 1.25rem;
  height: 6.5rem;
  background: transparent;
}

.m3-slider-legacy:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .m3-slider__handle {
    transition: none;
  }
}

/*
  A Short fills its slide's height, but its 9:16 width must still fit beside the
  two side columns and an open side panel, or a tall narrow window clips it.
  `--short-sides` is both 260/280px columns plus the row's gaps and padding. The
  floor keeps the video usable on a small window; the side panel narrows instead.
*/
.short-stage {
  container-type: size;
  --short-sides: 616px;
}

@media (width >= 64rem) {
  .short-stage {
    --short-sides: 672px;
  }
}

.short-frame {
  height: clamp(
    min(100%, 360px),
    calc((100cqw - var(--short-sides) - var(--short-panel, 0px)) * 16 / 9),
    100%
  );
}

/*
  The glow fades to nothing before its box ends, so the box has no visible edge anywhere. The curve
  follows Android's edge mask near the player (about half strength 70% of the way out), then eases
  all the way to zero: Android stops at a screen edge, this one ends on the page.
*/
.ambient-glow-spread {
  --ambient-spread: 160px;
  --ambient-fade: rgb(0 0 0 / 0) 0, rgb(0 0 0 / 0.086) calc(var(--ambient-spread) * 0.125),
    rgb(0 0 0 / 0.237) calc(var(--ambient-spread) * 0.25), rgb(0 0 0 / 0.415) calc(var(--ambient-spread) * 0.375),
    rgb(0 0 0 / 0.595) calc(var(--ambient-spread) * 0.5), rgb(0 0 0 / 0.757) calc(var(--ambient-spread) * 0.625),
    rgb(0 0 0 / 0.888) calc(var(--ambient-spread) * 0.75), rgb(0 0 0 / 0.971) calc(var(--ambient-spread) * 0.875),
    rgb(0 0 0) var(--ambient-spread);
  inset: calc(var(--ambient-spread) * -1);
  -webkit-mask-image: linear-gradient(to right, var(--ambient-fade)), linear-gradient(to left, var(--ambient-fade)),
    linear-gradient(to bottom, var(--ambient-fade)), linear-gradient(to top, var(--ambient-fade));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, var(--ambient-fade)), linear-gradient(to left, var(--ambient-fade)),
    linear-gradient(to bottom, var(--ambient-fade)), linear-gradient(to top, var(--ambient-fade));
  mask-composite: intersect;
}

#flow-player-root[data-fullscreen="true"] {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: var(--color-chrome-black) !important;
}

#flow-player-root[data-fullscreen="true"] video {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

/*
  Adaptive content grids.

  `--flow-grid-columns` is the ceiling the user picked in Settings, not a fixed
  count: each track is at least `--flow-grid-card-min` wide, so a window too
  narrow for that many columns sheds columns instead of squashing cards. The
  `100% / n - gap` min is deliberately a hair under the exact per-track width —
  the slack keeps sub-pixel rounding from dropping the last track on a window
  that is wide enough.

  auto-fill, not auto-fit: a half-empty last row must keep the same track width
  as the full rows above it instead of stretching to fill.
*/
.flow-grid {
  display: grid;
  column-gap: var(--flow-grid-gap, 1rem);
  grid-template-columns: repeat(
    auto-fill,
    minmax(
      max(
        var(--flow-grid-card-min, 13rem),
        calc(100% / var(--flow-grid-columns, 4) - var(--flow-grid-gap, 1rem))
      ),
      1fr
    )
  );
}

/*
  Offscreen feed cards are skipped by content-visibility, so their placeholder
  height has to track the column count — a stale guess makes the scrollbar jump
  as cards paint in. 0.5625 is the 16:9 thumbnail; the addend is the meta row.
*/
.flow-grid-card {
  content-visibility: auto;
  /*
    `--flow-grid-track-w` is the used track width, published by
    `useResolvedGridColumns` from the same measurement that resolves the column
    count. The `100vw` fallback covers the frames before that lands, but it is
    only a guess: it counts the sidebar and page padding the grid does not
    occupy, so it overshoots and the scrollbar creeps as cards render and
    correct themselves.
  */
  contain-intrinsic-size: auto calc(
    var(--flow-grid-track-w, calc(100vw / var(--flow-grid-columns, 4))) * 0.5625 + 4.5rem
  );
}

/* A setting opened from search, so the eye finds it on the page. */
.setting-row-highlight {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

:root[data-app-font="system"] body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans Arabic", "Noto Naskh Arabic", sans-serif;
}