/* Study tabs of the top bar: one link per study tool of a product
   (Practice exam, Concept Maps, Flashcards...), the same row on every page of the
   product, the page's own tool highlighted (aria-current="page").
   The row itself is written into each page by tools/build-content.js between
   the study-tabs markers (tools and labels: tools/study-tools.js).
   Loaded by the exam pages, the Concept Map pages and the flashcards page; uses
   the tokens each of them defines (--brand, --brand-soft, --ink, --ink-2,
   --rule, --surface-2, --sans), so light and dark follow the Theme button. */


/* ============ desktop: round tabs, centered on the page width (owner, 15 Oct 2026) ============ */
.study-tabs{display:flex;align-items:center;gap:4px;margin-left:10px;min-width:0}
.stab{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;
  font-family:var(--sans);font-size:14px;font-weight:600;line-height:1;white-space:nowrap;text-decoration:none;
  color:var(--ink-2);border:1px solid transparent;border-radius:999px;
  transition:color .16s,background .16s,border-color .16s}
.stab:hover{color:var(--ink);background:var(--surface-2)}
.stab[aria-current="page"]{color:var(--ink);background:var(--surface);
  border-color:var(--rule-2,var(--rule));box-shadow:var(--shadow,none)}
.stab:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.stab .sm{display:none}

/* wide screens: the row sits in the middle of the bar, whatever is on either side */
@media(min-width:1080px){
  .topbar .topbar-in{position:relative}
  .study-tabs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0}
}


/* ============ narrow screens: tabs on a second row, full width ============ */
@media(max-width:980px){
  .topbar .topbar-in{flex-wrap:wrap;row-gap:4px}
  .study-tabs{order:9;flex:1 0 100%;margin:0 0 2px;gap:6px}
  .stab{flex:1 1 0;padding:0 6px;font-size:13.5px}
}

/* a phone: the short labels ("Exam" for "Practice exam") */
@media(max-width:560px){
  .stab .lg{display:none}
  .stab .sm{display:inline}
}