/*
 * tabs：構造と動きだけ
 * 受ける変数：--part-tabs-indicator（選ばれたタブの下線）/ --part-fg / --part-muted / --part-line / --part-accent / --part-focus
 */
.part-tabs {
  min-width: 0;
  color: var(--part-fg, #222);
}

.part-tabs__list {
  position: relative;
  display: flex;
  gap: 4px;
  margin: 0 0 18px;
  overflow-x: auto;
  border-bottom: 1px solid var(--part-line, #dcdcdc);
  scrollbar-width: none;
}

.part-tabs__list::-webkit-scrollbar {
  display: none;
}

.part-tabs__tab {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  background: none;
  color: var(--part-muted, #666);
  font: inherit;
  cursor: pointer;
  transition: color 0.2s;
}

.part-tabs__tab::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--part-tabs-indicator, var(--part-accent, #333));
  transform: scaleX(0);
  transition: transform 0.25s;
}

.part-tabs__tab[aria-selected="true"] {
  color: var(--part-fg, #222);
  font-weight: 700;
}

.part-tabs__tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

.part-tabs__tab:hover {
  color: var(--part-fg, #222);
}

.part-tabs__tab:focus-visible {
  outline: 2px solid var(--part-focus, #1a1a1a);
  outline-offset: -4px;
}

.part-tabs__count {
  font-size: 0.8em;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

.part-tabs__panel[hidden] {
  display: none !important;
}

.part-tabs__panel:focus {
  outline: none;
}

.part-tabs__panel:focus-visible {
  outline: 2px solid var(--part-focus, #1a1a1a);
  outline-offset: 4px;
}

.part-tabs[data-part-motion="reduce"],
.part-tabs[data-part-motion="reduce"] *,
.part-tabs[data-part-motion="reduce"] *::before,
.part-tabs[data-part-motion="reduce"] *::after {
  transition: none !important;
  animation: none !important;
}