/* ================================================================
   HOME-TABS.CSS — Practice | Courses, IN THE TOPBAR's middle cell, directly
   above the notch timer (../../practice/home-tabs.js; Seth 2026-10-06: "two
   tabs at the top and the middle whenever you're not practicing", then "put
   the tabs at the very top bar ... above the timer in the actual top bar").

   A segmented switch in the survey card's ink (styles/survey.css): one
   hairline pill, the lit half washed in the XP glow. Sized for the 44px bar
   (--dd-topbar-h, styles/layout.css). Token-only: no hex (styles/watch.py).
   ================================================================ */

.home-tabs {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  display: none;
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px;
}

/* WHEN: basic mode (advanced mode's tab strip already has both pages), on
   the Learner Home's idle screen, on the Courses tab or on the Notes tab. Not while a question
   is up — `.session-idle` goes and the concept pill (styles/concept-pill.css)
   has the cell. */
body.dd-basic-mode:has(#page-practice.session-idle:not(.hidden)) .topbar-mid > .home-tabs,
body.dd-basic-mode:has(#page-courses:not(.hidden)) .topbar-mid > .home-tabs,
body.dd-basic-mode:has(#page-arena-notebooks:not(.hidden)) .topbar-mid > .home-tabs,
body.dd-basic-mode:has(#page-notes:not(.hidden)) .topbar-mid > .home-tabs {
  display: flex;
}

.home-tab {
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font: 600 13px/1 var(--ui-font);
  letter-spacing: 0.01em;
  min-width: 92px;
  padding: 8px 16px;
  white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.home-tab:hover { color: var(--text); }

.home-tab[aria-current="page"] {
  background: rgb(var(--xp-glow-rgb) / 0.16);
  box-shadow: inset 0 0 0 1px rgb(var(--xp-glow-rgb) / 0.35);
  color: var(--white);
}

.home-tab:focus-visible { outline: 2px solid var(--xp-to); outline-offset: 2px; }

/* Share the narrow bar with the brand. Stay in flow so neither the brand
   nor the About contents overlap the tabs; extra enabled tabs scroll. */
body.nav-drawer-mode .topbar-mid {
  flex: 1;
}

body.nav-drawer-mode .topbar-mid > .home-tabs {
  flex-shrink: 1;
  max-width: 100%;
  overflow-x: auto;
}

/* Phone: the bar's side cells hold the menu and the account control; the
   switch gives way first. */
@media (max-width: 560px) {
  .home-tab { min-width: 0; padding: 8px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-tab { transition: none; }
}

.home-tab[hidden] { display: none; }