/* Merged tabs: seven down to five.
 *
 * Loaded only when the switch is on, so none of this reaches a member while
 * the option says `current`. It hides the two tabs that are moving BEFORE
 * anything paints — doing that in script would show the old row for a frame
 * first. Colours and type come from stacks.css's own variables so the sub-row
 * cannot drift from the tabs above it.
 */

/* Heat and Concentrated Offenses keep working; they just stop being top-level.
   Not `display:none` on the element itself — the sub-row below clicks these
   buttons, and a hidden-but-present button is still clickable. */
.ows-stacks.is-merged .stx-tabs .stx-tab[data-tab="heat"],
.ows-stacks.is-merged .stx-tabs .stx-tab[data-tab="teams"],
.ows-stacks.is-merged .stx-tabs .stx-tab[data-tab="leverage"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* With a child view open, `is-active` is sitting on a button nobody can see.
   The parent wears the selected look instead — same rule as .stx-tab.is-active
   so the bar reads identically either way. */
.ows-stacks.is-merged .stx-tab.is-child-active {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink);
  border-bottom: 1px solid var(--surface);
  position: relative;
  z-index: 2;
}

/* The second row. Navigation inside a tab, not a filter, so it sits at the top
   of the panel and borrows the tab vocabulary one size down.

   NOT named `stx-subtab`, which is taken: teams.js builds a Teams/Players
   toggle with that class inside Concentrated Offenses, and Late Swap uses it
   for its slate and stance buttons. Reusing the name restyled their buttons
   and the sync below wrote aria-pressed onto them — both of which it did,
   until this was renamed. */
   The LOOK, though, is deliberately the same: /stacks/ already has a sub-nav
   vocabulary in the Teams/Players pills, and a second one two inches above it
   would read as a different kind of control. These rules are `.stx-subtab`'s,
   copied, so the page keeps one answer to "what does a choice inside a tab
   look like". */
.ows-stacks .stx-mergednav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}
.ows-stacks .stx-mergednav-btn {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font-family: var(--display);
  font-size: 16px;
  cursor: pointer;
}
.ows-stacks .stx-mergednav-btn[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.ows-stacks .stx-mergednav-btn:hover:not([aria-pressed="true"]) { color: var(--ink); }

/* The row sits directly under the tab bar, which carries a 1px seam the active
   tab sits on top of. Clear it. */
.ows-stacks.is-merged .stx-panel > .stx-mergednav { margin-top: 18px; }

/* An embedded tool brings its own page wrapper. Inside a panel it must not
   add a second lot of page padding on top of the panel's own. */
.ows-stacks.is-merged .stx-panel > .ows-lev-embed,
.ows-stacks.is-merged .stx-panel > .ows-ls-embed {
  margin: 0;
  padding: 0;
  max-width: none;
}

/* A line of plain English under the row, for the two views whose panel has no
   heading of its own. */
.ows-stacks .stx-mergednav-note {
  margin: 4px 0 20px;
  font-size: 15px;
  color: var(--muted);
}

@media (max-width: 560px) {
  .ows-stacks .stx-mergednav { display: grid; grid-template-columns: 1fr 1fr; }
  .ows-stacks .stx-mergednav-btn { padding: 8px 6px; font-size: 14px; text-align: center; }
}