/* Searchable combobox that replaces the console's accept-language / time-zone <select> controls.
   Linked by web/index.html and by web/optionsearch-harness.html. Uses only the --* custom properties
   index.html already defines, so the light theme needs no rules of its own. */
.cbx{position:relative;width:100%}
.cbx-btn{display:flex;align-items:center;gap:8px;width:100%;text-align:left;cursor:pointer;
  font-family:var(--mono);font-size:12.5px;letter-spacing:normal;text-transform:none;color:var(--txt);
  background:var(--panel-2);border:1px solid var(--line-ctrl);border-radius:9px;padding:9px 11px;outline:0}
.cbx-btn:focus-visible,.cbx.open .cbx-btn{border-color:var(--amber)}
.cbx-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Visually hidden but present in the accessibility tree (unlike display:none, which strips it from
   both). Holds the trigger's opts.label so the button's accessible name is "<label> <value>" instead
   of just "button" — aria-label on the button itself would override its contents and silence the
   value entirely, which is the bug this class exists to avoid. */
.cbx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cbx-caret{flex:none;width:9px;height:9px;color:var(--dim);transition:transform .15s}
.cbx.open .cbx-caret{transform:rotate(180deg);color:var(--amber)}
/* text-transform:none and letter-spacing:normal are REQUIRED, not cosmetic: the popup lives inside
   <label class="sel">, which sets text-transform:lowercase AND letter-spacing:.04em for the option
   title. index.html cancels both for the <select> itself (#acceptlanguage,#timezone); the popup must
   cancel them too or every row reads "europe/berlin" / "your browser — …" and sits 0.46px looser
   than every other control in the console. */
.cbx-pop{position:absolute;z-index:40;top:calc(100% + 5px);left:0;right:0;text-transform:none;
  letter-spacing:normal;
  background:var(--panel);border:1px solid var(--line-ctrl);border-radius:10px;overflow:hidden;display:none;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.75)}
.cbx.up .cbx-pop{top:auto;bottom:calc(100% + 5px)}  /* flipped when there is no room below */
.cbx.open .cbx-pop{display:block}
.cbx-search{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.cbx-search svg{flex:none;width:13px;height:13px;color:var(--dim)}
/* The popup lives inside <label class="sel">, and index.html's inline <style> — linked AFTER this
   file — carries same-specificity rules that target this very <input>:
   `.sel select,.sel input{border:1px solid …;padding:9px 11px;…}` and
   `.sel select:focus,.sel input:focus{border-color:var(--amber)}`. On equal specificity the later
   rule wins, and index.html is later, so without extra specificity here the search field would
   render as a second, bordered ~36px box nested inside the popup's own border, with an amber ring
   on focus. `.cbx .cbx-search input…` is deliberately (0,2,1)/(0,3,1) — one class above `.sel
   input`/`.sel input:focus` — so this file's styling always wins regardless of link order. Not
   !important, and index.html is not touched: the fix lives entirely on this side. */
.cbx .cbx-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;padding:0;
  font-family:var(--mono);font-size:12.5px;color:var(--txt)}
.cbx .cbx-search input:focus{border-color:transparent}
.cbx-search input::placeholder{color:var(--dim)}
.cbx-clear{flex:none;background:transparent;border:0;cursor:pointer;color:var(--dim);
  font-family:var(--mono);font-size:14px;line-height:1;padding:2px 3px;display:none}
.cbx.filtering .cbx-clear{display:block}
.cbx-list{max-height:290px;overflow-y:auto;overscroll-behavior:contain;padding:4px 0}
.cbx-grp{position:sticky;top:0;z-index:1;background:var(--panel);padding:7px 11px 4px;font-weight:600;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.cbx-opt{display:flex;align-items:center;gap:9px;padding:6px 11px;cursor:pointer;
  font-family:var(--mono);font-size:12.5px;color:var(--txt)}
.cbx-opt .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbx-opt .meta{flex:none;color:var(--dim);font-size:11.5px}
.cbx-opt .tick{flex:none;width:11px;height:11px;color:var(--amber);opacity:0}
.cbx-opt[aria-selected="true"] .tick{opacity:1}
.cbx-opt[aria-selected="true"] .lbl{color:var(--amber)}
.cbx-opt.cur{background:rgba(255,180,84,.13)}
.cbx-opt mark{background:transparent;color:var(--amber);font-weight:600}
.cbx-fixed{border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:4px}
.cbx-empty{padding:14px 11px;color:var(--dim);font-family:var(--mono);font-size:12px}
.cbx-foot{display:flex;justify-content:space-between;gap:10px;padding:6px 11px;
  border-top:1px solid var(--line);background:var(--panel-2);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.03em;color:var(--dim)}
.cbx-foot kbd{font-family:var(--mono);font-size:10px;border:1px solid var(--line-ctrl);border-radius:4px;padding:0 4px;color:var(--muted)}