/* Tabs mapping: default Primary Fill (content), Secondary Fill (surface), Legacy non-fill and overflow move buttons (D-090). Horizontal, text-only, no size/variant.
   States use Radix attributes: [data-state="active"|"inactive"], :hover, :focus-visible. */
:root, [data-hm-theme] {
  /* ui_viz: docs/components/tabs.md §8, §16 — SOURCE_ADOPTED / COMPONENT_SCOPED (owner 2026-09-18). Not aliased to Button or radius/border tokens. */
  --hm-tab-height: 34px;
  --hm-tab-padding-x: 16px;
  --hm-tab-radius-top: 4px;
  --hm-tab-border-width: 1px;

  /* ui_viz: docs/components/tabs.md §9 — Navigation Label 16/24/700, same weight for Selected */
  --hm-tab-font-size: 16px;
  --hm-tab-line-height: 24px;
  --hm-tab-font-weight: 700;

  /* ui_viz: docs/components/tabs.md §10 — SOURCE_ADOPTED. Default face and border are also marked TEMPORARY there (alpha composites of
     Green tint / Green Light 2). Selected border is #DEDBD2 (color.stroke.tab.selected); no Semantic exists in HM, so the Primitive is used here. */
  --hm-tab-background: color-mix(in srgb, var(--hm-sem-palette-green-tint) 45%, transparent);
  --hm-tab-border-color: color-mix(in srgb, var(--hm-sem-palette-green-light-2) 35%, transparent);
  --hm-tab-text: var(--hm-sem-palette-green-light-2);
  --hm-tab-selected-background: var(--hm-sem-bg-surface);
  --hm-tab-selected-border-color: var(--hm-sem-stroke-input-default);
  --hm-tab-selected-text: var(--hm-sem-action-primary);
  /* Hover (inactive only): Black 20% overlay — value Confirmed (tab.md 6, 8); foreground SOURCE_ADOPTED */
  --hm-tab-hover-overlay: color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
  --hm-tab-hover-text: var(--hm-sem-action-primary);
  --hm-tab-transition-duration: 0.15s;
}

/* Frame holds the Bar (and the move buttons when the tabs overflow). The whole Bar overlaps the content boundary by 1px; Selected paints its bottom stroke in the surface color. */
[data-slot="tabs-frame"] {
  display: flex;
  align-items: flex-end;
  width: 100%;
  margin-bottom: -1px;
}
/* Bar: no surface of its own, gap 0, scrolls horizontally with the native scrollbar hidden. */
[data-slot="tabs-list"] {
  display: flex;
  align-items: flex-end;
  flex: 0 1 auto;
  gap: 0;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

[data-slot="tabs-trigger"] {
  box-sizing: border-box;
  height: var(--hm-tab-height);
  min-height: var(--hm-tab-height);
  padding: 0 var(--hm-tab-padding-x);
  border: var(--hm-tab-border-width) solid var(--hm-tab-border-color);
  border-bottom-color: var(--hm-tab-selected-border-color);
  border-radius: var(--hm-tab-radius-top) var(--hm-tab-radius-top) 0 0;
  background-color: var(--hm-tab-background);
  background-image: none;
  color: var(--hm-tab-text);
  font-size: var(--hm-tab-font-size);
  line-height: var(--hm-tab-line-height);
  font-weight: var(--hm-tab-font-weight);
  box-shadow: none;
  transition: color var(--hm-tab-transition-duration) ease, background-color var(--hm-tab-transition-duration) ease;
}
/* One shared border between neighbours. Must come before the Selected rule. */
[data-slot="tabs-trigger"] + [data-slot="tabs-trigger"] {
  border-left-width: 0;
}
[data-slot="tabs-trigger"][data-state="active"] {
  z-index: 2;
  border-color: var(--hm-tab-selected-border-color);
  border-bottom-color: var(--hm-tab-selected-background);
  background-color: var(--hm-tab-selected-background);
  color: var(--hm-tab-selected-text);
}
[data-slot="tabs-trigger"][data-state="inactive"]:hover:not(:disabled) {
  background-image: linear-gradient(var(--hm-tab-hover-overlay), var(--hm-tab-hover-overlay));
  color: var(--hm-tab-hover-text);
}
/* Focus is a global TBD in ui_viz: the shadcn focus ring from ui/tabs.tsx stays. The theme box-shadow is none, so keep the ring variables. */
[data-slot="tabs-trigger"]:focus-visible {
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000);
}

/* ---- Overflow move buttons (ui_viz tabs.md §24 D-090, CURRENT 2026-10-01). Outside the tablist, shown only when the tabs overflow. ---- */
:root, [data-hm-theme] {
  --hm-tab-arrow-size: 34px;
  --hm-tab-arrow-icon-size: 18px;
  --hm-tab-arrow-background: var(--hm-sem-palette-green-light-1);
  --hm-tab-arrow-border-color: var(--hm-sem-palette-green-dark-1);
  --hm-tab-arrow-icon-color: var(--hm-sem-on-action-primary);
  --hm-tab-arrow-disabled-opacity: 0.6;
}
[data-slot="tabs-frame"][data-overflow="true"] > [data-slot="tabs-list"] {
  flex: 1 1 0;
}
[data-slot="tabs-arrow"] {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: var(--hm-tab-arrow-size);
  height: var(--hm-tab-arrow-size);
  padding: 0;
  border: var(--hm-tab-border-width) solid var(--hm-tab-arrow-border-color);
  background-color: var(--hm-tab-arrow-background);
  background-image: none;
  color: var(--hm-tab-arrow-icon-color);
  cursor: pointer;
  outline: none;
}
[data-slot="tabs-arrow"][data-direction="previous"] { border-radius: var(--hm-tab-radius-top) 0 0 0; }
[data-slot="tabs-arrow"][data-direction="next"] { border-radius: 0 var(--hm-tab-radius-top) 0 0; }
[data-slot="tabs-arrow"] svg { width: var(--hm-tab-arrow-icon-size); height: var(--hm-tab-arrow-icon-size); }
[data-slot="tabs-arrow"]:hover:not(:disabled) {
  background-image: linear-gradient(var(--hm-tab-hover-overlay), var(--hm-tab-hover-overlay));
}
[data-slot="tabs-arrow"]:disabled {
  opacity: var(--hm-tab-arrow-disabled-opacity);
  cursor: default;
  pointer-events: none;
}
/* Focus value is global TBD: shadcn ring level kept (ring variables come from the tailwind focus-visible utilities). */
[data-slot="tabs-arrow"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}
/* In the overflow state every item keeps its own label width (no equal split). */
[data-slot="tabs-frame"][data-overflow="true"] [data-slot="tabs-trigger"] {
  flex: 0 0 auto;
}

