/* The Support pages' tabs (templates/drobo/app/support_tabs.html): Help center, Tickets, Contact, sitting on the page
   header's bottom rule. The current tab is underlined; opening another tab slides the underline across (a named View
   Transition, Chrome), other browsers just load the page. Only --ui-* tokens, light and dark. */
.ui-subnav { max-width: 76rem; margin: 0 auto; padding: 0 2rem; box-sizing: border-box; }
.ui-subnav ul { display: flex; gap: .15rem; margin: 0 0 0 -.8rem; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.ui-subnav ul::-webkit-scrollbar { display: none; }
.ui-subnav a {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .5rem; height: var(--ui-h-field); padding: 0 .8rem;
  font-size: .875rem; font-weight: 550; color: var(--ui-muted); text-decoration: none; white-space: nowrap; transition: color .18s;
}
.ui-subnav a::before {   /* a soft wash behind the tab under the pointer */
  content: ""; position: absolute; z-index: -1; inset: .5rem .1rem; border-radius: 8px; background: var(--ui-hover);
  opacity: 0; transform: scale(.94); transition: opacity .2s, transform .25s var(--ui-ease);
}
.ui-subnav a:hover { color: var(--ui-fg); }
.ui-subnav a:hover::before { opacity: 1; transform: none; }
.ui-subnav a .ti { font-size: 1.05rem; transition: color .18s, transform .25s var(--ui-ease); }
.ui-subnav a:hover .ti { transform: translateY(-1px); }
.ui-subnav a[aria-current] { color: var(--ui-fg); font-weight: 600; }
.ui-subnav a[aria-current] .ti { color: var(--ui-primary); }
.ui-subnav__bar {
  position: absolute; right: .8rem; bottom: -1px; left: .8rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--ui-primary), var(--ui-violet)); box-shadow: 0 0 12px color-mix(in srgb, var(--ui-primary) 55%, transparent);
  view-transition-name: ui-support-tab;
}
.ui-subnav__count {
  display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; box-sizing: border-box;
  font-size: .6875rem; font-weight: 700; line-height: 1; color: #fff; background: var(--ui-primary); border-radius: 999px; font-variant-numeric: tabular-nums;
}
/* The underline's slide between pages (the rest of the page crossfades quickly, css/drobo-ui.css). */
::view-transition-group(ui-support-tab) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
@media (max-width: 640px) {
  .ui-subnav { padding: 0 1rem; }
  .ui-subnav ul { margin-left: -.6rem; }
  .ui-subnav a { padding: 0 .6rem; }
  .ui-subnav__bar { right: .6rem; left: .6rem; }
}