/* One shared tab treatment for the Series and bracket renderers. */
:is(html:root body.series-page,html:root.viewer-public-shell) :is(.series-viewer-tabs,.viewer-section-nav){
  display:flex;
  align-items:center;
  gap:4px;
  min-height:56px;
  padding:5px;
  margin-block:12px 0;
  border:1px solid var(--brk-ui-line,var(--brk-workspace-border));
  border-radius:var(--brk-workspace-radius-control,8px);
  background:var(--brk-ui-surface,var(--brk-workspace-surface));
  overflow-x:auto;
  flex-wrap:nowrap;
  scrollbar-width:thin;
  scroll-padding-inline:6px;
}
:is(html:root body.series-page,html:root.viewer-public-shell) :is(.series-viewer-tabs,.viewer-section-nav)>:is(a,button){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  position:relative;
  box-sizing:border-box;
  height:44px;
  min-height:44px;
  padding:0 13px;
  border:1px solid transparent;
  border-radius:var(--brk-workspace-radius-control,8px);
  background:transparent;
  color:var(--brk-ui-muted,var(--brk-workspace-muted));
  font-family:var(--brk-workspace-font,Inter,ui-sans-serif,system-ui,sans-serif);
  font-size:12px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:.15px;
  text-transform:none;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
}
:is(html:root body.series-page,html:root.viewer-public-shell) :is(.series-viewer-tabs,.viewer-section-nav)>:is(a,button):hover{
  background:var(--brk-workspace-primary-soft,color-mix(in srgb,var(--brk-ui-blue) 14%,transparent));
  color:var(--brk-ui-text,var(--brk-workspace-text));
}
:is(html:root body.series-page,html:root.viewer-public-shell) :is(.series-viewer-tabs,.viewer-section-nav)>:is(a,button).active{
  background:var(--brk-workspace-primary-soft,color-mix(in srgb,var(--brk-ui-blue) 14%,transparent));
  border-color:var(--brk-ui-line-strong,var(--brk-workspace-border-strong));
  color:var(--brk-ui-text,var(--brk-workspace-text));
  box-shadow:inset 0 -2px 0 var(--brk-highlight,var(--brk-workspace-highlight,var(--brk-ui-blue)));
}
:is(html:root body.series-page,html:root.viewer-public-shell) :is(.series-viewer-tabs,.viewer-section-nav)>a.active::after{content:none}
:is(html:root body.series-page,html:root.viewer-public-shell) :is(.series-viewer-tabs,.viewer-section-nav)>:is(a,button):focus-visible{
  outline:2px solid var(--brk-highlight,var(--brk-workspace-highlight,var(--brk-ui-blue)));
  outline-offset:-2px;
}
/* Put secondary actions after the destinations without changing DOM/tab order. */
:is(html:root body.series-page,html:root.viewer-public-shell) :is(.series-viewer-tabs,.viewer-section-nav)>:is([data-viewer-rules],[data-open-rules]){margin-inline-start:auto}
html.viewer-public-shell .viewer-playoffs-sticky-nav .viewer-section-nav{margin-block:0}
@media(max-width:759px){
  :is(html:root body.series-page,html:root.viewer-public-shell) :is(.series-viewer-tabs,.viewer-section-nav){gap:3px;margin-top:10px}
  :is(html:root body.series-page,html:root.viewer-public-shell) :is(.series-viewer-tabs,.viewer-section-nav)>:is(a,button){padding-inline:12px}
}

html:root.viewer-public-shell .viewer-playoffs-sticky-nav{height:auto;min-height:56px}

/* Keep destinations and division choices in view when their labels outgrow a row. */
:is(html:root body.series-page, html:root.viewer-public-shell) :is(.series-viewer-tabs, .viewer-section-nav) {
  flex-wrap: wrap;
  overflow: visible;
}

:is(html:root body.series-page, html:root.viewer-public-shell) :is(.series-viewer-tabs, .viewer-section-nav) > :is(a, button) {
  height: auto;
  max-width: 100%;
  padding-block: 7px;
  font-size: 13px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

html.bracketr-theme-light :is(.series-viewer-tabs, .viewer-section-nav) > :is(a, button):focus-visible {
  outline-color: var(--light-action);
}

/* Keep the wrapped playoffs menu in flow so scrolling never collapses its row. */
html:root.viewer-public-shell .viewer-playoffs-sticky-nav {
  position: sticky;
  top: 0;
}

html:root.viewer-public-shell .viewer-playoffs-sticky-nav.is-pinned .viewer-section-nav {
  position: static;
  width: auto;
}

:is(html:root body.series-page, html:root.viewer-public-shell) .viewer-division-bar nav.viewer-division-nav {
  flex-wrap: wrap;
  overflow: visible;
}

:is(html:root body.series-page, html:root.viewer-public-shell) .viewer-division-bar nav.viewer-division-nav > a {
  min-height: 44px;
  max-width: 100%;
  padding-block: 5px;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 900px), (max-height: 600px) {
  html:root.viewer-public-shell .viewer-playoffs-sticky-nav {
    position: relative;
  }
}

@media (max-width: 759px) {
  :is(html:root body.series-page, html:root.viewer-public-shell) :is(.series-viewer-tabs, .viewer-section-nav) > :is(a, button) {
    padding-inline: 9px;
  }

  :is(html:root body.series-page, html:root.viewer-public-shell) :is(.series-viewer-tabs, .viewer-section-nav) > :is([data-viewer-rules], [data-open-rules]) {
    margin-inline-start: 0;
  }

  :is(html:root body.series-page, html:root.viewer-public-shell) .viewer-division-bar nav.viewer-division-nav > a {
    padding-inline: 9px;
  }
}