/* ── Segmented control — ONE definition, three consumers ─────────────────────
   ⚠️ NOT THE SOURCE OF TRUTH. See the header of src/components/segmented.js.
   Source: propflowai/src/components/ui/TabSwitcher.tsx

   Consumers: the docs index (via style.css), ADR/slide pages (same), and
   artifacts (which do NOT go through page(), so they get this file directly).
   That third consumer is why the block moved out of style.css: it used to live
   there alone, artifacts could not reach it, and every artifact that wanted
   tabs hand-rolled its own .pod-tabs — which is the duplication this removes.

   TWO TOKEN VOCABULARIES. The site chrome speaks --color-*; artifacts speak
   the short palette (--panel --text --muted --border --accent). Every colour
   below is a fallback chain so the same file is correct in both, and neither
   consumer has to know the other exists.

   The shadow recipe and the cubic-bezier(.32,.72,0,1) glide are copied
   verbatim from the app — they are what make the thumb read as a card lifting
   off the track rather than a colour change. */

.segmented {
  position: relative; display: inline-flex; align-items: center; width: fit-content;
  gap: 3px; padding: 3px; max-width: 100%;
  background: var(--color-bg-muted, rgba(127, 133, 153, .14));
  border-radius: var(--radius-pill, 999px);
  overflow-x: auto; scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }

.segmented__thumb {
  position: absolute; border-radius: var(--radius-pill, 999px);
  background: var(--color-bg-card, var(--panel));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--color-border, var(--border)) 70%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.05);
  transition: left 300ms var(--motion-ease-glide, cubic-bezier(.32, .72, 0, 1)),
              top 300ms var(--motion-ease-glide, cubic-bezier(.32, .72, 0, 1)),
              width 300ms var(--motion-ease-glide, cubic-bezier(.32, .72, 0, 1)),
              height 300ms var(--motion-ease-glide, cubic-bezier(.32, .72, 0, 1));
  pointer-events: none;
}

.segmented button {
  position: relative; z-index: 1; border: none; background: transparent; cursor: pointer;
  border-radius: var(--radius-pill, 999px);
  padding: 6px 14px;
  /* Constant weight on purpose: an active-state weight flip changes the label
     width and shifts every sibling while the thumb is mid-slide. */
  font: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  color: var(--color-text-mid, var(--muted)); white-space: nowrap;
  transition: color 150ms ease, background 150ms ease;
}
.segmented button[aria-selected="true"] { color: var(--color-text, var(--text)); }
.segmented button:not([aria-selected="true"]):hover {
  background: color-mix(in srgb, var(--color-text, var(--text)) 6%, transparent);
  color: var(--color-text, var(--text));
}
.segmented button:focus { outline: none; }
.segmented button:focus-visible {
  outline: 2px solid var(--color-primary, var(--accent)); outline-offset: 1px;
}

/* The stand-in surface the active button wears until the thumb is measured.
   Identical pixels to .segmented__thumb, so dropping it is invisible. In the
   app this covers the gap before hydration; here it covers the gap before the
   script runs, which is the same bug wearing a different hat. */
.segmented button.segmented--preseat {
  background: var(--color-bg-card, var(--panel));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--color-border, var(--border)) 70%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.05);
}

.seg-count { color: var(--color-text-mid, var(--muted)); font-variant-numeric: tabular-nums; }

/* ── underline variant — mirrors NoiTabsUnderline.tsx ─────────────────────── */
.segmented[data-underline] {
  gap: 0; padding: 0; border-radius: 0; background: transparent;
  border-bottom: 1px solid var(--color-border, var(--border));
}
.segmented[data-underline] button {
  border-radius: 0; padding: 10px 15px;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.segmented[data-underline] button:not([aria-selected="true"]):hover { background: transparent; }
.segmented[data-underline] button[aria-selected="true"] {
  border-bottom-color: var(--color-text, var(--text));
}

@media (prefers-reduced-motion: reduce) { .segmented__thumb { transition: none; } }
@media (max-width: 560px) { .segmented button { font-size: 13px; padding: 6px 11px; } }