/* ============================================================================
   SELECT / COMBO BOX — single source of truth.
   Canonical combobox CSS shared by comp-select.html (the spec/demo card),
   comp-list-toolbar.html, brand-header.html (language switcher), and any future
   consumer. Pair with _select.js for the ARIA 1.2 combobox controller.

   Triggers:
     .field                  form-size trigger (role=combobox tabindex=0)
     .tb-select              compact toolbar-size trigger
     .tb-select--on-dark     compact trigger on a dark surface (gov.cz strip)
   Dropdown:
     .combo-wrap[data-combo]  wrapper the controller wires
     .combo-list / .combo-item

   Field tokens (--field-bg / --field-pressed-bg / --field-disabled-*) live in
   colors_and_type.css (@layer tokens) + _dark.css (@layer theme).
   ============================================================================ */

/* ── Custom select trigger ──────────────────────────────────────────
   Replaces native <select> so chevron + hover + focus + text read the
   same across OSes and themes. The chevron uses bootstrap-icons
   (currentColor) so dark mode picks it up automatically. */
/* FIELD (combobox trigger) @layer-wrapped (ring lives in @layer base now). The
   trigger is a [tabindex] div, so its plain :focus-visible ring still comes from
   @layer base (no component :focus-visible rule overrides it); the open/forced
   states (.field[aria-expanded] / .field--focus) win from @layer components. The
   deferred .tb-select and the .combo-* dropdown stay UNLAYERED. */
