/*
 * BRUK.combobox: a typeable <select> (js/combobox.js, the "select" section).
 *
 * The search bar's own combobox is .cbx-* in app.css; this is the generic one,
 * .bcb-*, for every other select. Colours come from custom properties so the
 * same control sits on a white form and on the green header or hero: set
 * .bcb-dark (or data-combobox="dark" on the select) and only the closed box
 * changes; the open list stays white, because a list of forty options is
 * read, and reading is easier dark-on-light.
 *
 * Phone first: 48px box, 16px text (iOS zooms into anything smaller when
 * focused), options at least 44px tall, and a list height the script works
 * out from the visual viewport (--bcb-max) so it never hides behind the
 * on-screen keyboard.
 */

.bcb{
  --bcb-bg:var(--card);
  --bcb-fg:var(--ink);
  --bcb-border:var(--line-2);
  --bcb-placeholder:var(--faint);
  --bcb-focus:var(--petrol);
  --bcb-icon:var(--muted);
  --bcb-list-bg:var(--card);
  --bcb-list-fg:var(--ink);
  --bcb-list-border:var(--line);
  --bcb-active-bg:var(--petrol-soft);
  --bcb-active-fg:var(--petrol-deep);
  --bcb-mark:var(--petrol);
  --bcb-group-fg:var(--muted);
  --bcb-radius:var(--r-sm);
  --bcb-height:48px;
  position:relative;
  display:block;
  width:100%;
}
.bcb-dark{
  --bcb-bg:rgba(255,255,255,.08);
  --bcb-fg:#fff;
  --bcb-border:rgba(255,255,255,.3);
  --bcb-placeholder:rgba(255,255,255,.72);
  --bcb-focus:var(--coral);
  --bcb-icon:rgba(255,255,255,.8);
}

/* The real select: still in the form, still posted, never seen. Not
   display:none, so native validation can still find it. */
.bcb-native{
  position:absolute!important;width:1px!important;height:1px!important;
  margin:0!important;padding:0!important;border:0!important;
  opacity:0!important;pointer-events:none!important;overflow:hidden;
  clip:rect(0 0 0 0);
}

.bcb-input{
  display:block;
  width:100%;
  box-sizing:border-box;
  min-height:var(--bcb-height);
  padding:11px 46px 11px 14px;
  border:1px solid var(--bcb-border);
  border-radius:var(--bcb-radius);
  background:var(--bcb-bg);
  color:var(--bcb-fg);
  font:inherit;
  font-size:16px;
  line-height:1.4;
  text-overflow:ellipsis;
  transition:border-color .15s var(--ease,ease),box-shadow .15s var(--ease,ease);
}
/* Room for the chevron even where a form's own rule pads every text input
   (.fld input[type="text"] in reivindicar.css outranks a single class). */
.bcb .bcb-input.bcb-input{padding-right:46px}

/* The select was a `.input` (app.css: 44px, 1.5px border): the box takes the
   same measures, so a typeable field and a native select sitting in one row
   of filters line up. */
.bcb-compact{--bcb-height:44px;--bcb-border:var(--line)}
.bcb-compact .bcb-input{border-width:1.5px;padding-top:9px;padding-bottom:9px}

.bcb-input::placeholder{color:var(--bcb-placeholder);opacity:1}
.bcb-input:hover{border-color:var(--bcb-focus)}
.bcb-input:focus{
  outline:none;
  border-color:var(--bcb-focus);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--bcb-focus) 22%,transparent);
}
.bcb-input:focus-visible{outline:none}
.bcb-input:disabled{opacity:.55;cursor:not-allowed}

.bcb-toggle{
  position:absolute;top:0;right:0;
  width:44px;height:var(--bcb-height);
  display:grid;place-items:center;
  padding:0;border:0;background:none;
  color:var(--bcb-icon);cursor:pointer;
}
.bcb-toggle svg{width:18px;height:18px;transition:transform .15s var(--ease,ease)}
.bcb.is-open .bcb-toggle svg{transform:rotate(180deg)}

.bcb-list{
  position:absolute;
  z-index:60;
  top:calc(100% + 6px);
  left:0;right:0;
  max-height:var(--bcb-max,320px);
  margin:0;padding:6px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  list-style:none;
  background:var(--bcb-list-bg);
  color:var(--bcb-list-fg);
  border:1px solid var(--bcb-list-border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-2);
}
.bcb-list[hidden]{display:none}
.bcb-up .bcb-list{top:auto;bottom:calc(100% + 6px)}

.bcb-group{list-style:none}
.bcb-group + .bcb-group{margin-top:4px;padding-top:4px;border-top:1px solid var(--bcb-list-border)}
.bcb-group-label{
  display:block;padding:10px 12px 4px;
  font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--bcb-group-fg);
}
.bcb-group-list{margin:0;padding:0;list-style:none}

.bcb-option{
  position:relative;
  display:flex;align-items:center;
  min-height:44px;
  padding:10px 36px 10px 12px;
  border-radius:var(--r-sm);
  font-size:15.5px;line-height:1.35;
  cursor:pointer;
}
.bcb-option:hover,
.bcb-option.is-active{background:var(--bcb-active-bg);color:var(--bcb-active-fg)}
.bcb-option[aria-selected="true"]{font-weight:600}
/* The current choice: a check, drawn, so it does not depend on a font. */
.bcb-option[aria-selected="true"]::after{
  content:"";position:absolute;right:14px;top:50%;
  width:6px;height:11px;margin-top:-7px;
  border:solid var(--bcb-mark);border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.bcb-option[aria-disabled="true"]{opacity:.45;cursor:not-allowed;background:none}
.bcb-empty{padding:12px;font-size:14.5px;color:var(--muted)}

/* .bcb-status is in the .vh group in app.css. */

@media (prefers-reduced-motion:reduce){
  .bcb-input,.bcb-toggle svg{transition:none}
}