/* Personal hub — shared mode nav (Vocab / Siddur / Fitness / Tasks / Kitchen, and whatever
   comes next). Consumed by independently-themed contexts (vocab-app's permanent dark theme,
   siddur-app's parchment/dark theme, the fitness page template) — rather than inheriting
   each host page's own token set (which don't share variable names), this component is
   self-contained: its own small bronze-on-ink bar, consistent regardless of what's under it.
   Colors are literal values pulled from the canonical design-system primitives
   (design-system/tokens/colors.css: --ink-700, --bone-100, --bronze-400, --slate-400) so it
   stays on-brand without a live cross-directory import (same "copied snapshot" convention
   vocab-app's own tokens.css already uses).
   Logical properties throughout so it flips correctly under dir="rtl" (siddur's Hebrew).

   The link list is a horizontally-scrolling strip (.mode-nav__links), not a wrapping row —
   with five+ modes a fixed-width bar no longer fits everything, and a scroll strip keeps every
   mode a single tap away (no drawer/menu step) at the cost of not all being visible at once.
   nav.js scrolls the current mode into view on load so it's never hidden off-screen by default.
   The edge mask-fade is unconditional (not scroll-position-driven) to keep this CSS-only. */

.mode-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block: 8px;
  padding-block-start: calc(8px + env(safe-area-inset-top));
  padding-inline: 12px;
  background: #17232B; /* --ink-700 */
  border-block-end: 1px solid rgba(199, 165, 94, 0.20); /* --bronze-400 @ 20% */
  font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.mode-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  min-inline-size: 0; /* let the flex item shrink below content width so overflow can kick in */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge */
  mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
}

.mode-nav__links::-webkit-scrollbar {
  display: none;
}

.mode-nav__link {
  appearance: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  scroll-snap-align: start;
  min-block-size: 32px;
  padding-inline: 12px;
  border-radius: 2px;
  color: #869295; /* --slate-400 */
  border: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.mode-nav__link:hover {
  color: #ECE6D7; /* --bone-100 */
}

.mode-nav__link:focus-visible {
  outline: 2px solid #C7A55E; /* --bronze-400 */
  outline-offset: 2px;
}

.mode-nav__link[aria-current="page"] {
  color: #C7A55E; /* --bronze-400 */
  border-color: rgba(199, 165, 94, 0.35);
  background: rgba(199, 165, 94, 0.08);
  font-weight: 600;
}

.mode-nav__status {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: #869295; /* --slate-400 */
  padding-inline-end: 4px;
}

.mode-nav__status[data-offline="true"] {
  color: #DC8A7B; /* --danger-400 */
}