/* components/viewtabs.css — the Planner/Session/Library/Quiz header tabs, worn by both app.html and planner.html.
   Split from the pre-#149 monolith — rule ORDER preserved; see docs/architecture.md
   ("CSS layers") for the load-order contract each page's <head> follows. */
/* ---- the view tabs --------------------------------------------------
   Shared by this header and the trainer's (app.html loads this file too), so
   the two read as one navigation rather than two lookalikes. It lives here
   rather than in trainer.css because only this file reaches both pages.

   Both element types are styled. The tab for the page you are ON is an <a>
   here and a <button> in the trainer, and an unstyled <button> falls back to
   raw browser chrome — which is exactly what an `a`-only rule produced when
   buttons were added to this nav (#144, since reverted). */
.viewtabs{
  display:inline-flex;align-items:center;flex:none;height:46px;padding:4px;
  margin:0 0 0 24px;
  background:color-mix(in srgb, var(--pl-surface) 85%, transparent);
  border:1px solid var(--pl-line);border-radius:16px;
  box-shadow:0 8px 24px var(--pl-shadow);
}
.viewtabs button,.viewtabs a{
  display:flex;align-items:center;height:100%;padding:0 20px;
  border:1px solid transparent;border-radius:12px;background:none;
  font:500 12px inherit;font-family:inherit;color:var(--pl-mute);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:color .12s,background .12s;
}
.viewtabs button:hover,.viewtabs a:hover{color:var(--pl-ink)}
.viewtabs button.active,.viewtabs a.active{
  background:var(--pl-card);
  border-color:color-mix(in srgb, var(--pl-ink) 5%, transparent);
  color:var(--pl-ink);font-weight:700;
  box-shadow:0 4px 14px var(--pl-shadow);
}
.viewtabs button:focus-visible,.viewtabs a:focus-visible{
  outline:2px solid var(--pl-accent);outline-offset:2px;
}
/* The component's responsive behaviour travels with it: four tabs at the
   desktop padding measure ~372px, which overflows a 320px screen. */
@media(max-width:899px){
  .viewtabs{height:40px}
  .viewtabs button,.viewtabs a{padding:0 13px}
}
@media(max-width:480px){
  .viewtabs{width:100%;justify-content:space-between;margin-left:0}
  .viewtabs button,.viewtabs a{flex:1;justify-content:center;padding:0 6px}
}
@media (prefers-reduced-motion:reduce){
  .viewtabs button,.viewtabs a{transition:none}
}