/* ============================================================================
 * Dropdown — the kit's popover-list primitive (trigger + panel + item rows).
 * Fully token-driven so it re-themes across accents + light/dark. Shares its
 * open/close JS with the topbar's version switcher and account menu, which keep
 * their own bespoke classes; this file styles the standalone `dropdown()`.
 * ========================================================================== */

.ui-dropdown { position: relative; display: inline-flex; }
/* Inside a scrolling body the wiring writes --ui-dropdown-reach when it opens the
   panel: the distance from the trigger to one edge inset past the panel. The panel is
   the last thing the body holds, so the body ends where the panel ends; this 1px spot
   lets it scroll that far. It stays through the fade and until the reader has scrolled
   out of it, so closing does not move the field, and it paints nothing.
   why: docs/components.md#the-dropdown-panel */
.ui-dropdown[style*="--ui-dropdown-reach"]::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  width: 1px;
  height: 1px;
  margin-top: var(--ui-dropdown-reach);
  pointer-events: none;
}

/* Trigger — pill button: [pre] [value] [chevron] */
.ui-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: calc(var(--text-sm) - 0.5px);
  font-weight: 500;
  color: var(--text);
  background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
  /* The kit's live control edge, the one .ui-btn takes on the same fill. --border
     is what --disabled-border resolves to in LIGHT, so a live trigger used to draw
     the exact line the kit paints an unavailable control with. #580
     why: docs/foundations.md#colour-and-contrast */
  border: 1px solid var(--control-edge);
  border-radius: var(--radius-pill);
  padding: 7px 11px 7px 13px;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
/* The hover edge steps aside under the band: an accent edge one pixel inside an
   accent band is the second band #578 round r34 took off the focus rules, and a
   pointer resting on a focused control would put it back. One indicator, which is
   what the kit's rows already chose. why: docs/foundations.md#the-focus-ring */
.ui-dropdown__trigger:enabled:hover:not(:focus-visible) { border-color: var(--accent); }
.ui-dropdown__trigger:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }
/* Off. The off hover-not-focus selectors are (0,4,0), tied with live hover and later.
   A pointer over a dead control changes nothing while an aria-disabled one keeps its stop and the ring.
   No fill: --disabled-surface IS this control's --surface, in both themes. The
   activation is refused in ddTriggerOff(), not with pointer-events, which would
   take that stop away. #580 why: docs/foundations.md#colour-and-contrast */
.ui-dropdown__trigger:disabled,
.ui-dropdown__trigger:disabled:hover,
.ui-dropdown__trigger:disabled:hover:not(:focus-visible),
.ui-dropdown__trigger:disabled:focus-visible,
.ui-dropdown__trigger[aria-disabled="true"]:hover,
.ui-dropdown__trigger[aria-disabled="true"]:hover:not(:focus-visible),
.ui-dropdown__trigger[aria-disabled="true"]:focus-visible,
.ui-dropdown__trigger[aria-disabled="true"] {
  border-color: var(--disabled-border);
  /* muted-ink: state — unavailable control */ color: var(--disabled-ink);
  cursor: not-allowed;
}
/* The prefix and the value carry inks of their own, so they take the state's. */
.ui-dropdown__trigger:disabled .ui-dropdown__pre,
.ui-dropdown__trigger:disabled .ui-dropdown__value,
.ui-dropdown__trigger[aria-disabled="true"] .ui-dropdown__pre,
.ui-dropdown__trigger[aria-disabled="true"] .ui-dropdown__value { color: inherit; }
.ui-dropdown__pre { color: var(--text); }
.ui-dropdown__value { color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }

/* Chevron — border caret that flips when the container is .open. Its ink is an L
   on a rotated square, so centring the BOX leaves the mark off centre; --caret-off
   is that gap, derived rather than typed.
   why: docs/components.md#the-dropdown-panel */
