/* ============================================================================
   SEGMENTED CONTROL / VIEW SWITCH — single source of truth.
   Canonical CSS for the segmented control (.seg, view-switch / tabs) and the
   pill variant (.seg-pill). Shared by comp-segmented.html, the list-toolbar
   view-switch, and any future consumer. Pair with _segmented.js for the sliding
   thumb + keyboard controller. Import AFTER colors_and_type.css.

   Markup contracts (wired by _segmented.js):
     <div class="seg" data-seg> <button>…</button>… </div>          solid-fill tabs
     <div class="seg-pill" data-seg-pill> <span class="seg-pill__thumb"></span>
          <button>…</button>… </div>                                 sliding pill
   Sizes: .seg--sm / .seg--lg / .seg--icon. Active segment carries `.is-active`.
   ============================================================================ */

/* ── segmented control (view switch) ─────────────────────────────────── */
.seg {
  position: relative;           /* anchor for the sliding thumb */
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  background: var(--gov-color-neutral-0);
  align-self: flex-start;       /* don't stretch to column width */
}
.seg button {
  all: unset; cursor: pointer;
  user-select: none; -webkit-user-select: none;   /* controls never text-select */
  padding: 6px 12px;
  font: 500 13px/1 var(--font-sans);  /* line-height:1 — the `font`
     shorthand otherwise resets to `normal` (~1.5), and Bootstrap Icon
     glyphs aren't centered in their em-box; in a tall line-box the
     icon visibly drifts toward the top. */
  color: var(--color-fg-secondary);
  display: inline-flex; align-items: center; gap: 6px;
  border-right: 1px solid var(--color-border-default);
  position: relative;           /* so focus ring layers above siblings */
  /* Base transition for hover/press snap + the focus-ring exit. The
     focus selector below overrides box-shadow to the 220ms bloom for the
     rest→focus entry; this 140ms covers focus→rest. System recipe — see
     notes/decisions.md "Focus-ring bloom pattern is system-wide." */
  transition: background-color 100ms ease-out, color 100ms ease-out, box-shadow 140ms ease-out;
}
/* `:first/last-of-type` (NOT :first-child) — a `.seg__thumb` span is
   injected as the container's first child on interactive switches, which
   would make `:first-child` match no button and drop the left radius +
   its focus ring. of-type counts only the buttons, so it's correct for
   both the interactive switches and the static (thumb-less) demo rows. */
.seg button:first-of-type { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.seg button:last-of-type  { border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-right: 0; }

/* Optional count badge inside a segment ("Vše 6 · V řízení 2 …") — quiet
   tabular numeral; inherits the active ink at reduced emphasis. */
.seg .seg__ct {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px; font-weight: 500;
  opacity: 0.62;
}

/* Clear the 1px dividers flanking the FOCUSED segment only, so the focus
   ring reads as one clean shape instead of being crossed by a leftover
   gray line. Active segments KEEP their dividers — the solid fill sits
   between them exactly like the original design. `transparent` keeps the
   1px box intact (layout unchanged); `:has(+ …)` targets the focused
   segment's LEFT neighbour. */
.seg button:focus-visible,
.seg button.is-focus,
.seg button:has(+ button:focus-visible),
.seg button:has(+ button.is-focus) { border-right-color: transparent; }

/* Every interactive rule is scoped :not(:disabled) so the disabled state
   wins cleanly — no hover tint or press well on a disabled segment. */
.seg button:not(:disabled):hover,
.seg button[data-state="hover"] { background: var(--gov-color-neutral-50); color: var(--color-fg-default); }
/* Solid active fill — the rest state for EVERY segment (interactive and the
   static demo rows alike). Robust + perfectly aligned + dividers intact, and
   `:hover` still tints it (the hover rule above out-specifies this). The
   sliding thumb is only a transient animation layer; while a slide is in
   flight the destination's solid fill is suppressed so the moving thumb
   paints the tint, then they swap back when it lands. */
.seg button.is-active { background: var(--gov-color-primary-50); color: var(--gov-color-primary-700); }
.seg.is-sliding button.is-active { background: transparent; }
/* Hand-off snap: when the glide ends the thumb is hidden instantly, so the
   destination's solid fill must appear instantly too — its normal 100ms
   background transition (and the more-specific focus-rule one) would leave a
   visible gap after the thumb has gone, glaring when animations are
   throttled. `!important` beats the focus transition for the single swap
   frame; the class is then removed and transitions return for hover. */
.seg--snap button { transition: none !important; }

/* Sliding active thumb — a TRANSIENT animation layer, hidden at rest. The
   active segment carries its own solid fill (above); the thumb is revealed
   (`.is-sliding`) only for the 220ms glide between segments, then hidden
   again as the destination's solid fill takes over — same colour + rect, so
   the hand-off is seamless. Same --x/--w mechanism as the pill; `clientLeft`
   is subtracted in JS so --x is measured from the padding box. */
.seg__thumb {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: var(--w, 0);
  transform: translateX(var(--x, 0));
  background: var(--gov-color-primary-50);
  border-radius: 3px;
  opacity: 0;                   /* invisible until a slide is in flight */
  pointer-events: none;
  z-index: 0;
  /* Motion (transform + width) is driven by the Web Animations API in JS,
     not a CSS transition — so the hand-off to the solid fill can key off
     `anim.finished` and stay correct under DevTools animation throttling. */
}
.seg.is-sliding .seg__thumb { opacity: 1; }

/* Pressed — primary-100 well + inset press shadow. Mirrors the forced
   "pressed" rule in the focus playground (.seg button → primary-100/700)
   so real :active and the playground demo read identically. */
.seg button:not(:disabled):active,
.seg button[data-state="pressed"] {
  background: var(--gov-color-primary-100);
  color: var(--gov-color-primary-700);
  box-shadow: inset 0 1px 2px rgba(12,24,56,0.12);
}

/* Focus — system spacer-ring (--shadow-focus) with the two-tier bloom:
   220ms expo-out on entry (declared here), 140ms exit (base transition).
   `.is-focus` is the class the focus playground toggles to force the
   state; keep it in lock-step with :focus-visible. */
.seg button:focus-visible,
.seg button.is-focus {
  outline: 0;
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(35,98,162,0.35));
  z-index: 1;
  transition: box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 100ms ease-out, color 100ms ease-out;
}
/* The truly-focused segment lifts above forced-focus siblings (playground
   forces .is-focus on every button), so its real ring paints on top. */
