/* ============================================================================
   LIST TOOLBAR — single source of truth (ROADMAP #12 promotion, Jul 2026).
   Canonical CSS for the results/library toolbar COMPOUND: the framed
   `.tbar-wrap` container-query host (named "tbar") + the slot-based `.toolbar`
   row and its demotion ladder. Extracted from ui_kits/cos-library/ui-kit.css +
   comp-list-toolbar.html (which used to carry diverging mirrors — see the
   pitfalls "mirror drift" note; this file replaces both).

   SLOT MODEL — the toolbar itself renders nothing; consumers compose slots:
     .toolbar__left    count (.toolbar__count: .count-wide ⇄ .count-pill)
                       + optional search (.toolbar__q — the _field.css
                         .search--auto responsive compound)
     .toolbar__right   sort (.toolbar__sort: .toolbar__sort-label +
                         the _select.css .combo-wrap--inline combobox)
                       + .toolbar__sep + view switch (_segmented.css .seg)
                       + any consumer extras (e.g. the ≤880 filter-sheet
                         trigger — consumer-owned, see ui-kit.css)
   Behaviour is delegated: _select.js (sort), _segmented.js (view switch),
   _search.js (search collapse), _num.js (animated count). No _list-toolbar.js.

   DEMOTION LADDER (container "tbar" — tracks the results column, not the
   viewport; single row throughout, nothing stacks):
     ≤ 760 — "Seřadit:" → bi-sort-down icon; seg labels (.seg__lbl) → icon-
             only; separator dropped
     ≤ 560 — count drops the "Nalezeno" prefix (.count-prefix)
     ≤ 430 — count → pill ([bi-files] N); sort label hidden; tighter gaps
   (The search collapses to its mini icon ~540 via _search.js data-mini-below.)
   Consumers with EXTRA controls retune the ladder by re-declaring steps in
   their own scope — the cos-library catalogue fires every step sooner while
   its ≤880 filter-sheet trigger is visible (ui-kit.css @media block).

   DENSE VARIANT (.tbar-wrap--dense) — the My Library arrangement: the search
   LEADS the left cluster as the responsive .search--auto compound and the
   right cluster stacks several control groups (sort · a label⇄icon .seg--swap
   segmented · .toolbar__chips chip-toggles · view seg). Its earlier-firing
   ladder + the two-row floor live at the END of this file.

   Import AFTER colors_and_type.css + _select.css + _segmented.css +
   _field.css. Dark re-values live in _dark.css (.tbar-wrap surface).
   ============================================================================ */

/* ── framed container-query host ─────────────────────────────────────── */
.tbar-wrap {
  background: var(--color-bg-surface, white);
  border: var(--bw-panel, 1px) solid var(--color-border-default);
  border-radius: var(--radius-panel, var(--radius-md));
  padding: 0 16px;
  container-type: inline-size;
  container-name: tbar;
}

/* ── toolbar row + left/right slot clusters ──────────────────────────── */
.toolbar {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 16px;
  padding: 12px 0;
  margin: 0;
  min-width: 0;
}
.toolbar__left  { display: flex; align-items: center; min-width: 0; flex: 1 1 auto; white-space: nowrap; }
.toolbar__right { display: flex; flex-wrap: nowrap; gap: 8px 12px; align-items: center; font-size: 13px; min-width: 0; flex: 0 1 auto; }

