/* Segmented tabs, X style: an accent underline under the active label, whose icon
   slides in only while selected. Any [aria-pressed] button group becomes one
   through js/segmented.js, shared by the console and the public forms. */

.cf-seg {
  position: relative; display: flex; align-items: stretch; gap: 0; width: 100%; min-width: 0;
  margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent; box-shadow: none;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
}
.cf-seg::-webkit-scrollbar { display: none; }
.cf-seg > button {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0;
  min-height: 46px; padding: 0 18px; margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--text-dim); font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background .2s, color .2s;
}
.cf-seg > button:hover { color: var(--text); background: var(--hover, rgb(255 255 255 / 4%)); }
.cf-seg > button[aria-pressed=true] { color: var(--text); font-weight: 700; background: transparent; box-shadow: none; }
.cf-seg > button[aria-pressed=true]:hover { background: var(--hover, rgb(255 255 255 / 4%)); }
.cf-seg > button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 8px; }
.cf-seg--fill > button { flex: 1 1 0; }
.cf-seg--sm > button { min-height: 40px; padding: 0 14px; font-size: 13px; }
.cf-seg__icon {
  display: inline-flex; align-items: center; justify-content: flex-start; width: 0; height: 18px; margin-right: 0;
  overflow: hidden; opacity: 0; transform: scale(.5);
  transition: width .3s cubic-bezier(.22, 1, .36, 1), margin .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, transform .4s cubic-bezier(.34, 1.36, .64, 1);
}
svg.cf-seg__icon { display: block; flex: none; }
.cf-seg__icon svg, .cf-seg__icon .material-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.cf-seg > button[aria-pressed=true] .cf-seg__icon { width: 18px; margin-right: 8px; opacity: 1; transform: none; color: var(--accent); }
.cf-seg__bar {
  position: absolute; left: 0; bottom: 0; z-index: 1; height: 3px; width: 0; border-radius: 3px;
  background: var(--accent); box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 22%, transparent); pointer-events: none;
  transition: transform .36s cubic-bezier(.22, 1, .36, 1), width .36s cubic-bezier(.22, 1, .36, 1), opacity .2s;
}
.cf-seg--sm .cf-seg__bar { height: 2px; }
.cf-seg__bar.is-instant { transition: none; }
.cf-seg > button :is(b, small, .count, [data-count]) { margin-left: 6px; color: var(--text-dim); font-weight: 500; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .cf-seg *, .cf-seg__bar { transition-duration: .01ms !important; } }