.seg button:focus-visible { z-index: 2; }

/* Disabled — muted + not-allowed, no state feedback. Uses the muted-neutral
   disabled language shared across the button family (comp-buttons), not a
   flat opacity wash. Forced in the playground via the native disabled attr. */
.seg button:disabled { color: var(--color-fg-tertiary); cursor: not-allowed; }
.seg button:disabled.is-active { background: var(--gov-color-neutral-100); color: var(--color-fg-tertiary); }
.seg--disabled { background: var(--gov-color-neutral-50); }
.seg--disabled button.is-active { background: var(--gov-color-neutral-100); color: var(--color-fg-tertiary); }

.seg--lg button { padding: 9px 16px; font-size: 14px; }
.seg--sm button { padding: 4px 9px; font-size: 12px; }
.seg--icon button { padding: 6px 10px; }

/* Pill style — alternative for filter chips */
.seg-pill {
  position: relative;
  display: inline-flex; gap: 4px;
  padding: 3px; background: var(--gov-color-neutral-100);
  border-radius: 999px;
  align-self: flex-start;
}
.seg-pill button {
  all: unset; cursor: pointer;
  user-select: none; -webkit-user-select: none;   /* controls never text-select */
  padding: 5px 14px;
  font: 500 12.5px/1 var(--font-sans);  /* see .seg button — same reason */
  color: var(--color-fg-secondary);
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  position: relative; z-index: 1;
  transition: color 100ms ease-out, box-shadow 140ms ease-out;
}
.seg-pill button:not(:disabled):hover { color: var(--color-fg-default); }
.seg-pill button.is-active { color: var(--color-fg-default); }
.seg-pill button:not(:disabled):active,
.seg-pill button[data-state="pressed"] { color: var(--color-fg-default); }
.seg-pill button:focus-visible,
.seg-pill button.is-focus {
  outline: 0;
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(35,98,162,0.35));
  transition: box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1), color 100ms ease-out;
}
/* Pills share base z-index:1 (above the thumb); lift the truly-focused one to
   2 so its ring paints over forced-focus neighbours in the playground. */
.seg-pill button:focus-visible { z-index: 2; }
.seg-pill button:disabled { color: var(--color-fg-tertiary); cursor: not-allowed; }
.seg-pill--disabled .seg-pill__thumb { background: var(--gov-color-neutral-0); box-shadow: inset 0 0 0 1px var(--color-border-default); }

/* Sliding pill thumb — positioned by JS via --x / --w. */
.seg-pill__thumb {
  position: absolute;
  top: 3px; bottom: 3px;
  left: 0;
  width: var(--w, 0);
  transform: translateX(var(--x, 0));
  background: var(--gov-color-neutral-0);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(12,24,56,0.10);
  transition: transform 220ms cubic-bezier(.4,.7,.3,1), width 220ms cubic-bezier(.4,.7,.3,1);
  pointer-events: none;
  z-index: 0;
}
.seg-pill--no-anim .seg-pill__thumb { transition: none; }

/* Dark-mode tweaks — active pill needs more contrast. The light-mode
   thumb is a white puck on a near-white track; in dark mode the same
   token-driven thumb lands as #1a2030 on a #2a3142 track (ΔL ≈ 4) and
   disappears. Push the fill DARKER than the track (page bg) and add a
   hairline stroke in the regular border colour — same visual vocab as
   the rest of the dark UI, no fluorescent outline. */
body[data-theme="dark"] .seg-pill__thumb {
  background: var(--color-bg-page);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}
body[data-theme="dark"] .seg-pill button.is-active {
  color: var(--color-fg-default);
}

/* Dark-mode pressed / disabled for the segmented control. primary-100
   inverts to a near-black in dark, which would swallow the pressed text
   — use a translucent white well + inset (same vocab as comp-buttons'
   dark pressed) and let text ride fg-default. */
body[data-theme="dark"] .seg button:not(:disabled):active,
body[data-theme="dark"] .seg button[data-state="pressed"] {
  background: rgba(255,255,255,0.07);
  color: var(--color-fg-default);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.45);
}
body[data-theme="dark"] .seg button:disabled { color: var(--color-fg-tertiary); background: transparent; }
body[data-theme="dark"] .seg button:disabled.is-active { background: rgba(255,255,255,0.05); color: var(--color-fg-tertiary); }
body[data-theme="dark"] .seg--disabled { background: var(--color-bg-page); }
body[data-theme="dark"] .seg--disabled button.is-active { background: rgba(255,255,255,0.05); color: var(--color-fg-tertiary); }
body[data-theme="dark"] .seg-pill--disabled .seg-pill__thumb {
  background: var(--color-bg-page);
  box-shadow: inset 0 0 0 1px var(--color-border-default);
}