/* ARGOS Update 01. Load after integrated-layout.css. This layer intentionally
   owns shared chrome and opt-in primitives, never the player or TV catalogue. */
:root {
  --ui-control-size: var(--argos-control-size);
  --ui-radius-card: var(--argos-radius-card);
  --ui-radius-dialog: var(--argos-radius-panel);
  --ui-focus-color: var(--argos-focus);
  --motion-fast: var(--argos-duration-fast);
  --motion-base: var(--argos-duration-normal);
  --motion-normal: var(--argos-duration-normal);
  --motion-enter: var(--argos-duration-slow);
  --motion-ease: var(--argos-ease-standard);
  --shell-chrome-duration: var(--argos-duration-slow);
  --shell-chrome-opacity-duration: var(--argos-duration-normal);
  --shell-chrome-ease: var(--argos-ease-standard);
}

/* A graduated scrim supplies image contrast without framing the destinations
   in a solid band. Hit boxes and active font metrics remain stationary. */
body .topbar,
body:is(.sagas-visible, .streaming-active) .topbar,
body.mobile-shell-active .topbar {
  isolation: isolate;
  z-index: var(--argos-z-navigation);
  background: transparent;
  background-image: none;
  border-bottom: 0;
  box-shadow: none;
  backdrop-filter: none;
}
body .topbar::before {
  content: '';
  position: absolute;
  inset: 0 0 -24px;
  z-index: -1;
  pointer-events: none;
  background: var(--argos-nav-scrim);
}
body .topbar .catalog-tabs {
  background: transparent;
  border: 0;
  box-shadow: none;
}
body .topbar .catalog-tabs button,
body .topbar #tab-favorites,
body.mobile-shell-active .topbar .catalog-tabs button {
  min-height: var(--argos-control-size);
  border: 0;
  border-radius: var(--argos-radius-control);
  color: var(--argos-text-muted);
  background: transparent;
  background-image: none;
  box-shadow: none;
  text-shadow: var(--argos-nav-text-shadow);
  font-weight: 600;
  transform: none;
  transition: color var(--argos-duration-fast) var(--argos-ease-standard),
    background-color var(--argos-duration-normal) var(--argos-ease-standard);
}
body .topbar .catalog-tabs button[aria-pressed='true'],
body .topbar #tab-favorites[aria-pressed='true'],
body.mobile-shell-active .topbar .catalog-tabs button[aria-pressed='true'] {
  color: var(--argos-nav-active-text);
  background: var(--argos-red);
  border: 0;
  box-shadow: none;
  text-shadow: none;
}
body .topbar .catalog-tabs button::after,
body.mobile-shell-active .topbar .catalog-tabs button[aria-pressed='true']::after {
  content: none;
  display: none;
}
body .topbar .catalog-tabs button:focus-visible {
  outline: 2px solid var(--argos-focus);
  outline-offset: -3px;
}
/* One red surface carries the existing selection between desktop destinations.
   Explicit state metrics override old Sagas padding and Favorites ID rules. */
@media (min-width: 1400px) {
  body:not(.mobile-shell-active) .topbar .catalog-tabs {
    --argos-duration-navigation: 320ms;
    --argos-ease-navigation: cubic-bezier(.22,1,.36,1);
    position: relative; isolation: isolate;
  }
  body:not(.mobile-shell-active) .topbar .catalog-tabs button,
  body:not(.mobile-shell-active) .topbar .catalog-tabs button[aria-pressed='true'],
  body:not(.mobile-shell-active) .topbar .catalog-tabs #tab-favorites,
  body:not(.mobile-shell-active) .topbar .catalog-tabs #tab-favorites[aria-pressed='true'] {
    box-sizing: border-box; flex: none; min-height: 44px; padding: 10px 12px;
    border: 0; font-size: 13px; font-weight: 600; line-height: 1.4;
    position: relative; z-index: 1;
  }
  body:not(.mobile-shell-active) .topbar .catalog-tabs #tab-favorites,
  body:not(.mobile-shell-active) .topbar .catalog-tabs #tab-favorites[aria-pressed='true'] { padding-inline: 17px; }
  body:not(.mobile-shell-active) .topbar .catalog-tabs #favorites-count {
    display: inline-block; min-width: 1ch; font-variant-numeric: tabular-nums;
  }
  body:not(.mobile-shell-active) .topbar .catalog-tabs[data-argos-nav-indicator='ready'] button[aria-pressed='true'] { background: transparent; }
  .argos-nav-indicator {
    position: absolute; z-index: 0; pointer-events: none; border: 0;
    border-radius: var(--argos-radius-control); background: var(--argos-red);
    box-shadow: none; transform-origin: left top;
  }
}
.argos-nav-indicator[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  body[data-input-modality='mouse'] .topbar .catalog-tabs button:not([aria-pressed='true']):hover {
    color: var(--argos-text);
    background: var(--argos-hover);
    box-shadow: none;
    transform: none;
  }
}