.ui-dropdown__chevron {
  --caret: 8px;
  --caret-ink: 1.6px;
  --caret-off: calc((var(--caret) - var(--caret-ink)) / 2.8284);  /* 2√2 — the 45° turn's projection */
  width: var(--caret); height: var(--caret);
  /* Two gradient strips, not borders: Chromium rounds a border to whole device pixels,
     so a 1.6px border painted 1.03px of ink, where the select's SVG stroke paints 1.58px. */
  background:
    linear-gradient(var(--muted), var(--muted)) right / var(--caret-ink) 100% no-repeat,
    linear-gradient(var(--muted), var(--muted)) bottom / 100% var(--caret-ink) no-repeat;
  /* Shift BEFORE rotate, so it lands in page space rather than on the turned axis. */
  transform: translateY(calc(var(--caret-off) * -1)) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
  flex: none;
}
.ui-dropdown.open .ui-dropdown__chevron { transform: translateY(var(--caret-off)) rotate(-135deg); }
@media (forced-colors: active) {
  .ui-dropdown__chevron { background: none; border-right: var(--caret-ink) solid ButtonText; border-bottom: var(--caret-ink) solid ButtonText; }
}

/* Panel — the popover surface */
.ui-dropdown__panel {
  /* One number for the trigger-to-panel offset, read by both edges here and by
     the portal's JS, so an upward panel cannot drift from a downward one.
     why: docs/components.md#the-dropdown-panel */
  --ui-dropdown-gap: 9px;
  /* The least a panel keeps between itself and the edge of the view it is laid out
     in. The wiring reads it off the panel and moves the panel along the inline axis
     when the edge `align` asked for does not fit; a page wanting a panel flush with
     the screen's edge sets it to 0.
     why: docs/components.md#the-dropdown-panel */
  --ui-dropdown-edge: 8px;
  /* What a panel that opens down inside a Modal or Drawer body keeps between its end
     and the body's end. The drop shadow fades out over 43px in light and 15px in dark,
     measured from pixels; the body clips whatever is left of it. 48px is the 8px
     step above the light figure. why: docs/components.md#the-dropdown-panel */
  --ui-dropdown-shade: 48px;
  /* The least height a capped panel keeps before it would rather spend the edge
     inset above than shrink further — three rows or so. Below it the panel
     still ends at or before the edge; it never spends room past the edge to
     reach this floor, because that room does not exist. #489
     why: docs/components.md#the-dropdown-panel */
  --ui-dropdown-min: 120px;
  /* The tallest a panel grows before it scrolls inside itself. It is the figure the
     reference systems settle on, 256 to 300px, and the one `scroll` and the search
     list already used. The wiring stops the cap short of it, in the middle of a row
     (--ui-dropdown-fit), so the last row is cut and the list is seen to go on. That
     shows 7 whole rows and half of the eighth in a plain list, 4 and a half with a
     description line, 5 and a half under a search field and 3 and a half with both.
     A consumer asks for another cap with `scroll: <n>`.
     why: docs/components.md#the-dropdown-panel */
  --ui-dropdown-max: 300px;
  /* Named for the same reason the offset is: a block pinned to an edge has to
     bleed back through it, and #306 is a page copying the number by hand.
     why: docs/components.md#the-dropdown-panel */
  --ui-dropdown-pad: 6px;
  /* The panel states its own role rather than inheriting one, because `portal:
     true` moves it onto <body> and an inherited face is then decided by where
     the panel was MOUNTED rather than by what it is. Measured: the same dropdown
     inside a display-face subtree resolved to var(--font-display) in place and
     var(--font-sans) once portalled — a positioning flag changing the typeface.
     A list of item rows is text, so it is the text face in both placements.
     why: docs/foundations.md#typefaces */
  font-family: var(--font-sans);
  position: absolute;
  top: calc(100% + var(--ui-dropdown-gap));
  left: 0;
  min-width: 240px;
  /* …and no wider than the view it is laid out in, less the keep-out it owes each
     edge. This bound is what holds a PORTALLED panel: that one is `position: fixed`,
     so the room beside its own offsets is the whole view and a shrink-to-fit box
     takes all of it — measured at 390px on a 390px screen with this line gone.
     The floor above wins where the two disagree, which is a view under 2 × edge +
     240. The wiring writes the property off the LAYOUT viewport; the fallback is
     for a page whose JS has not run, and is a classic scrollbar's width too
     generous, because `100vw` counts a scrollbar the panel's own box does not.
     why: docs/components.md#the-dropdown-panel */
  max-width: var(--ui-dropdown-ceiling, calc(100vw - 2 * var(--ui-dropdown-edge)));
  /* And this is what holds an IN-PLACE one, whose room is its trigger's block: a
     shrink-to-fit box is its min-content wide at the least, and one 70-character
     token's min-content was 508px on a 390px screen. Breaking anywhere takes that
     to one character, so the panel settles on the floor above — and keeps the token
     inside its own box, since overflowing inline text widens the page whatever the
     box says. The treatment a filter row's panels and the rail's account block
     already take. why: src/styles/filter-bar.css */
  overflow-wrap: anywhere;
  /* The floating step, not the sunken one — a panel held open over a card cannot be
     painted the colour of an inset. why: docs/foundations.md#elevation */
  background: var(--bg-elevated);
  /* The two-step edge and the drop, through the level's own names: in DARK that is
     --border-strong outside and --border one pixel inside it, then the drop; in LIGHT
     both lines are transparent and the drop carries the whole separation.
     why: docs/foundations.md#elevation */
  border: 1px solid var(--float-edge);
  box-shadow: inset 0 0 0 1px var(--elev-edge, var(--float-edge-inner)), var(--elev-drop);
  border-radius: var(--radius-lg);
  padding: var(--ui-dropdown-pad);
  /* The cap, and the whole of #489: a panel took its content's height until that
     height ran off the screen, and then it took what was left. Two numbers decide
     it and the smaller wins — --ui-dropdown-cap is what the consumer asked for
     (the `scroll` option writes it, and --ui-dropdown-max stands in when it is
     unset), --ui-dropdown-avail is the room between the trigger and the viewport
     edge, or the body's, which the wiring measures when the panel opens. Between
     them --ui-dropdown-fit is the height the wiring stops the smaller at, in the
     middle of a row. An unset avail
     means nothing has measured yet, which is a server-rendered page before
     hydration — so the fallback promises the same thing at a coarser grain, the
     viewport less the edge inset at each end.
     why: docs/components.md#the-dropdown-panel */
  max-height: min(
    var(--ui-dropdown-cap, var(--ui-dropdown-max)),
    var(--ui-dropdown-fit, 100dvh),
    var(--ui-dropdown-avail, calc(100dvh - 2 * var(--ui-dropdown-edge)))
  );
  overflow-y: auto;
  /* The wheel stops at the panel's own end instead of carrying on down the page
     underneath it — the second half of #489. */
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  /* Drawn for the whole of the fade out, so the rows do not vanish mid-fade — and a
     box that is drawn is a box that is hit. The open rules take this back.
     why: docs/components.md#the-dropdown-panel */
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    opacity var(--dur-med) var(--ease),
    transform var(--dur-med) var(--ease),
    /* `linear`, not var(--ease): visibility is discrete, so easing it buys nothing and a
       curve leaving [0, 1] flips it mid-fade. Same rule the drawer states at length. */
    visibility var(--dur-med) linear;
  z-index: var(--z-dropdown);
}
.ui-dropdown__panel.is-end { left: auto; right: 0; }
/* `.is-scroll` asks for the standard cap by name; the panel above caps every panel
   at the room the viewport left either way. #489 */