@layer components {
.field {
  display: flex; align-items: center; gap: 8px;
  /* Query container so the leading icon hides itself when narrow (the chevron
     stays — it's the open affordance). */
  container: field-q / inline-size;
  padding: 9px 12px; border: 1px solid var(--color-border-default);
  border-radius: 6px; background: var(--field-bg);
  font: 400 14.5px var(--font-sans); color: var(--color-fg-default);
  cursor: pointer; user-select: none;
  /* box-shadow joins the transition so the focus ring blooms; spring
     easing comes from the focus override below. Same recipe as
     comp-inputs / comp-buttons. */
  transition: background-color 100ms linear,
              border-color 100ms linear,
              box-shadow 140ms ease-out;
}
.field > i.bi:not(.chev) { color: var(--color-fg-tertiary); flex: none; transition: color 100ms linear; }
.field .value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Chevron transform composes hover-nudge + open-rotate via the same
   `transform` list (always two functions, in the same order, so the
   transition interpolates cleanly between any pair of states). */
.field .chev {
  color: var(--color-fg-secondary); font-size: 12px; flex: none; margin-left: 4px;
  transform: translateY(0) rotate(0deg) scale(1);
  -webkit-text-stroke: 0 currentColor;
  transition: color 120ms linear,
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              -webkit-text-stroke-width 160ms ease-out;
}
/* Icon + chevron follow the interactive state — same pattern as segmented
   controls. Default → secondary/tertiary, hover → primary-500 (signals the
   open affordance + tiny 1px translateY nudge), open/focus → primary-500
   solid + 180° rotate. Error variant flips to red on the same events. */
.field:hover:not(.field--disabled):not(.field--error):not(.field--focus):not([aria-expanded="true"]) > i.bi:not(.chev),
.field[data-state="hover"]:not(.field--disabled):not(.field--error):not(.field--focus):not([aria-expanded="true"]) > i.bi:not(.chev) { color: var(--color-fg-secondary); }
.field:hover:not(.field--disabled):not(.field--error):not(.field--focus):not([aria-expanded="true"]) .chev,
.field[data-state="hover"]:not(.field--disabled):not(.field--error):not(.field--focus):not([aria-expanded="true"]) .chev {
  color: var(--gov-color-primary-500);
  transform: translateY(1px) rotate(0deg) scale(1.18);
  -webkit-text-stroke-width: 0.4px;
}
/* Toned-down "pronounced chevron" — same idea as the Related-row arrow at lower
   amplitude: the chevron GROWS + thickens on keyboard focus too (the field used
   to react to hover only). transform never reflows, so the trigger's value text
   is untouched. Error excluded (keeps its red, no grow). */
.field--focus:not([aria-expanded="true"]):not(.field--error) .chev,
.field:focus-visible:not([aria-expanded="true"]):not(.field--error) .chev {
  color: var(--gov-color-primary-500);
  transform: translateY(0) rotate(0deg) scale(1.18);
  -webkit-text-stroke-width: 0.4px;
}
.field--focus > i.bi:not(.chev),
.field[aria-expanded="true"] > i.bi:not(.chev),
.field--focus .chev,
.field[aria-expanded="true"] .chev { color: var(--gov-color-primary-500); }
.field[aria-expanded="true"] .chev { transform: translateY(0) rotate(180deg) scale(1.12); -webkit-text-stroke-width: 0.4px; }
.field--error:hover:not(.field--disabled):not(.field--focus):not([aria-expanded="true"]) > i.bi:not(.chev),
.field--error:hover:not(.field--disabled):not(.field--focus):not([aria-expanded="true"]) .chev,
.field--error[data-state="hover"]:not(.field--disabled):not(.field--focus):not([aria-expanded="true"]) > i.bi:not(.chev),
.field--error[data-state="hover"]:not(.field--disabled):not(.field--focus):not([aria-expanded="true"]) .chev { color: var(--gov-color-error-700); }
.field--error.field--focus > i.bi:not(.chev),
.field--error[aria-expanded="true"] > i.bi:not(.chev),
.field--error.field--focus .chev,
.field--error[aria-expanded="true"] .chev { color: var(--gov-color-error-500); }
.field:hover:not(.field--disabled):not(.field--error):not(.field--focus):not([aria-expanded="true"]),
.field[data-state="hover"]:not(.field--disabled):not(.field--error):not(.field--focus):not([aria-expanded="true"]) { background: var(--gov-color-primary-50); }
/* Pressed — one step deeper than hover; gives the trigger click feedback in
   the focus playground (selects don't have a strong native pressed look). */
.field[data-state="pressed"]:not(.field--disabled):not(.field--error):not([aria-expanded="true"]) { background: var(--field-pressed-bg); }
/* Error hover — red tint mirrors the blue hover on enabled fields. */
.field--error:hover:not(.field--disabled):not(.field--focus):not([aria-expanded="true"]),
.field--error[data-state="hover"]:not(.field--disabled):not(.field--focus):not([aria-expanded="true"]) { background: var(--gov-color-error-50); }
.field--focus,
.field[aria-expanded="true"] { border-color: var(--gov-color-primary-500); box-shadow: var(--shadow-focus, 0 0 0 3px rgba(35,98,162,0.35)); }
/* Focus-ring bloom — pattern shared with comp-inputs / comp-buttons.
   Covers `.field--focus` (forced demo state) AND `[aria-expanded="true"]`
   (the live open-combo state) since the select uses both as focus triggers. */
.field--focus,
.field[aria-expanded="true"] {
  transition: background-color 100ms linear,
              border-color 140ms ease-out,
              box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.field--error { border-color: var(--gov-color-error-500); }
/* Error focus / open — swap the ring to red so the validation border
   stays visible while the user is interacting with the combo. */
.field--error.field--focus,
.field--error[aria-expanded="true"] { border-color: var(--gov-color-error-500); box-shadow: var(--shadow-focus-error); }
.field--disabled { background: var(--field-disabled-bg); border-style: var(--field-disabled-bd-style); color: var(--color-fg-tertiary); cursor: not-allowed; }
.field--disabled > i.bi:not(.chev),
.field--disabled .chev { color: var(--color-fg-tertiary); }
}  /* end @layer components (field) */

/* Narrow-field space-saver: hide the leading inset icon below 150px so the
   selected value + chevron keep room. The chevron (`.chev`) is excluded so the
   open affordance never disappears. Unlayered to beat @layer reset's .bi. */
@container field-q (max-width: 150px) {
  .field > i.bi:not(.chev) { display: none; }
}

/* ── Toolbar-size inline trigger ─────────────────────────────────── */
.tb-select {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 10px;
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  background: var(--field-bg);
  font: 400 13.5px var(--font-sans); color: var(--color-fg-default);
  cursor: pointer; user-select: none;
  /* box-shadow in the base transition; spring easing on focus below. */
  transition: background-color 100ms linear,
              border-color 100ms linear,
              box-shadow 140ms ease-out;
}
.tb-select .value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Width-to-content variant — the trigger never shrinks below the selected
   label (no ellipsis) and its width follows the selection; the chevron hugs
   the value. For sort combos whose options differ a lot in length. */
.tb-select--fit { flex: none; }
.tb-select--fit .value { overflow: visible; text-overflow: clip; }
.tb-select:hover:not([aria-expanded="true"]):not(.tb-select--disabled):not([aria-disabled="true"]),
.tb-select[data-state="hover"]:not([aria-expanded="true"]):not(.tb-select--disabled):not([aria-disabled="true"]) { background: var(--gov-color-primary-50); }
.tb-select[data-state="pressed"]:not([aria-expanded="true"]):not(.tb-select--disabled):not([aria-disabled="true"]) { background: var(--field-pressed-bg); }
.tb-select[aria-expanded="true"],
.tb-select.is-focus { border-color: var(--gov-color-primary-500); box-shadow: var(--shadow-focus, 0 0 0 3px rgba(35,98,162,0.35)); }
/* Focus-ring bloom — pattern shared with comp-inputs / comp-buttons. */
.tb-select[aria-expanded="true"],
.tb-select.is-focus {
  transition: background-color 100ms linear,
              border-color 140ms ease-out,
              box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.tb-select .chev {
  color: var(--color-fg-secondary); font-size: 11px; margin-left: 2px; flex: none;
  transform: translateY(0) rotate(0deg) scale(1);
  -webkit-text-stroke: 0 currentColor;
  transition: color 120ms linear,
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
              -webkit-text-stroke-width 160ms ease-out;
}
.tb-select:hover:not([aria-expanded="true"]):not(.tb-select--disabled):not([aria-disabled="true"]) .chev,
.tb-select[data-state="hover"]:not([aria-expanded="true"]):not(.tb-select--disabled):not([aria-disabled="true"]) .chev {
  color: var(--gov-color-primary-500);
  transform: translateY(1px) rotate(0deg) scale(1.18);
  -webkit-text-stroke-width: 0.4px;
}
.tb-select.is-focus .chev,
.tb-select:focus-visible:not([aria-expanded="true"]) .chev {
  color: var(--gov-color-primary-500);
  transform: translateY(0) rotate(0deg) scale(1.18);
  -webkit-text-stroke-width: 0.4px;
}
.tb-select[aria-expanded="true"] .chev {
  color: var(--gov-color-primary-500);
  transform: translateY(0) rotate(180deg) scale(1.12);
  -webkit-text-stroke-width: 0.4px;
}
/* Disabled — compact trigger. Mirrors .field--disabled (the compact variant
   had NO disabled rule, so forced-disabled left it looking enabled). */
.tb-select--disabled,
.tb-select[aria-disabled="true"] {
  background: var(--field-disabled-bg); border-style: var(--field-disabled-bd-style);
  color: var(--color-fg-tertiary); cursor: not-allowed;
}
.tb-select--disabled .chev,
.tb-select[aria-disabled="true"] .chev { color: var(--color-fg-tertiary); transform: none; }

/* ── On-dark compact trigger — language switcher on the gov.cz strip ──────
   Transparent / white-alpha trigger that reads on the dark .bar, opening the
   same light .combo-list below. Selectors mirror the base .tb-select chain
   exactly (same specificity) and are defined after it so they win by source
   order. The dropdown itself stays the standard light surface. */
.tb-select--on-dark {
  height: 22px; padding: 0 6px 0 8px;
  font: 500 12px var(--font-sans);
  color: #fff; background: transparent;
  border-color: rgba(255,255,255,0.30);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.tb-select--on-dark .value { letter-spacing: 0.04em; }
.tb-select--on-dark:hover:not([aria-expanded="true"]):not(.tb-select--disabled):not([aria-disabled="true"]),
.tb-select--on-dark[data-state="hover"]:not([aria-expanded="true"]):not(.tb-select--disabled):not([aria-disabled="true"]) {
  background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.55);
}
.tb-select--on-dark:focus-visible,
.tb-select--on-dark.is-focus { outline: 0; border-color: rgba(255,255,255,0.6); box-shadow: 0 0 0 2px rgba(255,255,255,0.6); }
/* Open — flip to a solid white trigger so it reads as the active anchor of the
   light dropdown beneath it (mirrors the old .locale open treatment). The text
   colour is the LITERAL light-mode neutral-900 (#0c1838), NOT the token: the
   trigger is white in BOTH page themes, and `--gov-color-neutral-900` inverts to
   near-white in dark → invisible label. A white ring replaces the base
   `[aria-expanded]` blue `--shadow-focus`, which would otherwise leak through. */
.tb-select--on-dark[aria-expanded="true"] { background: #fff; color: #0c1838; border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.6); }
/* Chevron rides the trigger's currentColor (white at rest → dark when open);
   suppress the primary tint / hover nudge the base trigger applies. */
.tb-select--on-dark .chev,
.tb-select--on-dark.is-focus .chev,
.tb-select--on-dark:hover:not([aria-expanded="true"]):not(.tb-select--disabled):not([aria-disabled="true"]) .chev,
.tb-select--on-dark[data-state="hover"]:not([aria-expanded="true"]):not(.tb-select--disabled):not([aria-disabled="true"]) .chev {
  color: currentColor; opacity: 0.85; transform: translateY(0) rotate(0deg) scale(1); -webkit-text-stroke-width: 0;
}
.tb-select--on-dark[aria-expanded="true"] .chev { color: currentColor; opacity: 1; transform: translateY(0) rotate(180deg) scale(1); -webkit-text-stroke-width: 0; }

/* ── Dropdown list ──────────────────────────────────────────────────
   Two modes:
   • `.combo-list[data-open="true"]` floats absolutely above siblings,
     used for the live click-to-open interaction.
   • `.combo-list[data-static="true"]` flows inline in the card so the
     "open by default" docs example expands the card height naturally
     (no scrollbar, no clipping).
   Open + close animate symmetrically via a single `transition` recipe
   (opacity + translateY). The visibility-delay-on-close trick keeps the
   element non-interactive once fully faded out without removing it from
   layout (so the close transition can actually run). 140ms expo-out for
   open, 100ms ease-in for close. */
.combo-wrap { position: relative; }
.combo-list {
  background: var(--color-bg-surface, white);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(12,24,56,0.10), 0 2px 4px rgba(12,24,56,0.05);
  padding: 4px 0;
  font-size: 13.5px;
  max-height: 240px; overflow-y: auto;
  z-index: 2;
}
/* Live (anchored) mode — hidden state. Element stays in the layout
   (display: block + position: absolute) so the close transition has
   something to interpolate to. `visibility: hidden` (paired with a
   transition delay equal to the opacity duration) makes it non-
   interactive once fully faded out. */
.combo-wrap > .combo-list:not([data-static]) {
  display: block;
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 100ms ease-in,
              transform 100ms ease-in,
              visibility 0s linear 100ms;
}
/* Live (anchored) mode — open state. */
.combo-wrap > .combo-list[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 140ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 140ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0s;
}
/* Static docs mode — flows inline. */
.combo-list[data-static="true"] {
  display: block;
  position: static;
  margin-top: 4px;
}
/* Reduced motion is handled system-wide in colors_and_type.css — snaps the
   chevron rotation and the dropdown open/close. No local block. */

.combo-item { display: flex; gap: 10px; align-items: center; padding: 8px 12px; cursor: pointer; color: var(--color-fg-default); user-select: none; -webkit-user-select: none; }
.combo-item:hover { background: var(--gov-color-primary-50); }
/* Keyboard highlight (aria-activedescendant target) — same tint as
   hover but with a 2 px inset rail on the left to disambiguate from
   pointer-hover. */
.combo-item[data-active="true"] { background: var(--gov-color-primary-50); box-shadow: inset 2px 0 0 var(--gov-color-primary-500); }
.combo-item[aria-selected="true"] { background: var(--gov-color-primary-50); font-weight: 500; color: var(--gov-color-primary-700); }
.combo-item[aria-selected="true"][data-active="true"] { box-shadow: inset 2px 0 0 var(--gov-color-primary-500); }
.combo-item i.check { color: var(--gov-color-primary-500); font-size: 14px; margin-left: auto; }
.combo-item > i.bi { color: var(--color-fg-tertiary); font-size: 14px; flex: none; }
.combo-item[aria-selected="true"] > i.bi { color: var(--gov-color-primary-700); }
.combo-item:not([aria-selected="true"]) i.check { visibility: hidden; }
/* Optional trailing meta label inside an option (secondary text pushed to the
   right — e.g. a language name next to its code, or a keyboard shortcut). */
.combo-item .lang { font: 400 11.5px var(--font-sans); text-transform: none; letter-spacing: 0; color: var(--color-fg-secondary); margin-left: auto; padding-left: 14px; }
.combo-item:hover .lang,
.combo-item[data-active="true"] .lang,
.combo-item[aria-selected="true"] .lang { color: var(--gov-color-primary-700); }
/* When a .lang label is present it owns the right edge, so the check sits flush
   after it rather than grabbing the auto-margin. */
.combo-item .lang + i.check { margin-left: 8px; }

/* Toolbar-size dropdown anchors to the trigger, so the wrap is inline.
   `min-width` lives on the base (hidden) rule, not on `[data-open="true"]`,
   so the list keeps its width during the close fade-out — otherwise the
   dropdown collapses to the trigger's narrow inline-block width mid-
   animation. */
.combo-wrap--inline { display: inline-block; }
.combo-wrap--inline > .combo-list:not([data-static]) { min-width: 180px; left: 0; right: auto; }
/* Right-anchored variant — for a trigger sitting at the right edge (e.g. the
   language switcher in the header), so the menu hugs the right side. */
.combo-wrap--end > .combo-list:not([data-static]) { left: auto; right: 0; }