/* library-tabs.css — the four pillar tabs, in the page header.
 *
 * Every rule is scoped to .library-tabs: the tabs sit in the topbar beside
 * the brand and the header controls, and none of those may catch these
 * rules (or be caught by them). Colours are --play-* tokens only.
 */
.library-tabs{
  display:flex;align-items:center;gap:2px;min-width:0;
  overflow-x:auto;scrollbar-width:none;
}
.library-tabs::-webkit-scrollbar{display:none}
.library-tabs[hidden]{display:none}

/* A pillar the open course lacks is hidden by js/components/library-tabs.js
   (decision 0019); the author display below must not win over [hidden]. */
.library-tabs .lb-tab[hidden]{display:none}
.library-tabs .lb-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;
}
.library-tabs .lb-tab .jp{font-size:1.05rem}
.library-tabs .lb-tab i{font-style:normal;font-size:.78rem;color:var(--play-soft)}
.library-tabs .lb-tab:hover{color:var(--play-ink)}
.library-tabs .lb-tab[aria-selected="true"]{color:var(--play-accent);font-weight:700}
.library-tabs .lb-tab[aria-selected="true"] i{color:var(--play-accent)}
.library-tabs .lb-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 glyph and its count — still four distinguishable
   targets, because the glyph IS the pillar. */
@media (max-width:700px){
  .library-tabs .lb-tab-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .library-tabs .lb-tab{padding:6px 8px}
}