.ui-dropdown__panel.is-scroll { --ui-dropdown-cap: var(--ui-dropdown-max); }

/* On a phone, the panel keeps the page's 16px margin at the shell fold.
   why: docs/components.md#the-dropdown-panel */
@media (max-width: 720px) {
  .ui-dropdown__panel { --ui-dropdown-edge: var(--space-4); }
}

/* The wiring adds this where the room is below the floor: even spending the whole
   edge inset, there is no usable height. The panel keeps its cap — it is never
   taller than 300px — and scrolls inside it. Its room runs past the fold, so the
   page is the way to the rows below it, and `overscroll-behavior: contain` above
   would stop the wheel at the panel's own end instead of passing it on. `auto`
   lets it through. why: dropdownAvail(), src/logic/dropdown.js */
.ui-dropdown__panel.is-unbounded { overscroll-behavior: auto; }

/* The wiring lifts a panel out of a Modal or Drawer body too short to hold the field's
   label and trigger, the floor and the 8px edge under it. Fixed, it opens over the
   body the way a portalled panel does, and the wiring writes its edges from the
   trigger's. The value is the side it opens on. why: docs/components.md#the-dropdown-panel */
.ui-dropdown__panel[data-dd-lifted] { position: fixed; }
.ui-dropdown__panel[data-dd-lifted="up"] { transform: translateY(6px); }