/* ---- Fill profile (ui_viz tabs.md §24 D-071~075): default Primary content; explicit surface is Secondary. ---- */
:root, [data-hm-theme] {
  --hm-tab-fill-line-color: var(--hm-sem-palette-green-light-3);
  /* REVIEW VALUE (ui_viz tabs.md §24: curve radius 8px, BORDER FOLLOW-UP). The curve itself is Confirmed, the radius is not. */
  --hm-tab-fill-curve-radius: 8px;
}
[data-slot="tabs-frame"][data-fill="true"] {
  --hm-tab-fill-panel: var(--hm-sem-bg-surface);
  --hm-tab-fill-face: linear-gradient(var(--hm-sem-bg-surface), var(--hm-sem-bg-surface));
}
[data-slot="tabs-frame"][data-fill="true"][data-panel-surface="content"] {
  --hm-tab-fill-panel: var(--hm-sem-bg-content);
  /* D-02 (2026-10-09): only Primary's selected face starts at White alpha .8; the content stop, direction and geometry stay unchanged. */
  --hm-tab-fill-face: linear-gradient(to bottom, color-mix(in srgb, var(--hm-sem-palette-white) 80%, transparent) 0%, var(--hm-sem-bg-content) 100%);
}
[data-slot="tabs-frame"][data-fill="true"] > [data-slot="tabs-list"] {
  flex: 1 1 auto;
  width: 100%;
}
[data-slot="tabs-frame"][data-fill="true"][data-overflow="false"] [data-slot="tabs-trigger"] {
  flex: 1 1 0;
  min-width: auto;
}
/* Inactive: only the bottom line is Green Light 3; face and top / vertical borders keep the basic profile values. */
[data-slot="tabs-frame"][data-fill="true"] [data-slot="tabs-trigger"] {
  border-bottom-color: var(--hm-tab-fill-line-color);
}
/* Every fill neighbour restores its left border and overlaps it by 1px, matching the tested ui-viz geometry.
   The active tab's z-index keeps its Green edge above the inactive border without producing a double-width line. */
[data-slot="tabs-frame"][data-fill="true"] [data-slot="tabs-trigger"] + [data-slot="tabs-trigger"] {
  margin-left: calc(-1 * var(--hm-tab-border-width));
  border-left-width: var(--hm-tab-border-width);
}
/* Selected: Green Light 3 top / left / right, bottom open in the panel color. */
[data-slot="tabs-frame"][data-fill="true"] [data-slot="tabs-trigger"][data-state="active"] {
  border-color: var(--hm-tab-fill-line-color);
  border-bottom-color: var(--hm-tab-fill-panel);
  background-color: transparent;
  background-image: var(--hm-tab-fill-face);
}
/* Curves: a quarter arc of the vertical Green line toward each neighbour, 1px Green. Inside the arc is transparent (the neighbour shows),
   outside is the panel color. Decoration only: no pointer input. */
[data-slot="tabs-frame"][data-fill="true"] [data-slot="tabs-trigger"][data-state="active"]:not(:last-child)::after,
[data-slot="tabs-frame"][data-fill="true"] [data-slot="tabs-trigger"][data-state="active"]:not(:first-child)::before {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--hm-tab-border-width));
  width: var(--hm-tab-fill-curve-radius);
  height: var(--hm-tab-fill-curve-radius);
  pointer-events: none;
}
[data-slot="tabs-frame"][data-fill="true"] [data-slot="tabs-trigger"][data-state="active"]:not(:last-child)::after {
  right: calc(-1 * var(--hm-tab-fill-curve-radius));
  background: radial-gradient(circle at 100% 0, transparent calc(var(--hm-tab-fill-curve-radius) - var(--hm-tab-border-width)),
    var(--hm-tab-fill-line-color) calc(var(--hm-tab-fill-curve-radius) - var(--hm-tab-border-width)),
    var(--hm-tab-fill-line-color) var(--hm-tab-fill-curve-radius), var(--hm-tab-fill-panel) var(--hm-tab-fill-curve-radius));
}
[data-slot="tabs-frame"][data-fill="true"] [data-slot="tabs-trigger"][data-state="active"]:not(:first-child)::before {
  left: calc(-1 * var(--hm-tab-fill-curve-radius));
  background: radial-gradient(circle at 0 0, transparent calc(var(--hm-tab-fill-curve-radius) - var(--hm-tab-border-width)),
    var(--hm-tab-fill-line-color) calc(var(--hm-tab-fill-curve-radius) - var(--hm-tab-border-width)),
    var(--hm-tab-fill-line-color) var(--hm-tab-fill-curve-radius), var(--hm-tab-fill-panel) var(--hm-tab-fill-curve-radius));
}