:root {
  --hw-combobox-width: unset;
  --hw-combobox-width--multiple: unset;
}

/* The gem hides its aria-live announcer (and the pagination sentinel) via a
   per-component inline <style nonce>, but our CSP applies the nonce to
   script-src only — style-src is a flat :self — so the browser blocks that
   block. Without it the announcer's "…, selected" text renders in-flow,
   garbling the field and wrapping the submit button (see the queue editor).
   Re-home the two essential rules here, in external CSS the CSP allows. */
.hw-combobox__announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.hw_combobox__pagination__wrapper {
  height: 1px;
}

body {
  --hw-border-width--slim: var(--border-width);
  --hw-border-radius: 0px;
  --hw-component-bg-color: var(--theme-bg-color);
  --hw-active-bg-color: var(--theme-bg-muted);
  --hw-option-bg-color: var(--theme-bg-color);
  --hw-border-color: var(--border-color);
  --hw-focus-color: var(--theme-accent-color);
  --hw-handle-width: var(--filter-icon-size);
  --hw-line-height: var(--filter-input-line-height);

  .hw-combobox__dialog {
    background-color: var(--theme-bg-color);
  }

  .hw-combobox__main__wrapper {
    padding: 0;
    border: none;
    display: flex;
    justify-content: space-between;
    height: 100%;
    background-color: inherit;

    &:focus-within {
      box-shadow: none;
    }
  }

  .hw-combobox__input[data-queried] + .hw-combobox__handle::before {
    background-image: none;
    background-size: var(--hw-handle-width--queried);
  }
  .hw-combobox__handle {
    position: unset;

    &::before {
      background-image: none;
      position: initial;
      vertical-align: middle;
    }
  }

  .hw-combobox__input, .hw-combobox__dialog__input {
    background-color: var(--theme-bg-color);
    color: var(--theme-fg-color);
  }

  /* Match the selected-style chips to the filter's applied tags (.filter .tag,
     accent-filled, font-size 75%, line-height 1). The gem otherwise inflates
     them with a 1.5rem line-height and a 1rem-min remover. */
  .hw-combobox__chip {
    border: var(--tag-border-width) solid var(--theme-accent-color);
    background-color: var(--theme-accent-color);
    color: var(--theme-bg-color);
    padding: 5px;
    font-size: 75%;
    line-height: 1;
    white-space: nowrap;
  }

  /* The gem renders the × as a fixed grey SVG background-image, which clashes
     with the accent chip. Mask the shape and fill it with currentColor (the
     chip's text colour, --theme-bg-color) so it matches the label exactly and
     adapts to light/dark for free — the "punched" look the filter tags have. */
  .hw-combobox__chip__remover {
    min-height: 0;
    min-width: 0;
    width: 1em;
    height: 1em;
    margin-left: var(--gap-small);
    background-image: none;
    background-color: currentColor;
    --hw-chip-remover-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E");
    -webkit-mask: var(--hw-chip-remover-mask) center / contain no-repeat;
    mask: var(--hw-chip-remover-mask) center / contain no-repeat;
  }

  /* The default dropdown reads as a heavy green slab: a 2px full-accent frame
     around tall, airy 1rem rows. Soften it into a crisp menu — hairline frame,
     denser rows, slightly smaller type — without abandoning the terminal box. */
  .hw-combobox__listbox {
    border-width: var(--tag-border-width);
    /* Float opaque over the page content. The gem leaves the listbox itself
       transparent and relies on each option's background; give it a solid ground
       so a transparent row (the free-text row, or an un-highlighted option) never
       lets the field below show through. */
    background-color: var(--theme-bg-color);
    /* Sit flush against the field's underline. The gem's 0.2rem nudge is
       measured from the inner combobox box, which leaves the popup overlapping
       up into the field; offset instead by the wrapper's padding-bottom +
       border so the popup top meets the underline with no gap or overlap. */
    top: calc(100% + var(--gap-small) + var(--border-width) - 1px);
  }

  .hw-combobox__option {
    padding: var(--gap-xsmall) var(--gap-small);
    font-size: 0.9rem;
    line-height: 1.5;
  }

  /* Mobile full-screen dialog (the gem opens one at/below its mobile_at width,
     640px): the shared option row clips each name to a single ellipsised line —
     tolerable in the narrow inline dropdown, but in the full-width dialog a long
     genre name ("Pumporgeln und Akkordeon …") runs straight off the right edge
     and is unreadable. In the dialog, let the name wrap to as many lines as it
     needs and keep the descendant count pinned to the right so the umbrella
     genres (the "roots") stay scannable. The listbox already scrolls (the gem's
     overflow:auto), so wrapping just grows each row, never the dialog. */
  .hw-combobox__dialog__listbox .hw-combobox__option {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-medium);
    align-items: baseline;
    white-space: normal;
    overflow: visible;
  }
  /* Our global `input[type="text"] { flex-grow: 1 }` (so inputs fill their flex
     ROW) also lands on the dialog's search input — but the dialog is a flex
     COLUMN, so there flex-grow stretches the input VERTICALLY (measured ~550px
     tall), opening a dead gap between the field and the options. Pin it back to
     its own height. Two classes (dialog > dialog__input) so this outranks the
     equally-specific global input rule regardless of file cascade order. */
  .hw-combobox__dialog .hw-combobox__dialog__input {
    flex-grow: 0;
  }

  /* The Where list is a flat, alphabetical list (matching the styles dropdown).
     Each option is bare text + a quiet "· Venue/City/Canton" suffix (no wrapper
     span, so it shares the styles options' row box exactly — equal heights). The
     suffix keeps the mix of three location kinds unambiguous and is render-only
     (not part of the filterable/autocomplete text), so typing still matches the
     name. */
  .loc-type {
    color: var(--theme-fg-muted);
    font-size: 0.85em;
  }
}