/* A search list that carries the consumer's own cap keeps it, and the panel is that cap
   and the search field over it. The wiring writes the sum as --ui-dropdown-fit; this
   lifts the standard cap out of its way. why: docs/components.md#the-dropdown-panel */
.ui-dropdown__panel--search:has(> .ui-dropdown__list[style*="--ui-dropdown-cap"]) { --ui-dropdown-max: 100dvh; }

/* A shut panel is still laid out, and a box that is laid out counts towards the
   scroll of the body or page it sits in. The wiring collapses it once its fade is
   over and gives the box back before the next open measures it. The width stays, so
   the horizontal fit reads the same number. why: docs/components.md#the-dropdown-panel */
.ui-dropdown__panel[data-dd-shut] {
  max-height: 0;
  padding-block: 0;
  border-block-width: 0;
  overflow: hidden;
}

/* Chrome makes a scroll container a keyboard stop on its own — no tabindex, no
   author rule — so `.is-scroll` took the browser's outline, black in light mode.
   #457 refused that, and #487's review measured it here. Written for every panel
   rather than the scrolling one, as the palette and the drawer write it, because
   a panel that takes focus any other way has the same claim on the ring. The ring
   is an outline since #578, so it leaves the box-shadow list that carries the panel's
   edge and its drop standing. why: docs/foundations.md#elevation */
.ui-dropdown__panel:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); }

/* Opening upward. The kit releases its own `top` here so that nothing outside
   the kit has to: an absolute box with both edges pinned is stretched between
   them, and a consumer who set `bottom` and left our `top` standing got a
   fourteen-pixel panel. The entry travel is mirrored too, so the panel arrives
   from the trigger whichever way it opens.
   why: docs/components.md#the-dropdown-panel */
.ui-dropdown__panel.is-up {
  top: auto;
  bottom: calc(100% + var(--ui-dropdown-gap));
  transform: translateY(6px);
}

.ui-dropdown.open .ui-dropdown__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
/* Open, the panel is visible AT ONCE: `visibility` is off the list, so it is not
   held at `hidden` for the frame a key opens the panel in — the frame the focus
   call happens in. Closing still fades on every property it always did.
   why: docs/components.md#the-dropdown-panel */
.ui-dropdown.open .ui-dropdown__panel,
.ui-dropdown__panel--portal.is-open { transition-property: opacity, transform; }

/* And nothing inside it is held either. Under reduced motion an element that names no
   property of its own still transitions the inherited `visibility`, so it is hidden in
   the frame openDropdown() focuses into it — #519. Keyed on the data hook, because the
   topbar's two menus open on the same wiring and keep their own CSS.
   why: docs/components.md#the-dropdown-panel */
@media (prefers-reduced-motion: reduce) {
  .open > [data-dropdown-panel] *,
  [data-dropdown-panel].is-open * { transition: none !important; }
}

/* Portalled panel — wireDropdown() moves it onto <body>, clear of every
   ancestor's overflow and every ancestor's stacking context. The descendant
   selector above stops matching the moment it leaves the trigger's subtree, so
   its open state is a class of its own; the wiring writes the viewport
   coordinates inline, and these `auto`s are what it writes over.
   why: docs/components.md#the-dropdown-panel */
