/*
 * GXXXN.LIVE — Design System 2026
 * Phase 2: visual foundation
 * Requires existing compatibility bundle.
 */

:root {
  --gx-bg: #090b0e;
  --gx-surface: #11151a;
  --gx-surface-raised: #191e25;
  --gx-border: #2a3038;
  --gx-text: #f2f4f7;
  --gx-muted: #929ba7;
  --gx-accent: #e54865;
  --gx-accent-hover: #f0647d;
  --gx-radius: 4px;
  --gx-content: 1600px;
}

html {
  background: var(--gx-bg);
}

body[data-theme="professional"] {
  background: var(--gx-bg) !important;
  color: var(--gx-text);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

/* SHARED GEOMETRY */

body[data-theme="professional"] :is(
  button,
  input,
  select,
  .video-card,
  .chip,
  .content-chip,
  .collection-tab,
  .nav-button,
  .category-ticket,
  .affiliate-box
) {
  border-radius: var(--gx-radius) !important;
}

body[data-theme="professional"] :is(
  button,
  input,
  select
) {
  font: inherit;
}

body[data-theme="professional"] button {
  cursor: pointer;
}

body[data-theme="professional"] :is(
  button,
  a,
  input,
  select
):focus-visible {
  outline: 2px solid var(--gx-accent);
  outline-offset: 3px;
}

/* HEADER */

body[data-theme="professional"] .topbar {
  background: #0e1115 !important;
  border-bottom: 1px solid var(--gx-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body[data-theme="professional"] .brand {
  letter-spacing: -.035em;
}

body[data-theme="professional"] .search {
  background: var(--gx-surface) !important;
  border: 1px solid var(--gx-border) !important;
  box-shadow: none !important;
}

body[data-theme="professional"] .search:focus-within {
  border-color: var(--gx-accent) !important;
}

body[data-theme="professional"] .page-nav {
  border-color: var(--gx-border) !important;
}

body[data-theme="professional"] .page-nav-link {
  border-radius: 0 !important;
  font-weight: 600;
  letter-spacing: .01em;
}

body[data-theme="professional"] .page-nav-link.active {
  color: var(--gx-text) !important;
  border-bottom: 2px solid var(--gx-accent) !important;
}

/* CONTENT */

body[data-theme="professional"] main {
  max-width: var(--gx-content);
  margin-inline: auto;
}

body[data-theme="professional"] :is(
  .category-deck,
  .controls,
  .affiliate-market
) {
  box-shadow: none !important;
}

body[data-theme="professional"] :is(
  .category-deck,
  .affiliate-market
) {
  background: var(--gx-surface) !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: 6px !important;
}

body[data-theme="professional"] :is(
  .feed-head h2,
  .category-head h2,
  .affiliate-market h2
) {
  color: var(--gx-text);
  font-weight: 750;
  letter-spacing: -.045em;
}

body[data-theme="professional"] .eyebrow {
  color: var(--gx-accent) !important;
  letter-spacing: .12em;
}

/* FILTERS */

body[data-theme="professional"] :is(
  .chip,
  .content-chip,
  .orientation-button,
  .collection-tab
) {
  background: var(--gx-surface) !important;
  border: 1px solid var(--gx-border) !important;
  color: var(--gx-muted);
  box-shadow: none !important;
}

body[data-theme="professional"] :is(
  .chip.active,
  .content-chip.active,
  .orientation-button.active,
  .collection-tab.active
) {
  background: var(--gx-surface-raised) !important;
  border-color: var(--gx-accent) !important;
  color: var(--gx-text) !important;
}

/* VIDEO CARDS */

body[data-theme="professional"] .video-card {
  background: var(--gx-surface) !important;
  border: 1px solid var(--gx-border) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition:
    border-color .18s ease,
    transform .18s ease;
}

body[data-theme="professional"] .video-card:hover {
  border-color: #596371 !important;
  transform: translateY(-2px);
}

body[data-theme="professional"] .video-card :is(
  .thumb,
  .thumb-button
) {
  border-radius: 0 !important;
}

body[data-theme="professional"] .video-card :is(
  .title,
  .title-button
) {
  color: var(--gx-text) !important;
  font-weight: 650;
  line-height: 1.35;
}

body[data-theme="professional"] .video-card :is(
  .card-meta,
  .duration
) {
  font-variant-numeric: tabular-nums;
}

/* ACTIONS */

body[data-theme="professional"] :is(
  .primary-button,
  .random-button
) {
  background: var(--gx-accent) !important;
  color: #fff !important;
  border: 1px solid var(--gx-accent) !important;
  box-shadow: none !important;
}

body[data-theme="professional"] :is(
  .primary-button,
  .random-button
):hover {
  background: var(--gx-accent-hover) !important;
}

body[data-theme="professional"] :is(
  .ghost-button,
  .quiet-button,
  .load-more
) {
  box-shadow: none !important;
}

/* PLAYER */

body[data-theme="professional"] .player-dialog {
  background: var(--gx-bg) !important;
  border: 1px solid var(--gx-border) !important;
  border-radius: 6px !important;
}

body[data-theme="professional"] .player-frame-wrap {
  background: #000 !important;
  border-radius: 0 !important;
}

body[data-theme="professional"] .player-info {
  background: var(--gx-surface) !important;
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
  body[data-theme="professional"] .video-card {
    transition: none !important;
    transform: none !important;
  }
}

@media (max-width: 700px) {
  body[data-theme="professional"] .video-card {
    border-radius: 3px !important;
  }

  body[data-theme="professional"] :is(
    .category-deck,
    .affiliate-market
  ) {
    border-radius: 4px !important;
  }
}


/* GXXXN MOBILE REFINEMENT V1 */

@media (max-width: 767px) {
  body[data-theme="professional"] {
    overflow-x: hidden;
  }

  body[data-theme="professional"] .topbar {
    padding: 12px !important;
    gap: 12px !important;
  }

  body[data-theme="professional"] .search {
    width: 100%;
    min-width: 0;
  }

  body[data-theme="professional"] .page-nav {
    display: flex !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    gap: 18px !important;
    scrollbar-width: none;
  }

  body[data-theme="professional"] .page-nav::-webkit-scrollbar {
    display: none;
  }

  body[data-theme="professional"] .page-nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 2px !important;
  }

  body[data-theme="professional"] main {
    width: 100%;
    padding-inline: 12px !important;
  }

  body[data-theme="professional"] .video-grid {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body[data-theme="professional"] .video-card {
    min-width: 0;
  }

  body[data-theme="professional"] .video-card :is(
    .title,
    .title-button
  ) {
    font-size: 13px !important;
    line-height: 1.35;
  }

  body[data-theme="professional"] .category-deck {
    padding: 14px !important;
  }

  body[data-theme="professional"] .controls {
    gap: 10px !important;
  }

  body[data-theme="professional"] .feed-head h2 {
    font-size: clamp(21px, 6vw, 28px);
  }
}

@media (max-width: 359px) {
  body[data-theme="professional"] .video-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* GXXXN MOBILE HEADER — isolated layout, legacy flex-basis reset */
@media (max-width: 767px) {
  body[data-theme="professional"] header#top.topbar {
    display: flex !important;
    flex-flow: column nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    grid-template: none !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
    margin: 0 !important;
    overflow: visible !important;
    position: relative !important;
  }
  body[data-theme="professional"] header#top.topbar > .brand,
  body[data-theme="professional"] header#top.topbar > .top-actions,
  body[data-theme="professional"] header#top.topbar > #searchSourceBlock,
  body[data-theme="professional"] header#top.topbar > .page-nav {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  body[data-theme="professional"] header#top.topbar > .brand {
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    min-height: 44px !important;
  }
  body[data-theme="professional"] header#top.topbar > .top-actions {
    order: 2 !important;
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }
  body[data-theme="professional"] header#top.topbar > #searchSourceBlock {
    order: 3 !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
  }
  body[data-theme="professional"] header#top.topbar #searchForm.search {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    gap: 4px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible !important;
    background: #11151a !important;
    border: 1px solid #3b4652 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
  }
  body[data-theme="professional"] header#top.topbar #searchForm .search-icon {
    display: block !important;
    flex: 0 0 24px !important;
    padding: 0 !important;
    text-align: center !important;
  }
  body[data-theme="professional"] header#top.topbar #searchInput {
    display: block !important;
    flex: 1 1 0% !important;
    box-sizing: border-box !important;
    width: 1px !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 5px !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
    font-size: 16px !important;
    color: #f2f4f7 !important;
    background: transparent !important;
  }
  body[data-theme="professional"] header#top.topbar #searchForm button[type="submit"] {
    display: block !important;
    flex: 0 0 auto !important;
    height: 40px !important;
    min-height: 0 !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }
  body[data-theme="professional"] header#top.topbar #searchForm .search-shortcut,
  body[data-theme="professional"] header#top.topbar .source-control,
  body[data-theme="professional"] header#top.topbar .search-source-note {
    display: none !important;
  }
  body[data-theme="professional"] header#top.topbar > .page-nav {
    order: 4 !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 44px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 4px !important;
    gap: 16px !important;
    border-radius: 4px !important;
  }
  body[data-theme="professional"] header#top.topbar > .page-nav > * {
    flex: 0 0 auto !important;
  }
}