/* stage-tabs.css — the day's four stages, in the page header.
 *
 * Every rule is scoped to .stage-tabs, for the same reason library-tabs.css
 * scopes to .library-tabs: the row shares the topbar with the brand and the
 * header controls, and none of those may catch these rules.
 *
 * The two rows are intentionally identical in metrics and states — same
 * padding, same radius, same selected treatment — so the header reads as one
 * component that changes contents, not two rows with two personalities. The
 * only difference is the count chip, which here means work left to do and so
 * keeps its own pill rather than sitting as bare text.
 */
.stage-tabs{
  display:flex;align-items:center;gap:2px;min-width:0;
  overflow-x:auto;scrollbar-width:none;
}
.stage-tabs::-webkit-scrollbar{display:none}
.stage-tabs[hidden]{display:none}

.stage-tabs .st-tab{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  background:none;border:0;border-radius:10px;padding:6px 10px;cursor:pointer;
  color:var(--play-mute);font-family:var(--play-display);font-size:1rem;
  white-space:nowrap;min-height:2.375rem;
}
/* The icon carries the pillar glyph's size, and the row states its own
   height rather than inheriting whatever the fonts happen to measure — an
   emoji and a kanji do not set to the same line box, and the header must
   not shift when one row replaces the other. */
.stage-tabs .st-tab>span[aria-hidden="true"]{font-size:1.05rem}
.stage-tabs .st-tab i{
  font-style:normal;font-size:.72rem;line-height:1;
  padding:2px 6px;border-radius:999px;
  background:var(--play-accent-soft);color:var(--play-ink);
}
.stage-tabs .st-tab i:empty{display:none}
.stage-tabs .st-tab:hover{color:var(--play-ink)}
.stage-tabs .st-tab[aria-selected="true"]{color:var(--play-accent);font-weight:700}
.stage-tabs .st-tab[aria-selected="true"] i{background:var(--play-accent);color:var(--play-accent-ink)}
.stage-tabs .st-tab:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

/* Under the shell's narrow layout the header is tight: the labels give way
   first, leaving the icon and its count — still four distinguishable
   targets, and the icon is the one the trail already taught. */
@media (max-width:700px){
  .stage-tabs .st-tab-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .stage-tabs .st-tab{padding:6px 8px}
  /* With the label gone the selected colour has nothing to tint — an emoji
     ignores `color`. So selection becomes a pill at this width. The pillar
     tabs need no equivalent: their glyph IS text, and it tints. */
  .stage-tabs .st-tab[aria-selected="true"]{background:var(--play-accent-soft)}
}