.ui-dropdown__panel--portal {
  position: fixed;
  top: auto; right: auto; bottom: auto; left: auto;
}
.ui-dropdown__panel--portal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

/* Item row — [icon] [main: label + desc] [badge] [tick]. A row is a <div>, an
   <a href> or a <button>: `is-selected` and __tick below mean a row gets
   chosen, and choosing is a button's job. So the tag's own styling is reset
   here, the way .ui-nav__item resets it, and the three render identically.
   why: docs/components.md#a-dropdown-row-is-a-div-a-link-or-a-button */
.ui-dropdown__item {
  display: flex;
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  /* `font`, not `font-family`: the UA writes one shorthand, `font: 400 13.3333px
     Arial`, so answering its family alone leaves the size and the line-height
     standing. The same answer .ui-toast__action gives. */
  font: inherit;
  color: var(--text);
  transition: background var(--dur-fast) var(--ease);
}
/* Hover is a fill and an outline means focus, so a hovered row draws no edge. A row that is
   hovered AND focused draws the ring over the fill.
   why: docs/foundations.md#elevation */
.ui-dropdown__item:hover { background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }
/* Light only: the panel is --bg-elevated, which --surface matches exactly there, so the
   hover fill above changed nothing. --surface-3 is the quiet fill the drawer's close mark
   takes on hover, one step under the --surface-2 that .is-active takes below.
   why: docs/foundations.md#elevation */
:where(:root[data-theme="light"]) .ui-dropdown__item:hover { background: var(--surface-3); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }
@media (forced-colors: active) {
  .ui-dropdown__item:hover { border: 1px solid Highlight; padding: 8px 11px; }
}
/* The row draws its ring inward, so a row scrolled flush with the list's edge cannot have it
   clipped and the list scrolls as it did.
   why: docs/foundations.md#the-focus-ring */
.ui-dropdown__item:focus-visible { background: var(--surface); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ outline: var(--ring-scroll); outline-offset: var(--ring-scroll-offset); }
.ui-dropdown__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-dropdown__label { font-family: var(--font-sans); font-size: calc(var(--text-sm) - 0.5px); color: var(--strong); font-weight: 600; letter-spacing: 0.01em; }
.ui-dropdown__desc { font-size: var(--text-xs); color: var(--text); line-height: 1.35; }
.ui-dropdown__ic { display: inline-flex; flex: none; /* muted-ink: glyph — option icon */ color: var(--muted); }
.ui-dropdown__ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.1; }

/* Trailing selected tick (listbox variant) */
.ui-dropdown__tick { margin-left: auto; flex: none; display: none; color: var(--accent); }
.ui-dropdown__tick svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.ui-dropdown__item.is-selected .ui-dropdown__tick { display: inline-flex; } /* motion: still — a mark inside a row whose highlight already transitions; picking it closes the panel, which fades out over --dur-med */
.ui-dropdown__item.is-selected .ui-dropdown__label { color: var(--text); }

/* When a row has both a badge and a tick, keep the badge from eating the margin */
.ui-dropdown__badge + .ui-dropdown__tick { margin-left: 8px; }

/* Trailing status badge */
.ui-dropdown__badge {
  /* rank: chip */
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  margin-left: auto;
  flex: none;
  color: var(--text);
  /* The kit's one neutral chip fill, which #453 moved into a token so the badge, the
     pill, this chip and the version badge are one family. The per-theme alphas that
     used to be written here twice live with the token. */
  background: var(--chip-neutral-fill); /* ring-gap: inherit — translucent wash retains the opaque containing gap. */
}
.ui-dropdown__badge.is-live { color: var(--chip-success-ink); background: var(--chip-success-fill); /* code-bg: inherit — decorative or text-only surface has no nested chip. */ }