/* ── count slot — wide form (default) + pill form (≤ 430) ────────────── */
.toolbar__count { font-size: 14px; color: var(--color-fg-secondary); white-space: nowrap; display: inline-flex; align-items: center; }
.toolbar__count strong { color: var(--color-fg-default); font-weight: 600; font-variant-numeric: tabular-nums; }
.count-wide { display: inline; }
.count-pill {
  display: none;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 11px 0 10px;
  border-radius: 999px;
  background: var(--gov-color-neutral-100);
  color: var(--color-fg-default);
  font-size: 13px;
  line-height: 1;
}
.count-pill i      { font-size: 14px; line-height: 1; display: inline-block; color: var(--color-fg-secondary); }
.count-pill strong { font-size: 13px; line-height: 1; display: inline-block; color: var(--color-fg-default); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── search slot — the _field.css .search--auto responsive compound ──── */
.toolbar__q { margin-left: 14px; align-self: center; }
.toolbar__q:not(.search--mini) { width: auto; flex: 1 1 150px; min-width: 110px; max-width: 320px; }
.toolbar__q:not(.search--mini) .field { flex: 1; min-width: 0; }
.toolbar__q.search--mini { flex: none; }
/* When the search LEADS the left cluster (no count before it — the dense /
   library arrangement) it must not carry the count-offset margin. */
.toolbar__left .toolbar__q:first-child { margin-left: 0; }

/* ── sort slot — label + inline combobox (_select.css) ───────────────── */
.toolbar__sort { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.toolbar__sort-label {
  font-size: 13px;
  color: var(--color-fg-secondary);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.toolbar__sort-label .sort-text { display: inline; }
.toolbar__sort-label .sort-icon { display: none; font-size: 15px; line-height: 1; }
/* Let a long selected sort value TRUNCATE rather than push the right cluster
   over the toolbar search (toolbar__right shrinks instead of overflowing). */
.toolbar__sort .combo-wrap--inline { min-width: 0; }
.toolbar__sort .tb-select { min-width: 0; }
.toolbar__sort .tb-select .value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Overlap guard: when the row is squeezed past every demotion the combo is
   the shrinking item — clip its own overflow (value already ellipsizes) so a
   stray chevron can never paint under the seg. Box-shadow focus ring is NOT
   clipped by an element's own overflow (see pitfalls). */
.toolbar__sort .tb-select { overflow: hidden; }
/* Toolbar dropdown is wider than its trigger and right-anchored, so a long
   option list never slides under the view switch. */
.toolbar .combo-wrap--inline > .combo-list:not([data-static]) { min-width: 200px; left: auto; right: 0; }

/* ── separator — sibling, not a border on the view-switch (a border would
   inset the seg's first button) ──────────────────────────────────────── */
.toolbar__sep {
  display: inline-block;
  width: 1px; height: 22px;
  background: var(--color-border-default);
  align-self: center;
  margin: 0 2px;
  flex: none;
}

/* ── chip-toggle slot — a group of chip filters as press-toggles ────────
   Promoted from the My Library prototype (was .lib-types/.lib-tf). A flex
   row of reset buttons, each wrapping a shared .dc-chip (_chips.css — bring
   that partial). Resting state is dimmed; aria-pressed shows the chip at
   full strength. Structure only — toggling aria-pressed is the consumer's,
   like every other slot. */
.toolbar__chips { display: flex; gap: 6px; align-items: center; flex: none; }
.chip-toggle {
  appearance: none; -webkit-appearance: none;
  border: 0; padding: 2px; margin: 0; background: transparent;
  border-radius: 6px; cursor: pointer; display: inline-flex;
  user-select: none; -webkit-user-select: none;
  opacity: 0.45;
  transition: opacity 160ms ease, box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.chip-toggle:hover { opacity: 0.8; }
.chip-toggle[aria-pressed="true"] { opacity: 1; }
.chip-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ── demotion-icon affordances — optional spans a slot ships so the ladder
   can swap text → icon:
     .seg--swap — a LABEL-FIRST segmented control (text only while roomy);
       each button carries an <i class="… seg__ico"> shown only once the
       ladder hides .seg__lbl (the view switch is the opposite: icon+label,
       its icon always visible — no .seg__ico there).
     .tb-select__icon — an <i> inside the sort trigger, shown when the
       tightest dense step hides the selected .value (icon-only sort). */
.toolbar .seg .seg__ico { display: none; }
.toolbar__sort .tb-select .tb-select__icon { display: none; font-size: 14px; line-height: 1; color: var(--color-fg-secondary); }

/* ── vertical rhythm deltas for embedded shared controls ─────────────────
   The shared .seg pins align-self:flex-start for column contexts — re-center
   it in the row toolbar (it sat 2.5px high). And equalize control heights:
   the combo trigger + seg buttons get taller padding so they match the 31px
   search field / .btn--sm neighbours instead of floating at 25px. */
.toolbar .seg { align-self: center; flex: none; }
.toolbar .seg button { padding-block: 8.5px; }
.toolbar .tb-select { padding-block: 7px; }

/* ── demotion ladder (see header) ────────────────────────────────────── */
@container tbar (max-width: 760px) {
  .toolbar__sort-label .sort-text { display: none; }
  .toolbar__sort-label .sort-icon { display: inline-block; }
  .toolbar .seg button .seg__lbl { display: none; }
  .toolbar .seg button { padding-inline: 9px; }
  .toolbar .seg .seg__ico { display: inline; }
  .toolbar__sep { display: none; }
}
@container tbar (max-width: 560px) {
  .count-wide .count-prefix { display: none; }
}
@container tbar (max-width: 430px) {
  .count-wide { display: none; }
  .count-pill { display: inline-flex; }
  .toolbar__sort-label { display: none; }
  .toolbar__right { gap: 8px; }
}

/* ════════════════════════════════════════════════════════════════════
   DENSE VARIANT — .tbar-wrap--dense (the My Library arrangement)
   For toolbars whose right cluster stacks SEVERAL control groups (sort +
   availability .seg--swap + .toolbar__chips + view seg) while a growing
   search leads the left. One row is kept alive by firing every demotion
   EARLIER plus dense-only steps; below the two-row step the toolbar stacks
   deliberately (the search takes a full row) instead of wrapping ad hoc.

   LADDER (container tbar — the base ≤760/≤560/≤430 steps still apply;
   demotions fire EARLY — Jul 2026: EN labels ("Controlled distribution")
   made the old 980/760/560 steps overlap the min-width search first):
     ≤ 1020 — ALL segs (incl. .seg--swap) → icon-only; „Seřadit:“ → icon;
              separators dropped
     ≤ 780 — .toolbar__chips chips → short form (.dc-chip__short); sort
             trigger → icon-only (.value + label hidden, .tb-select__icon
             shown; the dropdown still names the selection and anchors to
             the trigger's LEFT side)
     ~ 660 — search → mini icon (JS: data-mini-below="660" on the host)
     ≤ 560 — tighter gaps
     ≤ 490 — TWO-ROW floor: the search un-minis onto a full-width row of
             its own (JS: data-mini-floor="490" — keep EQUAL to this step);
             the control groups flow below and may wrap once more on the
             smallest phones.
   ══════════════════════════════════════════════════════════════════ */
/* The search YIELDS to the right cluster: nearly all flex squeeze lands on
   the left (shrink 5 vs 0.05), so the sort value only ellipsizes as the
   true last-resort valve — not on every few-px squeeze between steps. */
.tbar-wrap--dense .toolbar__left { flex-shrink: 5; }
.tbar-wrap--dense .toolbar__right { flex-shrink: 0.05; }
@container tbar (max-width: 1020px) {
  .tbar-wrap--dense .toolbar__sort-label .sort-text { display: none; }
  .tbar-wrap--dense .toolbar__sort-label .sort-icon { display: inline-block; }
  .tbar-wrap--dense .toolbar .seg button .seg__lbl { display: none; }
  .tbar-wrap--dense .toolbar .seg button { padding-inline: 9px; }
  .tbar-wrap--dense .toolbar .seg .seg__ico { display: inline; }
  .tbar-wrap--dense .toolbar__sep { display: none; }
}
@container tbar (max-width: 780px) {
  .tbar-wrap--dense .toolbar__chips .dc-chip__full { display: none; }
  .tbar-wrap--dense .toolbar__chips .dc-chip__short { display: inline; }
  /* Icon-only sort. The dropdown flips to the trigger's LEFT side here —
     right-anchored (the toolbar default) a 200px list hangs past the narrow
     icon trigger toward / off the container's left edge. Specificity note:
     (0,5,0) — must beat the (0,4,0) right-anchor rule above. _select.js's
     viewport flip still rescues either edge as the safety net. */
  .tbar-wrap--dense .toolbar__sort-label { display: none; }
  .tbar-wrap--dense .toolbar__sort .tb-select .value { display: none; }
  .tbar-wrap--dense .toolbar__sort .tb-select .tb-select__icon { display: inline-block; }
  .tbar-wrap--dense .toolbar__sort .combo-wrap--inline > .combo-list:not([data-static]) { left: 0; right: auto; }
}
@container tbar (max-width: 560px) {
  .tbar-wrap--dense .toolbar__right { gap: 8px; }
  .tbar-wrap--dense .toolbar__chips { gap: 4px; }
}
@container tbar (max-width: 490px) {
  .tbar-wrap--dense .toolbar { flex-wrap: wrap; }
  .tbar-wrap--dense .toolbar__left { flex: 1 1 100%; }
  .tbar-wrap--dense .toolbar__left .toolbar__q:not(.search--mini) { flex: 1 1 auto; max-width: none; }
  .tbar-wrap--dense .toolbar__right { flex: 1 1 100%; flex-wrap: wrap; row-gap: 10px; column-gap: 6px; justify-content: flex-start; }
}