/* Sidebar-only overrides: the main content keeps its fixed rail allowance. */
#app-sidebar .sidebar-sport-item::before { display: none; content: none; }
#app-sidebar .sidebar-context-icon:has(img)::before { opacity: 0; }
#app-sidebar .sidebar-competition .sidebar-context-icon::before { content: none; display: none; }
#app-sidebar .sidebar-competition .sidebar-context-icon[hidden] { display: none; }
#app-sidebar .sidebar-competition .sidebar-context-icon img { filter: none; opacity: 1; background: transparent; }
#app-sidebar .sidebar-competition-no-logo .sidebar-context-label { display: block; opacity: 1; visibility: visible; transform: none; }
#app-sidebar .sidebar-services,
body.sidebar-peeking #app-sidebar .sidebar-services,
body.sidebar-open #app-sidebar .sidebar-services {
  grid-template-columns: minmax(0, 1fr);
  grid-auto-flow: row;
  gap: 3px;
  margin-top: 12px;
  padding: 0;
}

#app-sidebar .service-nav-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 38px;
  min-height: 38px;
  padding: 0 5px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  text-align: left;
  overflow: hidden;
  transform: none;
}

#app-sidebar .service-nav-button:is(:hover, :active) {
  border: 0;
  background: rgb(255 255 255 / .045);
  box-shadow: none;
  transform: none;
}

/* Selection belongs to the whole row, with breathing room around the mark. */
#app-sidebar .service-nav-button::after {
  content: none;
  display: none;
  animation: none;
  background: none;
  box-shadow: none;
}

#app-sidebar .service-nav-button::before {
  content: none;
  display: none;
}

#app-sidebar .service-logo { flex: 0 0 44px; width: 44px; height: 20px; overflow: hidden; white-space: nowrap; filter: none; }
#app-sidebar .service-nav-button:is(:hover, [aria-pressed='true']) .service-logo { filter: none; }
#app-sidebar .service-nav-button .sidebar-context-label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--text-muted, #a9abb1); font-size: 11px; font-weight: 500; }
#app-sidebar .service-nav-button[aria-pressed='true'] .sidebar-context-label { color: var(--text, #f2efe8); }
#app-sidebar .service-nav-button:focus-visible { outline: 1px solid var(--text, #f2efe8); outline-offset: -3px; border-radius: 7px; }
#app-sidebar #sidebar-toggle::before { left: calc(50% - 4px); top: calc(50% - 4px); }

@media (min-width: 721px) {
  #app-sidebar,
  body.sidebar-collapsed #app-sidebar {
    width: 60px;
    padding-right: 0;
    overflow-x: clip;
    overflow-y: auto;
    scrollbar-width: none;
    transition: width .3s cubic-bezier(.2, .7, .2, 1), padding-right .3s cubic-bezier(.2, .7, .2, 1), background-color .3s ease;
  }
  #app-sidebar::-webkit-scrollbar { display: none; }
  body.sidebar-peeking #app-sidebar { width: 224px; padding-right: 12px; background: var(--canvas); }
  #app-sidebar .sidebar-action,
  body.sidebar-collapsed #app-sidebar .sidebar-action,
  #app-sidebar .sidebar-family,
  #app-sidebar .sidebar-sport-item {
    width: 204px;
    justify-content: flex-start;
    overflow: hidden;
  }
  #app-sidebar .sidebar-label,
  body.sidebar-collapsed #app-sidebar .sidebar-label,
  #app-sidebar .sidebar-context-label {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    pointer-events: none;
    transition: opacity .16s ease, transform .24s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .2s;
  }
  body.sidebar-peeking #app-sidebar .sidebar-label,
  body.sidebar-peeking.sidebar-collapsed #app-sidebar .sidebar-label,
  body.sidebar-peeking #app-sidebar .sidebar-context-label {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity .22s ease .035s, transform .28s cubic-bezier(.2, .7, .2, 1), visibility 0s;
  }
}

@media (min-width: 721px) and (max-height: 700px) {
  #app-sidebar #sidebar-toggle { width: 34px; height: 34px; min-height: 34px; margin-bottom: 6px; }
  #app-sidebar .sidebar-navigation { gap: 2px; margin-bottom: 6px; }
  #app-sidebar .sidebar-action,
  body.sidebar-collapsed #app-sidebar .sidebar-action { min-height: 34px; padding-top: 7px; padding-bottom: 7px; }
  #app-sidebar .sidebar-services { gap: 2px; margin-top: 8px; }
  #app-sidebar .service-nav-button { height: 30px; min-height: 30px; }
  #app-sidebar .sidebar-family,
  #app-sidebar .sidebar-sport-item { min-height: 31px; padding-top: 5px; padding-bottom: 5px; }
}

