/* Tabs and segmented controls, Arc-style (piece 6, group b-navigation).
 *
 * arc_tabs.js marks every tab group it enhances with .oc-tabs-arc and one
 * of two looks, and puts one .oc-tabs-glide inside it:
 *
 *   .oc-tabs--pill  tray and segmented groups: a quiet tray, a raised pill
 *                   that glides to the active tab on the morph spring.
 *   .oc-tabs--line  underline groups: a hairline under the row, a 2px ink
 *                   line that glides to the active tab.
 *
 * The tab itself never scales or changes weight; only the indicator travels
 * and the label ink follows it (Arc segmented-control). Active tabs lose the
 * fills and underlines the older layers paint, so there is one indicator.
 * Legacy rules carry !important on these properties; the two-id scope plus
 * !important on the same properties is what outranks them. The classic
 * design is left alone.
 */

/* ---- The group ------------------------------------------------------- */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs-arc {
  isolation: isolate;
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs-arc.oc-tabs--rel { position: relative; }

/* Choice groups take uiarc.dev's button group: one surface on the page,
   a shared border and radius, hairline dividers and no gaps; one soft
   highlight rests on the chosen segment and glides to the one under the
   pointer or keyboard focus, and the dividers beside it step aside. */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--pill {
  --arc-bg-h: var(--arc-control-sm, 28px);
  --arc-bg-inset: 3px;
  /* uiarc.dev's button group is a soft pill: radius half the height (18px at
     36px), the highlight concentric inside it (radius - inset - 1). */
  --arc-bg-radius: calc(var(--arc-bg-h) / 2);
  display: inline-flex;
  align-items: stretch;
  gap: 0 !important;
  padding: 0 !important;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--arc-surface) !important;
  border: 1px solid var(--arc-border) !important;
  border-radius: var(--arc-bg-radius) !important;
  box-shadow: none !important;
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--pill::-webkit-scrollbar { display: none; }
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--line {
  border-bottom: 1px solid var(--arc-border) !important;
  box-shadow: none !important;
}

/* ---- The tabs -------------------------------------------------------- */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs-arc > :is(button, a, [role="tab"]) {
  position: relative;
  z-index: 1;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--arc-text-secondary) !important;
  font-weight: var(--arc-weight-strong) !important;
  letter-spacing: var(--arc-tracking);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--arc-dur-fast) var(--arc-ease) !important;
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--pill > :is(button, a, [role="tab"]) {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: calc(var(--arc-bg-h) - 2px);
  min-height: 0 !important;
  height: calc(var(--arc-bg-h) - 2px) !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-size: var(--arc-text-sm, 13px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  line-height: 1 !important;
  white-space: nowrap;
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--pill > [data-arc-icon] {
  width: calc(var(--arc-bg-h) - 2px) !important;
  min-width: 0 !important;
  padding: 0 !important;
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--pill > [data-arc-icon] :is(svg, img, .oc-ico) { width: 16px; height: 16px; }
/* Hairline dividers between segments, quiet beside the highlight. */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--pill > :is(button, a, [role="tab"]) + :is(button, a, [role="tab"])::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: -.5px;
  width: 1px;
  background: var(--arc-border);
  pointer-events: none;
  transition: opacity var(--arc-dur-fast) var(--arc-ease);
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--pill > [data-arc-quiet]::before { opacity: 0; }
/* The press answers inside the segment: the words dip, the group stays still. */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--pill > :is(button, a, [role="tab"]):active:not(:disabled) { transform: none !important; }
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--pill > :is(button, a, [role="tab"]) > * { transition: transform 300ms var(--arc-spring); }
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--pill > :is(button, a, [role="tab"]):active:not(:disabled) > * { transform: scale(.97); transition-duration: 90ms; }
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--line > :is(button, a, [role="tab"]) {
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-radius: var(--arc-radius-control) var(--arc-radius-control) 0 0 !important;
  font-size: var(--arc-text-sm) !important;
}
@media (hover: hover) and (pointer: fine) {
  html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs-arc > :is(button, a, [role="tab"]):hover {
    color: var(--arc-foreground) !important;
    background: transparent !important;
  }
  html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--line > :is(button, a, [role="tab"]):hover {
    background: var(--arc-hover) !important;
  }
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs-arc > :is(button, a, [role="tab"]):is(
  .is-active, .active, .is-on, .is-selected, .selected, .is-current, .current,
  [aria-selected="true"], [aria-pressed="true"], [aria-current="page"]) {
  color: var(--arc-foreground) !important;
  background: transparent !important;
  font-weight: var(--arc-weight-strong) !important;
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs-arc > :is(button, a, [role="tab"]):focus-visible {
  outline: 2px solid var(--arc-focus) !important;
  outline-offset: -2px;
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs-arc > :is(button, a, [role="tab"]):disabled {
  opacity: .5;
  cursor: not-allowed;
}
/* Counts inside a tab follow its ink. */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs-arc > :is(button, a, [role="tab"]) :is([class*="count"], [class*="badge"]) {
  font-variant-numeric: tabular-nums;
}

/* ---- The indicator --------------------------------------------------- */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs-glide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  will-change: transform, width;
  transition:
    transform var(--arc-dur-morph) var(--arc-spring),
    width var(--arc-dur-morph) var(--arc-spring),
    height var(--arc-dur-morph) var(--arc-spring),
    opacity var(--arc-dur-fast) var(--arc-ease);
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs-glide.is-on { opacity: 1; }
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs-glide.is-instant {
  transition: opacity var(--arc-dur-fast) var(--arc-ease);
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--pill > .oc-tabs-glide {
  background: transparent;
  border: 0;
  /* Snappier than the morph spring: the highlight chases the pointer. */
  transition:
    transform var(--arc-dur-morph) var(--arc-spring),
    width var(--arc-dur-morph) var(--arc-spring),
    height var(--arc-dur-morph) var(--arc-spring),
    opacity var(--arc-dur-fast) var(--arc-ease);
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--pill > .oc-tabs-glide::before {
  content: "";
  position: absolute;
  inset: var(--arc-bg-inset);
  border-radius: calc(var(--arc-bg-radius) - var(--arc-bg-inset) - 1px);
  background: var(--arc-surface-muted);
  transition: background-color var(--arc-dur-fast) var(--arc-ease);
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--pill > .oc-tabs-glide[data-pressed]::before {
  background: color-mix(in srgb, var(--arc-surface-muted), var(--arc-border-strong) 30%);
  transition-duration: var(--arc-dur-instant);
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--line > .oc-tabs-glide {
  height: 2px;
  margin-top: 1px;
  border-radius: 2px;
  background: var(--arc-foreground);
}


/* ---- One indicator per group ------------------------------------------
   Portfolio, Mission Control and Research carried an earlier sliding face
   (slide_tabs.js); the Arc glide replaces it there. */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs-arc > .slide-pill { display: none !important; }

/* ---- Case tab menu ----------------------------------------------------
   The case page keeps its own glide (case_menu.js); it takes the Arc tray,
   pill and spring so every tab group in the portal moves the same way. */
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .cf-app .cf-app__panes {
  background: var(--arc-surface) !important;
  border: 1px solid var(--arc-border) !important;
  border-radius: 999px !important;
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .cf-app .cf-app__panes > :is(.cf-app__pane, .cf-app__more) {
  border-radius: 999px !important;
  color: var(--arc-text-secondary) !important;
  font-weight: var(--arc-weight-strong);
  transition: color var(--arc-dur-fast) var(--arc-ease) !important;
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .cf-app .cf-app__panes > .cf-app__pane[aria-pressed="true"] {
  color: var(--arc-foreground) !important;
  font-weight: var(--arc-weight-strong);
}
html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .cf-app .cf-app__panes > .cf-app__pill {
  background: var(--arc-surface-muted);
  border: 0;
  border-radius: 999px;
  box-sizing: border-box;
  transition:
    transform var(--arc-dur-morph) var(--arc-spring),
    width var(--arc-dur-morph) var(--arc-spring),
    height var(--arc-dur-morph) var(--arc-spring),
    opacity var(--arc-dur-fast) var(--arc-ease);
}

/* Classic design (Settings, ?ui=classic) keeps its own tabs: every rule
   above is scoped to html:not([data-ui="classic"]). */

/* ---- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs-glide,
  html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .cf-app .cf-app__panes > .cf-app__pill,
  html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs-arc > :is(button, a, [role="tab"]),
  html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--pill > :is(button, a, [role="tab"]) > *,
  html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--pill > :is(button, a, [role="tab"])::before,
  html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--pill > .oc-tabs-glide::before {
    transition: none !important;
  }
  html:not([data-ui="classic"]) body:is(body, #oc-arc):is(body, #oc-arc-2) .oc-tabs--pill > :is(button, a, [role="tab"]):active > * { transform: none !important; }
}