/* Disabled + danger rows */
.ui-dropdown__item.is-disabled { /* muted-ink: state — unavailable control */ color: var(--disabled-ink); cursor: not-allowed; pointer-events: none; }
.ui-dropdown__item.is-disabled .ui-dropdown__label,
.ui-dropdown__item.is-disabled .ui-dropdown__desc { color: inherit; }
/* Body ink at rest, --pink on the way to being pressed. Both states, not hover alone:
   the ring says where the reader is, not that this row ends something.
   why: docs/components.md#a-dropdown-row-is-a-div-a-link-or-a-button */
.ui-dropdown__item.is-danger .ui-dropdown__label { color: var(--text); }
.ui-dropdown__item.is-danger:hover .ui-dropdown__label,
.ui-dropdown__item.is-danger:focus-visible .ui-dropdown__label { color: var(--pink); }

/* Grouped sections. `~` and :not([hidden]), because `+` counts a group a search
   query has hidden and drew the divider above the first group left showing. */
.ui-dropdown__section:not([hidden]) ~ .ui-dropdown__section:not([hidden]) { border-top: 1px solid var(--border); margin-top: 5px; padding-top: 5px; }
.ui-dropdown__group {
  /* rank: label */
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  padding: 7px 12px 4px;
}

/* Separator */
.ui-dropdown__sep { height: 1px; background: var(--border); margin: 5px 4px; }

/* Optional pinned head/foot blocks — symmetrical: one inner padding, and each
   bleeding to the edge it sits on, lining the edge it faces.
   why: docs/components.md#the-dropdown-panel */