@media (max-width: 720px) {
  #app-sidebar,
  body.sidebar-collapsed #app-sidebar {
    opacity: 0;
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.2, .7, .2, 1), opacity .2s ease;
  }
  body.sidebar-open #app-sidebar,
  body.sidebar-open.sidebar-collapsed #app-sidebar,
  body.sidebar-closing #app-sidebar,
  body.sidebar-closing.sidebar-collapsed #app-sidebar {
    display: block;
    z-index: 50;
    top: var(--header-height);
    bottom: 0;
    left: 0;
    width: min(280px, calc(100vw - 56px));
    padding: 18px 20px 28px;
    overflow: auto;
    background: var(--sidebar-surface);
    box-shadow: 20px 0 60px rgb(0 0 0 / .25);
  }
  body.sidebar-open #app-sidebar { opacity: 1; transform: translateX(0); }
  body.sidebar-closing #app-sidebar { pointer-events: none; }
  #app-sidebar .service-nav-button { width: 100%; height: 44px; min-height: 44px; }
  #app-sidebar .sidebar-services { gap: 2px; }
  #app-sidebar .sidebar-label,
  #app-sidebar .sidebar-context-label { transition: opacity .18s ease, transform .24s ease; }
  body.sidebar-closing #app-sidebar .sidebar-label,
  body.sidebar-closing #app-sidebar .sidebar-context-label { display: block; opacity: 0; transform: translateX(-6px); }
  @starting-style {
    body.sidebar-open #app-sidebar { opacity: 0; transform: translateX(-100%); }
  }
}

@media (prefers-reduced-motion: reduce) {
  #app-sidebar,
  #app-sidebar *,
  #app-sidebar *::before,
  #app-sidebar *::after { animation: none !important; transition: none !important; }
}