/* Contained refinement of the real dock: unchanged actions, grid and geometry. */
body.mobile-shell-active .mobile-action-dock {
  z-index: var(--argos-z-dock);
  background: var(--argos-glass);
  border-color: var(--argos-line);
  border-radius: var(--argos-radius-panel);
  color: var(--argos-text-muted);
  box-shadow: 0 8px 28px rgb(0 0 0 / .25);
  transition: opacity var(--argos-duration-normal) var(--argos-ease-standard),
    transform var(--argos-duration-slow) var(--argos-ease-standard);
}
body.mobile-shell-active #mobile-action-dock :is(button, #tab-favorites) {
  color: var(--argos-text-muted);
  transition: color var(--argos-duration-fast) var(--argos-ease-standard),
    opacity var(--argos-duration-fast) var(--argos-ease-standard);
}
body.mobile-shell-active #mobile-action-dock button[aria-pressed='true'] { color: var(--argos-red-bright); }
body.mobile-shell-active #mobile-action-dock :focus-visible { outline-color: var(--argos-focus); outline-offset: -3px; }
body .header-search { z-index: var(--argos-z-menu); }
body dialog:not(#player-screen) { z-index: var(--argos-z-modal); }
body .universal-results { border-color: var(--argos-line); background: var(--argos-glass); box-shadow: var(--argos-shadow-panel); }
body .universal-option { transition: background-color var(--argos-duration-fast) var(--argos-ease-standard), color var(--argos-duration-fast) var(--argos-ease-standard); }
body .universal-option:is([aria-selected='true'], :focus-visible) { background: var(--argos-hover); border-color: transparent; }
body .universal-all { color: var(--argos-text-muted); }

/* Common extension points. A consumer opts in, preserving existing semantics
   and async state ownership. No global transition:all or hover transforms. */
.argos-title { font-family: var(--argos-font-title); font-weight: var(--argos-weight-title); line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.argos-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--argos-space-2);
  min-height: var(--argos-control-size); padding: 10px var(--argos-space-4);
  border: 1px solid var(--argos-line); border-radius: var(--argos-radius-control);
  background: var(--argos-surface-raised); color: var(--argos-text);
  box-shadow: none; font: 600 .875rem/1.4 var(--argos-font-ui);
  touch-action: manipulation;
  transition: color var(--argos-duration-fast) var(--argos-ease-standard),
    background-color var(--argos-duration-fast) var(--argos-ease-standard), opacity var(--argos-duration-fast) var(--argos-ease-standard);
}
.argos-button[data-variant='primary'] { border-color: transparent; background: var(--argos-red); color: #fff; }
.argos-button[data-variant='quiet'] { border-color: transparent; background: transparent; }
.argos-button:disabled, .argos-button[aria-disabled='true'] { opacity: .5; cursor: not-allowed; }
.argos-button:not(:disabled):active { background: color-mix(in srgb, var(--argos-surface-raised) 82%, var(--argos-text) 18%); transform: none; }
.argos-button[data-variant='primary']:not(:disabled):active { background: var(--argos-red-pressed); }
.argos-field { display: grid; gap: var(--argos-space-2); min-width: 0; color: var(--argos-text-muted); font: .875rem/1.5 var(--argos-font-ui); }
.argos-field > :is(input, select, textarea), :is(input, select, textarea).argos-input {
  min-width: 0; width: 100%; min-height: var(--argos-control-size); padding: 10px var(--argos-space-3);
  border: 1px solid var(--argos-line); border-radius: var(--argos-radius-control);
  background-color: var(--argos-field); color: var(--argos-text); font: 400 1rem/1.4 var(--argos-font-ui);
}
.argos-field [aria-invalid='true'], .argos-input[aria-invalid='true'] { border-color: var(--argos-red-bright); }
.argos-field :disabled, .argos-input:disabled { opacity: .55; }
.argos-field small { color: var(--argos-text-muted); font-size: .8125rem; line-height: 1.5; }
:is(.argos-button, .argos-input, .argos-field :is(input, select, textarea)):focus-visible { outline: 2px solid var(--argos-focus); outline-offset: 3px; }
.argos-dialog, .argos-sheet {
  z-index: var(--argos-z-modal); border: 1px solid var(--argos-line); border-radius: var(--argos-radius-panel);
  background: var(--argos-surface); color: var(--argos-text); box-shadow: var(--argos-shadow-panel);
}
.argos-sheet { z-index: var(--argos-z-sheet); }
:is(.argos-dialog, .argos-sheet)::backdrop { background: rgb(0 0 0 / .62); }
.argos-toast { z-index: var(--argos-z-message); padding: var(--argos-space-3) var(--argos-space-4); border: 1px solid var(--argos-line); border-radius: var(--argos-radius-control); background: var(--argos-surface-raised); color: var(--argos-text); box-shadow: var(--argos-shadow-panel); font: .875rem/1.5 var(--argos-font-ui); }

/* The existing custom select keeps native values, focus and keyboard logic.
   Its separate portal retains the old palette whenever playback is open. */
body:not(.player-open):not([data-view='catalog'][data-mode='live'][data-live-destination='channels']) .hls-select-menu {
  z-index: var(--argos-z-menu); background: var(--argos-surface); color: var(--argos-text);
  border-color: var(--argos-line); border-radius: var(--argos-radius-control);
  box-shadow: var(--argos-shadow-panel); font: .875rem/1.45 var(--argos-font-ui);
}
body:not(.player-open):not([data-view='catalog'][data-mode='live'][data-live-destination='channels']) .hls-select-menu .hls-select-option[data-active='true'] { color: var(--argos-text); background: var(--argos-hover); box-shadow: inset 2px 0 var(--argos-red); }
body:not(.player-open):not([data-view='catalog'][data-mode='live'][data-live-destination='channels']) .hls-select-menu .hls-select-option[aria-selected='true'] { color: var(--argos-red-bright); }
body:not(.player-open):not([data-view='catalog'][data-mode='live'][data-live-destination='channels']) .hls-select-menu .hls-select-group { color: var(--argos-text-muted); }

@media (prefers-reduced-motion: reduce) {
  body .topbar, body .topbar .catalog-tabs button,
  body.mobile-shell-active .mobile-action-dock,
  body.mobile-shell-active #mobile-action-dock :is(button, #tab-favorites),
  .argos-button, .argos-input, .argos-field :is(input, select, textarea),
  .argos-dialog, .argos-sheet, .argos-toast { animation: none; transition: none; }
}
@media (forced-colors: active) {
  body .topbar .catalog-tabs button[aria-pressed='true'] { color: HighlightText; background: Highlight; }
  body .topbar::before { background: Canvas; }
  .argos-button { border-color: ButtonText; }
  :is(.argos-button, .argos-input, .argos-field :is(input, select, textarea)):focus-visible { outline-color: Highlight; }
}

/* Universal search disclosure. The opener is a sibling, so the input, scope
   and quick results retain their original shared parent throughout a resize. */
.argos-header-search-open { display: none; }
body .argos-header-search-clear {
  position: absolute; z-index: 3; top: 0; right: 84px;
  display: inline-grid; place-items: center; width: 44px; min-width: 44px; height: 44px; min-height: 44px;
  margin: 0; padding: 0; border: 0; border-radius: var(--argos-radius-pill);
  background: transparent; color: var(--argos-text-muted); box-shadow: none; transform: none;
}
body .argos-header-search-clear[hidden] { display: none; }
body .argos-header-search-clear::before,
body .argos-header-search-clear::after { content: ''; position: absolute; width: 13px; height: 1.5px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
body .argos-header-search-clear::after { transform: rotate(-45deg); }
body .header-search[data-argos-header-search] #header-search::-webkit-search-cancel-button { appearance: none; -webkit-appearance: none; }
body .header-search[data-argos-header-search][data-argos-search-query='true'] > #header-search { padding-right: 132px; }
body .argos-header-search-clear:focus-visible { outline: 2px solid var(--argos-focus); outline-offset: -3px; }
body .argos-header-search-open:focus-visible { outline: 2px solid var(--argos-focus); outline-offset: -3px; }
@media (min-width: 1400px) {
  body .topbar .header-tools { position: relative; }
  body .topbar .argos-header-search-open {
    display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px;
    margin: 0; padding: 0; border: 0; border-radius: var(--argos-radius-pill); background: transparent; color: var(--argos-text-muted); box-shadow: none; transform: none;
    transition: color var(--argos-duration-fast) var(--argos-ease-standard), background-color var(--argos-duration-fast) var(--argos-ease-standard);
  }
  body .topbar .argos-header-search-open::before { content: ''; display: block; width: 21px; height: 21px; background: currentColor; mask: var(--ui-search) center / contain no-repeat; -webkit-mask: var(--ui-search) center / contain no-repeat; }
  body .topbar .argos-header-search-open[aria-expanded='true'] { background: var(--argos-hover); color: var(--argos-text); }
  body .topbar .argos-header-search-open:disabled { opacity: .45; cursor: not-allowed; }
  body .topbar .header-search[data-argos-header-search='desktop'] {
    position: absolute; inset: calc(100% + 12px) 0 auto auto;
    width: min(420px, calc(100vw - 32px)); max-width: calc(100vw - 32px); margin: 0;
    background: var(--argos-surface); border-radius: var(--argos-radius-control); box-shadow: var(--argos-shadow-panel);
  }
  body .topbar .header-search[data-argos-header-search='desktop'][hidden] { display: none; }
  body .topbar .header-search[data-argos-header-search='desktop'][data-open='false'] { pointer-events: none; }
  body .topbar .header-search[data-argos-header-search='desktop'] > #header-search { min-height: 46px; border-radius: var(--argos-radius-control); font-size: .875rem; }
}
@media (max-width: 1399px) {
  body .argos-header-search-open { display: none; }
  body #mobile-search-dialog .argos-header-search-clear { top: 1px; right: 96px; }
  body #mobile-search-dialog .header-search[data-argos-search-query='true'] > #header-search { padding-right: 48px; }
}
@media (prefers-reduced-motion: reduce) { .argos-header-search-open, .argos-header-search-clear { transition: none; } }