.ui-dropdown__panel > .ui-dropdown__head,
.ui-dropdown__panel > .ui-dropdown__foot {
  padding: 11px 13px;
}
.ui-dropdown__panel > .ui-dropdown__head {
  margin: calc(var(--ui-dropdown-pad) * -1) calc(var(--ui-dropdown-pad) * -1) 5px;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.ui-dropdown__panel > .ui-dropdown__foot {
  margin: 5px calc(var(--ui-dropdown-pad) * -1) calc(var(--ui-dropdown-pad) * -1);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Search — `search: true` pins a field above the rows and filters them as the
   reader types. The rows move into a list of their own, so the field stays put
   while the list scrolls. Every rule below keys on a class only the search
   variant emits, so the plain dropdown renders as it did.
   why: docs/components.md#a-dropdown-with-a-search-field */
/* A column, so the panel's own avail-based max-height (above) lands on the rows
   and not on the field: the field and the empty-state block keep their content
   height, and the list — the child that can overflow — gives up the room they
   take. #489 */
.ui-dropdown__panel--search { min-width: 280px; display: flex; flex-direction: column; }
.ui-dropdown__panel--search > * { flex: none; }
.ui-dropdown__panel--search > .ui-dropdown__list { flex: 1 1 auto; min-height: 0; }

.ui-dropdown__search { position: relative; display: flex; align-items: center; margin-bottom: 6px; }
.ui-dropdown__search-ic {
  position: absolute;
  left: 11px;
  display: inline-flex;
  /* muted-ink: glyph — search icon */ color: var(--muted);
  pointer-events: none;
}
/* 16px at 2.4 paints 1.6px, over the 1.5px floor stories/glyph-stroke.test.js holds. */
.ui-dropdown__search-ic svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.4; }
/* 12.5px with a mouse only. On a touch screen the touch-zoom net in
   src/styles/field-zoom.css takes this field, and every other field the kit
   ships, to 16px. why: docs/foundations.md#a-field-is-16px-on-a-touch-screen */
.ui-dropdown__search-input {
  width: 100%;
  font: inherit;
  font-size: calc(var(--text-sm) - 0.5px);
  color: var(--strong);
  /* The ground and line .ui-input takes. why: docs/foundations.md#elevation */
  background: var(--field-bg); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */
  border: 1px solid var(--field-edge);
  border-radius: var(--radius-sm);
  padding: 8px 12px 8px 34px;
  /* The height Chromium paints (38.25px), stated so the target-size gate, which
     cannot see an <input>'s line of text, reads the box a reader hits. */
  min-height: 38px;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
/* The light-only `background: var(--bg)` override this field used to carry is gone:
   --field-bg says the same thing for every field. Gated by
   stories/dropdown-field-ground.test.js. why: docs/foundations.md#elevation */

.ui-dropdown__search-input::placeholder { /* muted-ink: placeholder — empty search field */ color: var(--muted); }
.ui-dropdown__search-input:hover { border-color: var(--field-edge-hover); }
.ui-dropdown__search-input:focus-visible { border-color: transparent; outline: var(--ring); outline-offset: var(--ring-offset); }

/* The rows' own cap, read from the same property the panel reads: the `scroll`
   option lands on the list when there is a field above it. #489 */
.ui-dropdown__list { max-height: var(--ui-dropdown-cap, var(--ui-dropdown-fit, var(--ui-dropdown-max, 300px))); overflow-y: auto; overscroll-behavior: contain; }
/* Rows are `role="option" tabindex="-1"`, so the LIST takes the keyboard stop and
   answered with the native outline. The band is drawn INWARD, on the list: an outset
   one 6px inside a --radius-lg corner leaves the panel, and the panel is not the box
   that scrolls. It lands in the rows' own 9px of padding, never on a label.
   why: docs/foundations.md#the-focus-ring */
.ui-dropdown__list:focus-visible { outline: var(--ring-scroll); outline-offset: var(--ring-scroll-offset); }
/* A row is `display: flex`, which outranks the UA's [hidden], so a row the
   query hides is put away here. */
.ui-dropdown__list [hidden] { display: none; } /* motion: still — a row the query no longer matches is gone on the next keystroke */

/* The row Enter would pick. Focus stays in the field, which carries the ring, so this
   row is marked by its fill alone — the inset accent bar beside it was an edge on a
   selected row, which #578 round r34 took off every selected state. --surface-2, not
   --surface: the panel is --bg-elevated, which --surface matches exactly in light, so
   the bar had been the whole mark there. 1.183:1 in light, 1.234:1 in dark. */
.ui-dropdown__item.is-active { background: var(--surface-2); /* code-bg: inherit — control paint; the containing surface is the ground, for a chip and for a band alike. */ }

/* No match — a nudge and no action, per Guidelines / Microcopy. Empty while
   anything matches, so it takes no room. */
.ui-dropdown__none { display: flex; flex-direction: column; gap: 3px; padding: 14px 12px 10px; text-align: center; }
.ui-dropdown__none:empty { display: none; }
.ui-dropdown__none-title { font-size: calc(var(--text-sm) - 0.5px); font-weight: 600; color: var(--strong); }
.ui-dropdown__none-hint { font-size: var(--text-xs); color: var(--text); line-height: 1.35; }

.ui-dropdown__badge.is-state {
  /* muted-ink: state — off, unset, disabled or archived badge */
  color: var(--muted);
}

/* A picker of people. A mark leads the trigger and each row; with no value the trigger
   shows the dashed ring beside the placeholder in the placeholder ink. The mark's own
   margins give back the room it takes, so the trigger keeps its height.
   why: docs/components.md#avatar */
.ui-dropdown__trigger > .ui-avatar {
  --ui-avatar-pull: 4px;
  --ui-avatar-pull-start: 10px;
  margin-block: calc(var(--ui-avatar-pull) * -1);
  margin-inline-start: calc(var(--ui-avatar-pull-start) * -1);
}
.ui-dropdown__value.is-placeholder { /* muted-ink: placeholder — no person chosen */ color: var(--muted); font-weight: var(--weight-medium); }

/* A dropdown that is a form control takes its field's width, and its panel the
   trigger's. why: docs/components.md#avatar */
.ui-field > .ui-dropdown { display: grid; }
.ui-field > .ui-dropdown > .ui-dropdown__trigger > .ui-dropdown__chevron { margin-left: auto; }
.ui-field > .ui-dropdown > .ui-dropdown__panel { inline-size: 100%; min-width: 0; }