/* Room actions use a centered modal, independent of the sidebar's transforms. */
#sync-dialog { position: fixed; inset: 0; width: min(420px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: auto; border: 1px solid var(--line, #ffffff1c); border-radius: 22px; background: var(--surface, #17191e); color: var(--text, #f2efe8); box-shadow: 0 24px 90px #0009, 0 0 44px #e3133212; }
#sync-dialog::backdrop { background: #0506099c; backdrop-filter: blur(7px); }
#sync-dialog[open] { animation: sync-dialog-enter .28s cubic-bezier(.16, 1, .3, 1) both; }
#sync-dialog[open]::backdrop { animation: sync-backdrop-enter .22s ease both; }
#sync-dialog .sync-controls { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 20px; width: 100%; margin: 0; padding: 30px; border: 0; border-radius: inherit; background: linear-gradient(135deg, #e3133209, transparent 65%); box-shadow: none; }
#sync-dialog .sync-heading { display: grid; gap: 9px; padding-right: 32px; }
#sync-dialog .sync-heading h2 { margin: 0; color: var(--text); font-size: 21px; font-weight: 650; }
#sync-dialog .section-kicker { margin-bottom: 8px; color: var(--accent-bright, #f02a3b); font-size: 9px; letter-spacing: .16em; }
#sync-dialog .sync-status { color: var(--text-muted); }
#sync-dialog .field { min-width: 0; }
#sync-dialog #room-code { width: 100%; min-height: 46px; }
#sync-dialog .room-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#sync-dialog .room-actions button { width: 100%; min-height: 46px; padding: 12px; font-size: 12px; }
#sync-dialog .sync-options { display: grid; gap: 15px; margin: 0; }
#sync-dialog .sync-help { color: var(--text-muted); font-size: 12px; line-height: 1.65; }
#sync-close { position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); box-shadow: none; transform: none; transition: color .18s, background .18s, box-shadow .18s; }
#sync-close::before, #sync-close::after { content: ''; position: absolute; width: 15px; height: 1.5px; border-radius: 2px; background: currentColor; transform: rotate(45deg); pointer-events: none; }
#sync-close::after { transform: rotate(-45deg); }
#sync-close:hover { background: #e3133212; color: var(--text); box-shadow: 0 0 20px #e3133224; transform: none; }
#sync-close:focus-visible { outline: 2px solid var(--accent-bright, #f02a3b); outline-offset: -3px; }
body.sync-visible { overflow: hidden; }
@keyframes sync-dialog-enter { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sync-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 420px) { #sync-dialog .sync-controls { padding: 27px 22px 24px; } }
@media (prefers-reduced-motion: reduce) { #sync-dialog[open], #sync-dialog[open]::backdrop { animation: none; } #sync-close { transition: none; } }

/* Shared brand artwork for the existing service rail and mobile context panel.
   Each source is local and has recorded provenance; this layer changes neither
   navigation targets nor button hit areas. Optical sizes preserve aspect ratio. */
html body .service-logo[data-service] {
  display: block;
  flex: 0 0 56px;
  width: 56px;
  height: 32px;
  font-size: 0;
  line-height: 0;
  color: var(--text-muted, #a9abb1);
  background: currentColor;
  mask: var(--service-mask) center / var(--service-optical-size, contain) no-repeat;
  -webkit-mask: var(--service-mask) center / var(--service-optical-size, contain) no-repeat;
  filter: none;
}
html body .service-logo[data-service='netflix'] { --service-mask: url('/assets/services/netflix.svg'); --service-optical-size: 28px 28px; --service-selected-color: #e50914; }
html body .service-logo[data-service='prime'] { --service-mask: url('/assets/sports/channel-logos/prime-video-dark-v1.svg'); --service-optical-size: 54px auto; --service-selected-image: url('/assets/services/prime-video-color-v1.svg'); --service-selected-mask: none; }
html body .service-logo[data-service='disney'] { --service-mask: url('/assets/sports/channel-logos/disney-plus-dark-v1.svg'); --service-optical-size: 52px auto; --service-selected-image: url('/assets/services/disney-plus-color-v1.svg'); --service-selected-mask: none; }
html body .service-logo[data-service='max'] { --service-mask: url('/assets/sports/channel-logos/hbo-max-v1.png'); --service-optical-size: auto 28px; --service-selected-image: url('/assets/sports/channel-logos/hbo-max-v1.png'); --service-selected-mask: none; }
html body .service-logo[data-service='apple'] { --service-mask: url('/assets/services/appletv-tight-v1.svg'); --service-optical-size: 44px auto; }
html body .service-logo[data-service='paramount'] { --service-mask: url('/assets/sports/channel-logos/paramount-plus-dark-v1.svg'); --service-optical-size: auto 30px; --service-selected-color: #0064ff; }
html body .service-logo[data-service='globoplay'] { --service-optical-size: 32px 32px; --service-selected-image: url('/assets/services/globoplay-app-official-v1.png'); --service-selected-mask: none; }

html body #app-sidebar .service-logo[data-service],
html body.mobile-shell-active #compact-context-navigation .service-logo[data-service],
html body.mobile-shell-active :is(.mobile-context-toggle, .mobile-context-dialog) .service-logo[data-service] {
  flex: 0 0 56px;
  flex-basis: 56px;
  width: 56px;
  height: 32px;
  margin: 0;
  font-size: 0;
  background: currentColor;
  mask: var(--service-mask) center / var(--service-optical-size, contain) no-repeat;
  -webkit-mask: var(--service-mask) center / var(--service-optical-size, contain) no-repeat;
  filter: none;
}
html body #app-sidebar .service-nav-button:is(:hover, [aria-pressed='true']) .service-logo[data-service],
html body.mobile-shell-active .mobile-context-toggle .service-logo[data-service],
html body.mobile-shell-active .mobile-context-dialog [aria-pressed='true'] .service-logo[data-service] { color: var(--text, #f2efe8); }

/* A shared mark column leaves a genuine gap before every service name.
   Keep the existing 60px visible rail and all 244px hit targets unchanged. */
@media (min-width: 1400px) {
  html body:not(.mobile-shell-active) #app-sidebar .service-nav-button { padding-inline: 2px 12px; padding-block: 11px; gap: 12px; }
  html body:not(.mobile-shell-active):is(.sidebar-peeking, .sidebar-open) #app-sidebar .service-nav-button { padding-inline: 12px; }
}
/* Keep the pre-refinement row heights (54px desktop, 50px mobile) despite
   the 4px taller artwork. Height stays auto for wrapped or enlarged labels. */
html body.mobile-shell-active #mobile-context-dialog .service-nav-button { padding-block: 9px; }
/* Inactive Globoplay uses the previously authorized white derivative. The
   complete original colored app mark is restored only for a selected service. */
html body .service-logo[data-service='globoplay'],
html body #app-sidebar .service-logo[data-service='globoplay'],
html body.mobile-shell-active #compact-context-navigation .service-logo[data-service='globoplay'],
html body.mobile-shell-active :is(.mobile-context-toggle, .mobile-context-dialog) .service-logo[data-service='globoplay'] {
  background: transparent url('/assets/services/globoplay-app-white-v1.png') center / 32px 32px no-repeat;
  mask: none;
  -webkit-mask: none;
}
/* The same canonical service buttons move into the mobile drawer. No cloned
   actions or separate selection state: aria-pressed remains the single owner.
   Original white brands (Apple/HBO) also retain a clearly selected row shape. */
html body #app-sidebar .service-nav-button,
html body.mobile-shell-active #mobile-context-dialog .service-nav-button {
  border-radius: 12px;
  transition: background-color .18s ease, box-shadow .18s ease;
}
html body #app-sidebar .service-nav-button[aria-pressed='true'],
html body.mobile-shell-active #mobile-context-dialog .service-nav-button[aria-pressed='true'] {
  background: rgb(229 9 20 / .09);
  box-shadow: inset 0 0 0 1px rgb(229 9 20 / .38);
}
html body #app-sidebar .service-nav-button[aria-pressed='true']:hover,
html body.mobile-shell-active #mobile-context-dialog .service-nav-button[aria-pressed='true']:hover {
  background: rgb(229 9 20 / .13);
}
html body #app-sidebar .service-nav-button:focus-visible,
html body.mobile-shell-active #mobile-context-dialog .service-nav-button:focus-visible {
  outline: 2px solid var(--text, #f2efe8);
  outline-offset: -4px;
}
html body #app-sidebar .service-nav-button[aria-pressed='true'] .service-logo[data-service],
html body.mobile-shell-active #mobile-context-dialog .service-nav-button[aria-pressed='true'] .service-logo[data-service],
html body.mobile-shell-active .mobile-context-toggle .service-logo[data-service] {
  color: var(--service-selected-color, #fff);
  background: var(--service-selected-image, currentColor) center / var(--service-optical-size, contain) no-repeat;
  mask: var(--service-selected-mask, var(--service-mask)) center / var(--service-optical-size, contain) no-repeat;
  -webkit-mask: var(--service-selected-mask, var(--service-mask)) center / var(--service-optical-size, contain) no-repeat;
}
/* Raster/gradient originals keep their transparent canvases. */
html body #app-sidebar .service-nav-button[aria-pressed='true'] .service-logo:is([data-service='prime'], [data-service='disney'], [data-service='max'], [data-service='globoplay']),
html body.mobile-shell-active #mobile-context-dialog .service-nav-button[aria-pressed='true'] .service-logo:is([data-service='prime'], [data-service='disney'], [data-service='max'], [data-service='globoplay']),
html body.mobile-shell-active .mobile-context-toggle .service-logo:is([data-service='prime'], [data-service='disney'], [data-service='max'], [data-service='globoplay']) { background-color: transparent; }
/* The source Disney wordmark uses dark blue ink. Keep those original colors
   legible on the dark canvas with a quiet light backing, not a recolored mark. */
html body #app-sidebar .service-nav-button[aria-pressed='true'] .service-logo[data-service='disney'],
html body.mobile-shell-active #mobile-context-dialog .service-nav-button[aria-pressed='true'] .service-logo[data-service='disney'],
html body.mobile-shell-active .mobile-context-toggle .service-logo[data-service='disney'] {
  background-color: #edf5fa;
  border-radius: 6px;
}
html body.mobile-shell-active .mobile-context-toggle .service-logo[data-service] {
  /* The compact opener has less room than the expanded list. */
  flex-basis: 32px;
  width: 32px;
  height: 25px;
  max-width: 100%;
  mask-size: contain;
  -webkit-mask-size: contain;
  background-size: contain;
}
html body.mobile-shell-active .mobile-context-toggle .service-logo[data-service='globoplay'] {
  background-size: 24px 24px;
}
/* The header opener is also #mobile-context-open in the sliding mobile shell.
   Match that real ID so the later 28x22 rule cannot clip the complete 24px mark.
   Only the artwork box changes; the existing 44px button remains unchanged. */
html body.mobile-shell-active.mobile-sidebar-enabled #mobile-context-open .service-logo[data-service] {
  width: 32px;
  height: 25px;
}
/* A 32px mark must also fit the grid's content track. The inherited 10px
   padding left only 24px and pushed an oversized track toward the right.
   Keep the 44px button and leave non-service context icons untouched. */
html body.mobile-shell-active.mobile-sidebar-enabled #mobile-context-open:has(.service-logo[data-service]) {
  padding: 6px;
}
@media (prefers-reduced-motion: reduce) {
  html body #app-sidebar .service-nav-button,
  html body.mobile-shell-active #mobile-context-dialog .service-nav-button { transition: none; }
}