/* ============================================================
   NAV VARIANTS — styles for the horizontal event sub-nav (A)
   ============================================================ */
.subnav {
  display: flex; align-items: center; gap: 10px;
  height: 46px; flex-shrink: 0;
  padding: 0 14px 0 18px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.subnav-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-faint); flex-shrink: 0;
}
.subnav-scroll {
  display: flex; align-items: center; gap: 6px;
  flex: 1; min-width: 0; overflow-x: auto;
  scrollbar-width: none; padding: 4px 0;
}
.subnav-scroll::-webkit-scrollbar { display: none; }

.ev-chip {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
  max-width: 210px; height: 30px; padding: 0 10px;
  border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted);
  transition: background 120ms, color 120ms, border-color 120ms;
}
.ev-chip:hover { background: var(--surface-hover); color: var(--text); }
.ev-chip.active {
  background: var(--accent-soft); border-color: var(--accent-ring);
  color: var(--accent); font-weight: 600;
}
.ev-chip-n {
  font-family: var(--font-mono); font-size: 10px; flex-shrink: 0;
  padding: 1px 5px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-dim);
}
.ev-chip.active .ev-chip-n { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }

/* ---- A2: tab-style chips that connect to the content below ----
   The strip's 1px rule is painted as a BACKGROUND, not a border: children
   paint above their parent's background, so the active tab can cover it.
   A border could never be covered, because the tab lives inside a scroll
   container (overflow-x:auto forces overflow-y:auto, clipping any overlap). */
.subnav2 {
  height: 48px; position: relative; align-items: stretch;
  border-bottom: none;
  background-image: linear-gradient(var(--border), var(--border));
  background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 100%;
}
/* buttons/arrows stay centred; only the tab strip spans the full height */
.subnav2 > .btn, .subnav2 > .subnav-arrow, .subnav2 > .v-divider,
.subnav2 > .field-input, .subnav2 > span { align-self: center; }
.subnav2 .subnav-scroll {
  align-self: stretch; height: auto; padding: 0 2px; align-items: flex-end;
  scroll-snap-type: x mandatory;
}
/* fade only on the side that actually has content scrolled off */
.subnav2 .subnav-scroll.fade-l {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px);
}
.subnav2 .subnav-scroll.fade-r {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 calc(100% - 16px), transparent 100%);
}
.subnav2 .subnav-scroll.fade-l.fade-r {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.subnav2 .ev-tab { scroll-snap-align: start; transition: none; }
/* 0,3,0 beats .ev-chip / .ev-chip.active — no !important needed.
   Explicit longhands: a `border-color` shorthand containing var() parses
   into EMPTY longhands here, and `background` shorthand is dropped too. */
.subnav2 .ev-tab.active {
  background-color: var(--bg);
  color: var(--text);
  border-top-color: var(--border);
  border-right-color: var(--border);
  border-left-color: var(--border);
  border-bottom-color: var(--bg);
  font-weight: 600;
  box-shadow: inset 0 2px 0 0 var(--accent);
}
.ev-tab {
  border-radius: 8px 8px 0 0;
  height: 34px; margin-bottom: 0;
  border-bottom-color: transparent;
}
.ev-tab.active {
  font-weight: 600;
  box-shadow: inset 0 2px 0 0 var(--accent);
}
.ev-tab.active .ev-chip-n { background: var(--accent-soft); color: var(--accent); }

.subnav-arrow {
  flex-shrink: 0; width: 22px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-2); color: var(--text-muted);
  cursor: pointer; font-size: 15px; line-height: 1; font-family: inherit;
}
.subnav-arrow:hover { background: var(--surface-hover); color: var(--text); }