/*
 * FrameWorks Player CSS
 * Wrapped in @layer fw-player for cascade isolation.
 * Host app unlayered styles will always take precedence.
 */

/* Declare layer upfront for lowest priority */
@layer fw-player;

/* Import Tailwind utilities - NO theme (avoids :root pollution) */
@import "tailwindcss/utilities" layer(fw-player);
@import "./animations.css" layer(fw-player);

/* Tailwind v4 source scanning - absolute paths from monorepo */
@source "../../../../packages/react/src/**/*.tsx";
@source "../../../../packages/svelte/src/**/*.svelte";
@source "../../../../playground/src/**/*.tsx";
@source "../**/*.ts";

/* All custom styles in the fw-player layer */
@layer fw-player {
  /*
   * Player-scoped CSS variables - on .fw-player-surface to avoid :root pollution.
   * All player components must be wrapped in .fw-player-surface to inherit these.
   */
  .fw-player-surface {
    /* INTERNAL: Tokyo Night palette (default theme) */
    --tn-bg-dark: 235 21% 11%;
    --tn-bg: 233 23% 17%;
    --tn-bg-highlight: 233 23% 21%;
    --tn-bg-visual: 232 27% 25%;
    --tn-fg: 223 27% 76%;
    --tn-fg-bright: 220 13% 91%;
    --tn-fg-dark: 224 16% 53%;
    --tn-fg-gutter: 228 15% 45%;
    --tn-blue: 218 79% 73%;
    --tn-green: 95 53% 55%;
    --tn-red: 348 74% 64%;
    --tn-yellow: 35 79% 64%;
    --tn-purple: 267 82% 77%;
    --tn-cyan: 178 64% 63%;
    --tn-teal: 162 66% 62%;

    /* PUBLIC: Semantic design tokens (default = Tokyo Night) */
    --fw-surface-deep: var(--tn-bg-dark);
    --fw-surface: var(--tn-bg);
    --fw-surface-raised: var(--tn-bg-highlight);
    --fw-surface-active: var(--tn-bg-visual);
    --fw-text: var(--tn-fg);
    --fw-text-bright: var(--tn-fg-bright);
    --fw-text-muted: var(--tn-fg-dark);
    --fw-text-faint: var(--tn-fg-gutter);
    --fw-accent: var(--tn-blue);
    --fw-accent-secondary: var(--tn-cyan);
    --fw-success: var(--tn-green);
    --fw-danger: var(--tn-red);
    --fw-warning: var(--tn-yellow);
    --fw-live: 348 80% 48%;
    --fw-shadow-color: 0 0% 0%;
    --fw-on-accent: var(--tn-bg-dark);
    --fw-on-live: 0 0% 100%;
    --fw-radius: 0;

    /* Composite */
    --fw-controls-bg: hsl(var(--fw-surface-deep) / 0.85);
    --fw-controls-fg: hsl(var(--fw-text));
    --fw-seam: hsl(var(--fw-text-faint) / 0.3);
    color: var(--fw-controls-fg);
  }

  /* =====================================================
     SLAB SYSTEM - Player Controls & Overlays
     ===================================================== */

  .fw-player-surface button {
    font: inherit;
  }

  /* Slab base - solid structural block */
  .fw-slab {
    background: var(--fw-controls-bg);
    border: 1px solid var(--fw-seam);
  }

  /* Slab header - uppercase, padded */
  .fw-slab-header {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--fw-seam);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: hsl(var(--fw-text-muted));
  }

  /* Slab body - padded content area */
  .fw-slab-body {
    padding: 1rem;
  }

  /* Slab actions - flush buttons, seams between */
  .fw-slab-actions {
    display: flex;
    border-top: 1px solid var(--fw-seam);
  }

  .fw-slab-actions > * {
    flex: 1;
    border-radius: 0 !important;
  }

  .fw-slab-actions > * + * {
    border-left: 1px solid var(--fw-seam);
  }

  /* Control bar - horizontal slab */
  .fw-control-bar {
    display: flex;
    align-items: center;
    background: var(--fw-controls-bg);
    border-top: 1px solid var(--fw-seam);
    backdrop-filter: blur(8px);
  }

  /* Control group - seamed sections within bar */
  .fw-control-group {
    display: flex;
    align-items: center;
    padding: 0.5rem;
  }

  .fw-control-group + .fw-control-group {
    border-left: 1px solid var(--fw-seam);
  }

  /* Flush button - fills space, no radius */
  .fw-btn-flush {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    border-radius: 0;
    background: transparent;
    color: hsl(var(--fw-text));
    transition:
      background-color 0.15s,
      color 0.15s;
    cursor: pointer;
  }

  .fw-btn-flush:hover {
    background: hsl(var(--fw-surface-active) / 0.5);
  }

  .fw-btn-flush:active {
    background: hsl(var(--fw-surface-active));
  }

  /* Status indicators */
  .fw-status-online {
    color: hsl(var(--fw-success));
  }
  .fw-status-offline {
    color: hsl(var(--fw-danger));
  }
  .fw-status-warning {
    color: hsl(var(--fw-warning));
  }
  .fw-status-info {
    color: hsl(var(--fw-accent-secondary));
  }

  .animate-spin-slow {
    animation: spin-slow 18s linear infinite;
  }

  /* =====================================================
     PLAYER CONTAINER STYLES (Slab-based)
     ===================================================== */

  .fw-player-root {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 0; /* Slabs don't have rounded corners */
    background-color: hsl(var(--fw-surface-deep));
    border: 1px solid hsl(var(--fw-text-faint) / 0.3);
  }

  .fw-player-container {
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    background-color: hsl(var(--fw-surface-deep));
  }

  .fw-player-video {
    height: 100%;
    width: 100%;
    border-radius: 0;
    object-fit: contain;
    background-color: hsl(var(--fw-surface-deep));
  }

  .fw-player-embed {
    height: 100%;
    width: 100%;
    min-height: 300px;
    border-radius: 0;
    border-width: 0;
    background-color: hsl(var(--fw-surface-deep));
  }

  .fw-player-dvd {
    position: absolute;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
  }

  /* =====================================================
     UTILITY FALLBACKS - Tailwind v4 @source partial coverage
     These ensure critical classes are always available
     ===================================================== */

  /* Positioning */
  .inset-0 {
    inset: 0;
  }
  .inset-x-0 {
    left: 0;
    right: 0;
  }
  .inset-y-0 {
    top: 0;
    bottom: 0;
  }
  .top-0 {
    top: 0;
  }
  .top-2 {
    top: 0.5rem;
  }
  .right-0 {
    right: 0;
  }
  .right-2 {
    right: 0.5rem;
  }
  .bottom-0 {
    bottom: 0;
  }
  .bottom-2 {
    bottom: 0.5rem;
  }
  .left-0 {
    left: 0;
  }
  .left-2 {
    left: 0.5rem;
  }

  /* Sizing */
  .w-2 {
    width: 0.5rem;
  }
  .w-2\.5 {
    width: 0.625rem;
  }
  .w-4 {
    width: 1rem;
  }
  .w-5 {
    width: 1.25rem;
  }
  .w-6 {
    width: 1.5rem;
  }
  .w-8 {
    width: 2rem;
  }
  .w-10 {
    width: 2.5rem;
  }
  .w-12 {
    width: 3rem;
  }
  .w-24 {
    width: 6rem;
  }
  .w-28 {
    width: 7rem;
  }
  .w-48 {
    width: 12rem;
  }
  .w-full {
    width: 100%;
  }
  .h-1 {
    height: 0.25rem;
  }
  .h-1\.5 {
    height: 0.375rem;
  }
  .h-2 {
    height: 0.5rem;
  }
  .h-2\.5 {
    height: 0.625rem;
  }
  .h-4 {
    height: 1rem;
  }
  .h-5 {
    height: 1.25rem;
  }
  .h-6 {
    height: 1.5rem;
  }
  .h-8 {
    height: 2rem;
  }
  .h-10 {
    height: 2.5rem;
  }
  .h-12 {
    height: 3rem;
  }
  .h-full {
    height: 100%;
  }
  .min-w-0 {
    min-width: 0;
  }
  .max-w-xs {
    max-width: 20rem;
  }
  .max-w-sm {
    max-width: 24rem;
  }
  .max-h-\[80\%\] {
    max-height: 80%;
  }
  .max-w-\[320px\] {
    max-width: 320px;
  }

  /* Spacing */
  .gap-1 {
    gap: 0.25rem;
  }
  .gap-2 {
    gap: 0.5rem;
  }
  .gap-4 {
    gap: 1rem;
  }
  .space-x-1 > * + * {
    margin-left: 0.25rem;
  }
  .space-x-2 > * + * {
    margin-left: 0.5rem;
  }
  .space-y-1 > * + * {
    margin-top: 0.25rem;
  }
  .p-1 {
    padding: 0.25rem;
  }
  .p-2 {
    padding: 0.5rem;
  }
  .p-3 {
    padding: 0.75rem;
  }
  .pr-2 {
    padding-right: 0.5rem;
  }
  .pr-5 {
    padding-right: 1.25rem;
  }
  .px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
  .py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .m-0 {
    margin: 0;
  }
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
  }
  .mt-1 {
    margin-top: 0.25rem;
  }
  .mt-2 {
    margin-top: 0.5rem;
  }
  .mb-1 {
    margin-bottom: 0.25rem;
  }
  .mb-2 {
    margin-bottom: 0.5rem;
  }
  .-mb-1 {
    margin-bottom: -0.25rem;
  }
  .-ml-4 {
    margin-left: -1rem;
  }
  .ml-0\.5 {
    margin-left: 0.125rem;
  }

  /* Typography */
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[11px\] {
    font-size: 11px;
  }
  .text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
  }
  .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  .text-center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
  .font-medium {
    font-weight: 500;
  }
  .font-semibold {
    font-weight: 600;
  }
  .font-mono {
    font-family: ui-monospace, monospace;
  }
  .uppercase {
    text-transform: uppercase;
  }
  .leading-none {
    line-height: 1;
  }
  .tracking-wider {
    letter-spacing: 0.05em;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Colors */
  .text-white {
    color: white;
  }
  .text-white\/50 {
    color: rgb(255 255 255 / 0.5);
  }
  .text-white\/70 {
    color: rgb(255 255 255 / 0.7);
  }
  .text-white\/80 {
    color: rgb(255 255 255 / 0.8);
  }
  .text-white\/90 {
    color: rgb(255 255 255 / 0.9);
  }
  .bg-black {
    background-color: black;
  }
  .bg-black\/40 {
    background-color: rgb(0 0 0 / 0.4);
  }
  .bg-black\/50 {
    background-color: rgb(0 0 0 / 0.5);
  }
  .bg-black\/80 {
    background-color: rgb(0 0 0 / 0.8);
  }
  .bg-black\/90 {
    background-color: rgb(0 0 0 / 0.9);
  }
  .bg-white {
    background-color: white;
  }
  .bg-white\/5 {
    background-color: rgb(255 255 255 / 0.05);
  }
  .bg-white\/10 {
    background-color: rgb(255 255 255 / 0.1);
  }
  .bg-white\/20 {
    background-color: rgb(255 255 255 / 0.2);
  }
  .bg-white\/30 {
    background-color: rgb(255 255 255 / 0.3);
  }
  .bg-white\/50 {
    background-color: rgb(255 255 255 / 0.5);
  }
  .border-white\/10 {
    border-color: rgb(255 255 255 / 0.1);
  }
  .hover\:text-white:hover {
    color: white;
  }
  .hover\:bg-white\/5:hover {
    background-color: rgb(255 255 255 / 0.05);
  }
  .hover\:bg-white\/10:hover {
    background-color: rgb(255 255 255 / 0.1);
  }

  /* Borders & Rounded */
  .border {
    border-width: 1px;
  }
  .border-b {
    border-bottom-width: 1px;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-md {
    border-radius: 0.375rem;
  }
  .rounded-lg {
    border-radius: 0.5rem;
  }
  .rounded-full {
    border-radius: 9999px;
  }

  /* Effects */
  .shadow-lg {
    box-shadow:
      0 10px 15px -3px hsl(var(--fw-shadow-color) / 0.1),
      0 4px 6px -4px hsl(var(--fw-shadow-color) / 0.1);
  }
  .backdrop-blur-sm {
    backdrop-filter: blur(4px);
  }

  /* Tokyo Night Utilities */
  .bg-tn-bg-dark {
    background-color: hsl(var(--fw-surface-deep));
  }
  .bg-tn-bg {
    background-color: hsl(var(--fw-surface));
  }
  .bg-tn-bg-highlight {
    background-color: hsl(var(--fw-surface-raised));
  }
  .text-tn-fg {
    color: hsl(var(--fw-text));
  }
  .text-tn-fg-dark {
    color: hsl(var(--fw-text-muted));
  }
  .text-tn-blue {
    color: hsl(var(--fw-accent));
  }
  .text-tn-accent {
    color: hsl(var(--fw-surface-active));
  }
  .bg-tn-blue {
    background-color: hsl(var(--fw-accent));
  }
  .bg-tn-accent {
    background-color: hsl(var(--fw-surface-active));
  }
  .border-tn-seam {
    border-color: hsl(var(--fw-text-faint) / 0.3);
  }

  /* Opacity */
  .opacity-0 {
    opacity: 0;
  }
  .opacity-40 {
    opacity: 0.4;
  }
  .opacity-50 {
    opacity: 0.5;
  }
  .opacity-100 {
    opacity: 1;
  }

  /* Transitions */
  .transition {
    transition-property:
      color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter,
      width;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-colors {
    transition-property: color, background-color, border-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }
  .duration-200 {
    transition-duration: 200ms;
  }

  /* Interactive */
  .cursor-pointer {
    cursor: pointer;
  }
  .cursor-not-allowed {
    cursor: not-allowed;
  }
  .select-none {
    user-select: none;
  }
  .touch-none {
    touch-action: none;
  }
  .group:hover .group-hover\:rotate-90 {
    transform: rotate(90deg);
  }
  .group:hover .group-hover\:h-1\.5 {
    height: 0.375rem;
  }

  /* Overflow */
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-auto {
    overflow: auto;
  }

  /* Responsive - sm: breakpoint (640px) */
  @media (min-width: 640px) {
    .sm\:flex {
      display: flex;
    }
  }

  /* =====================================================
     DEV MODE PANEL - Advanced Settings Sidebar
     ===================================================== */

  /* Button reset for all dev panel buttons */
  .fw-dev-toggle,
  .fw-dev-tab,
  .fw-dev-close,
  .fw-dev-mode-btn,
  .fw-dev-action-btn,
  .fw-dev-combo-btn,
  .fw-dev-list-toggle {
    border: none;
    outline: none;
    font: inherit;
    line-height: inherit;
  }

  /* Toggle button (shown when panel is closed) */
  .fw-dev-toggle {
    position: absolute;
    bottom: 3.5rem;
    right: 0.5rem;
    z-index: 40;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--fw-surface-deep));
    border: 1px solid hsl(var(--fw-text-faint) / 0.5) !important; /* Override reset */
    color: hsl(var(--fw-text-muted));
    cursor: pointer;
    transition:
      opacity 200ms,
      background-color 150ms,
      border-color 150ms,
      color 150ms;
  }

  .fw-dev-toggle:hover {
    background: hsl(var(--fw-surface));
    border-color: hsl(var(--fw-text-faint));
    color: hsl(var(--fw-text));
  }

  .fw-dev-toggle--hidden {
    opacity: 0;
    pointer-events: none;
  }

  /* Panel container */
  .fw-dev-panel {
    z-index: 40;
    pointer-events: auto;
    background: hsl(var(--fw-surface-deep));
    border-left: 1px solid hsl(var(--fw-text-faint) / 0.5);
    color: hsl(var(--fw-text));
    font-size: 0.75rem;
    font-family: ui-monospace, monospace;
    width: 280px;
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-shrink: 0;
  }

  /* Panel header with tabs */
  .fw-dev-header {
    display: flex;
    align-items: center;
    border-bottom: 1px solid hsl(var(--fw-text-faint) / 0.3);
    background: hsl(var(--fw-surface-deep));
  }

  .fw-dev-tab {
    padding: 0.5rem 0.75rem;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    transition:
      color 150ms,
      background-color 150ms;
    border-right: 1px solid hsl(var(--fw-text-faint) / 0.3) !important; /* Override reset */
    background: transparent;
    cursor: pointer;
    color: hsl(var(--fw-text-muted));
  }

  .fw-dev-tab:hover {
    color: hsl(var(--fw-text));
    background: hsl(var(--fw-surface-deep) / 0.5);
  }

  .fw-dev-tab--active {
    color: hsl(var(--fw-text-bright));
    background: hsl(var(--fw-surface-deep));
  }

  .fw-dev-close {
    color: hsl(var(--fw-text-muted));
    transition: color 150ms;
    padding: 0.5rem;
    background: transparent;
    cursor: pointer;
  }

  .fw-dev-close:hover {
    color: hsl(var(--fw-text));
  }

  /* Panel body (scrollable content area) */
  .fw-dev-body {
    flex: 1;
    min-height: 0; /* Required for overflow in flex child */
    overflow-y: auto;
  }

  /* Section within panel */
  .fw-dev-section {
    padding: 0.75rem;
    border-bottom: 1px solid hsl(var(--fw-text-faint) / 0.3);
  }

  .fw-dev-section-header {
    background: hsl(var(--fw-surface-deep));
  }

  .fw-dev-label {
    font-size: 10px;
    color: hsl(var(--fw-text-muted));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 0.25rem;
  }

  .fw-dev-value {
    color: hsl(var(--fw-text-bright));
    font-size: 0.875rem;
  }

  .fw-dev-value-arrow {
    color: hsl(var(--fw-accent));
  }

  .fw-dev-value-muted {
    color: hsl(var(--fw-text-muted));
    font-size: 10px;
    margin-top: 0.25rem;
  }

  /* Mode buttons (Auto/Low Lat/Quality) */
  .fw-dev-mode-group {
    display: flex;
    gap: 0.25rem;
  }

  .fw-dev-mode-btn {
    flex: 1;
    padding: 0.375rem 0.5rem;
    font-size: 10px;
    font-weight: 500;
    transition:
      color 150ms,
      background-color 150ms;
    background: hsl(var(--fw-surface));
    color: hsl(var(--fw-text-muted));
    cursor: pointer;
  }

  .fw-dev-mode-btn:hover {
    color: hsl(var(--fw-text));
    background: hsl(var(--fw-surface-raised));
  }

  .fw-dev-mode-btn--active {
    background: hsl(var(--fw-accent));
    color: hsl(var(--fw-surface-deep));
  }

  .fw-dev-mode-desc {
    font-size: 10px;
    color: hsl(var(--fw-text-muted));
    margin-top: 0.375rem;
  }

  /* Action buttons row */
  .fw-dev-actions {
    display: flex;
    border-bottom: 1px solid hsl(var(--fw-text-faint) / 0.3);
  }

  .fw-dev-action-btn {
    flex: 1;
    padding: 0.5rem 0.75rem;
    background: hsl(var(--fw-surface));
    color: hsl(var(--fw-text));
    font-size: 0.75rem;
    transition:
      color 150ms,
      background-color 150ms;
    cursor: pointer;
  }

  .fw-dev-action-btn:hover {
    background: hsl(var(--fw-surface-raised));
    color: hsl(var(--fw-text-bright));
  }

  .fw-dev-action-btn + .fw-dev-action-btn {
    border-left: 1px solid hsl(var(--fw-text-faint) / 0.3) !important; /* Override reset */
  }

  /* Combo list header */
  .fw-dev-list-header {
    padding: 0.5rem 0.75rem;
    background: hsl(var(--fw-surface-deep));
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .fw-dev-list-title {
    font-size: 10px;
    color: hsl(var(--fw-text-muted));
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
  }

  .fw-dev-list-toggle {
    font-size: 10px;
    color: hsl(var(--fw-text-muted));
    transition: color 150ms;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    cursor: pointer;
  }

  .fw-dev-list-toggle:hover {
    color: hsl(var(--fw-text));
  }

  .fw-dev-list-empty {
    padding: 1rem 0.75rem;
    color: hsl(var(--fw-text-muted));
    text-align: center;
    font-size: 0.75rem;
  }

  /* Combo list items */
  .fw-dev-combo {
    position: relative;
  }

  .fw-dev-combo-btn {
    width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition:
      background-color 150ms,
      color 150ms;
    background: transparent;
    color: hsl(var(--fw-text));
    cursor: pointer;
    border-bottom: 1px solid hsl(var(--fw-text-faint) / 0.2) !important; /* Override reset */
  }

  .fw-dev-combo-btn:hover {
    background: hsl(var(--fw-surface));
  }

  .fw-dev-combo-btn--active {
    background: hsl(var(--fw-surface-raised));
    color: hsl(var(--fw-text-bright));
    box-shadow: inset 0 0 0 1px hsl(var(--fw-accent));
  }

  .fw-dev-combo-btn--disabled {
    opacity: 0.4;
  }

  .fw-dev-combo-btn--codec-warn {
    background: hsl(var(--fw-warning) / 0.05);
  }

  .fw-dev-combo-btn--codec-warn:hover {
    background: hsl(var(--fw-warning) / 0.1);
  }

  .fw-dev-combo-rank {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    background: hsl(var(--fw-text-faint) / 0.5);
    color: hsl(var(--fw-text-muted));
  }

  .fw-dev-combo-rank--active {
    background: hsl(var(--fw-accent));
    color: hsl(var(--fw-surface-deep));
  }

  .fw-dev-combo-rank--disabled {
    background: hsl(var(--fw-text-faint) / 0.3);
    color: hsl(var(--fw-text-faint));
  }

  .fw-dev-combo-rank--warn {
    background: hsl(var(--fw-warning) / 0.3);
    color: hsl(var(--fw-warning));
  }

  .fw-dev-combo-name {
    flex: 1;
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fw-dev-combo-arrow {
    color: hsl(var(--fw-text-muted));
  }

  .fw-dev-combo-type {
    color: hsl(var(--fw-accent-secondary));
  }

  .fw-dev-combo-type--warn {
    color: hsl(var(--fw-warning));
  }

  .fw-dev-combo-type--disabled {
    color: hsl(var(--fw-text-muted));
  }

  .fw-dev-combo-score {
    font-size: 10px;
    font-family: ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
    padding: 0.125rem 0.375rem;
    flex-shrink: 0;
  }

  .fw-dev-combo-score--high {
    background: hsl(var(--fw-success) / 0.2);
    color: hsl(var(--fw-success));
  }

  .fw-dev-combo-score--mid {
    background: hsl(var(--fw-accent) / 0.2);
    color: hsl(var(--fw-accent));
  }

  .fw-dev-combo-score--low {
    background: hsl(var(--fw-warning) / 0.2);
    color: hsl(var(--fw-warning));
  }

  .fw-dev-combo-score--disabled {
    background: hsl(var(--fw-text-faint) / 0.2);
    color: hsl(var(--fw-text-faint));
  }

  /* Tooltip/popover for score breakdown */
  .fw-dev-tooltip {
    position: absolute;
    right: 100%;
    top: 0;
    margin-right: 0.5rem;
    z-index: 50;
    background: hsl(var(--fw-surface-deep));
    border: 1px solid hsl(var(--fw-text-faint));
    box-shadow: 0 10px 15px -3px hsl(var(--fw-shadow-color) / 0.1);
    padding: 0.5rem;
    font-size: 10px;
    white-space: nowrap;
    pointer-events: none;
    min-width: 220px;
  }

  .fw-dev-tooltip-header {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid hsl(var(--fw-text-faint) / 0.5);
  }

  .fw-dev-tooltip-title {
    color: hsl(var(--fw-text-bright));
    font-weight: 700;
  }

  .fw-dev-tooltip-subtitle {
    color: hsl(var(--fw-accent-secondary));
  }

  .fw-dev-tooltip-tracks {
    color: hsl(var(--fw-text-muted));
    margin-top: 0.125rem;
  }

  .fw-dev-tooltip-score {
    color: hsl(var(--fw-text-bright));
    font-weight: 700;
    margin-bottom: 0.25rem;
  }

  .fw-dev-tooltip-row {
    color: hsl(var(--fw-text-muted));
  }

  .fw-dev-tooltip-value {
    color: hsl(var(--fw-text));
  }

  .fw-dev-tooltip-weight {
    color: hsl(var(--fw-text-faint));
  }

  .fw-dev-tooltip-bonus {
    color: hsl(var(--fw-success));
  }

  .fw-dev-tooltip-penalty {
    color: hsl(var(--fw-danger));
  }

  .fw-dev-tooltip-error {
    color: hsl(var(--fw-danger));
  }

  /* Stats tab */
  .fw-dev-stat {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid hsl(var(--fw-text-faint) / 0.2);
  }

  .fw-dev-stat-label {
    color: hsl(var(--fw-text-muted));
  }

  .fw-dev-stat-value {
    color: hsl(var(--fw-text-bright));
  }

  .fw-dev-stat-value--good {
    color: hsl(var(--fw-success));
  }

  .fw-dev-stat-value--warn {
    color: hsl(var(--fw-warning));
  }

  .fw-dev-stat-value--bad {
    color: hsl(var(--fw-danger));
  }

  .fw-dev-stat-value--accent {
    color: hsl(var(--fw-accent));
  }

  /* Playback rate display */
  .fw-dev-rate {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .fw-dev-rate-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .fw-dev-rate-status {
    color: hsl(var(--fw-text-muted));
    font-size: 10px;
  }

  .fw-dev-rate-stats {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 10px;
  }

  /* Track badges */
  .fw-dev-track {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid hsl(var(--fw-text-faint) / 0.2);
  }

  .fw-dev-track-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
  }

  .fw-dev-track-badge {
    font-size: 10px;
    font-family: ui-monospace, monospace;
    padding: 0.125rem 0.375rem;
    text-transform: uppercase;
  }

  .fw-dev-track-badge--video {
    background: hsl(var(--fw-accent) / 0.2);
    color: hsl(var(--fw-accent));
  }

  .fw-dev-track-badge--audio {
    background: hsl(var(--fw-success) / 0.2);
    color: hsl(var(--fw-success));
  }

  .fw-dev-track-badge--other {
    background: hsl(var(--fw-warning) / 0.2);
    color: hsl(var(--fw-warning));
  }

  .fw-dev-track-codec {
    color: hsl(var(--fw-text-bright));
    font-size: 0.75rem;
    font-family: ui-monospace, monospace;
  }

  .fw-dev-track-id {
    color: hsl(var(--fw-text-muted));
    font-size: 10px;
  }

  .fw-dev-track-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    row-gap: 0.125rem;
    font-size: 10px;
    color: hsl(var(--fw-text-muted));
  }

  .fw-dev-no-tracks {
    border-top: 1px solid hsl(var(--fw-text-faint) / 0.3);
    padding: 0.75rem;
  }

  .fw-dev-no-tracks-text {
    font-size: 10px;
    color: hsl(var(--fw-text-muted));
  }

  .fw-dev-no-tracks-type {
    margin-left: 0.5rem;
    color: hsl(var(--fw-accent));
  }

  /* Chevron rotation */
  .fw-dev-chevron {
    transition: transform 150ms;
  }

  .fw-dev-chevron--open {
    transform: rotate(180deg);
  }

  /* Spacer for flex-grow */
  .fw-dev-spacer {
    flex: 1;
  }

  /* =====================================================
     VIDEO.JS CONTAINER CONSTRAINTS
     ===================================================== */

  /* VideoJS wrapper must respect container bounds */
  .fw-player-container .video-js {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: hsl(var(--fw-surface-deep));
  }

  /* Ensure video tech fills the wrapper with letterboxing */
  .fw-player-container .video-js .vjs-tech {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* =====================================================
     VIDEO.JS UI HIDING (when using custom controls)
     ===================================================== */

  /* Hide all VideoJS chrome when using our custom controls */
  .vjs-fw-custom-controls .vjs-control-bar,
  .vjs-fw-custom-controls .vjs-big-play-button,
  .vjs-fw-custom-controls .vjs-loading-spinner,
  .vjs-fw-custom-controls .vjs-text-track-display,
  .vjs-fw-custom-controls .vjs-error-display,
  .vjs-fw-custom-controls .vjs-modal-dialog,
  .vjs-fw-custom-controls .vjs-poster,
  .vjs-fw-custom-controls .vjs-live-control,
  .vjs-fw-custom-controls .vjs-title-bar {
    display: none !important;
  }

  /* Ensure video element fills container (absolute positioning) */
  .vjs-fw-custom-controls .vjs-tech {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}