/* TsBot — the dropdown of the site and of the panel (tsb-select.js builds it; read its header first).
   Tokens, radius and focus ring are the design system's (ds.css). Three parts:
     1. the closed control (.tsb-sel), the next sibling of its <select>;
     2. the shape it takes in each container, the same the <select> had there (panel forms and dialogs, the order form
        and sign-up, the configurator, the bot's fields, the superuser's pickers, the tickets, the account switch);
     3. the open list (.tsb-pop), a child of <body> or of the open <dialog>: position fixed, its place set by the script.
   Layers: above the header (.nav, 40), below the toasts (.pn-toast, 50) and the tooltips (.tip, 70). */

:root { --tsb-on: 1; }        /* the script does nothing without this sheet (the native <select> stays) */

/* the select once its control exists: clipped, never display:none (it stays in its form and can be asked to focus) */
select[data-tsb] { position: absolute !important; width: 1px !important; min-width: 0 !important; height: 1px !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; overflow: hidden !important;
  clip-path: inset(50%) !important; pointer-events: none !important; }

/* ───────── 1. the closed control ───────── */
.tsb-sel { --tsb-r: 12px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; max-width: 100%; margin: 0;
  padding: 12px 14px; border: 1px solid var(--line-3); border-radius: var(--tsb-r); background: var(--s1); color: var(--strong);
  font: 400 16px/1.35 var(--sans); letter-spacing: 0; text-align: left; text-transform: none; cursor: pointer; -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent; transition: border-color .15s, box-shadow .15s; }
.tsb-sel[hidden] { display: none; }
/* the value and, under it, the longest option (invisible): the control is as wide as its longest option, like the
   native one, and a long value ends in «…» instead of leaving the control */
.tsb-sel-b { flex: 1 1 auto; display: grid; min-width: 0; }
.tsb-sel-v, .tsb-sel-w { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsb-sel-w { height: 0; visibility: hidden; }
.tsb-sel.is-ph .tsb-sel-v { color: var(--mut); }
.tsb-sel svg, .tsb-pop svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tsb-sel > svg { color: var(--dim); transition: transform .16s, color .15s; }
.tsb-sel:hover:not(:disabled) > svg { color: var(--soft); }
.tsb-sel:focus, .tsb-sel[aria-expanded="true"] { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(255, 90, 51, .16); }
.tsb-sel:focus-visible { outline: none; border-radius: var(--tsb-r); }
.tsb-sel[aria-expanded="true"] > svg { transform: rotate(180deg); color: var(--acc-text); }
.tsb-sel:disabled { opacity: .6; cursor: not-allowed; }
.tsb-sel.is-bad { border-color: var(--acc-line); }

/* ───────── 2. the shape of each container ───────── */
/* panel forms; the generic dialog and the filters (.pn-field-sm): 46 px, a pill */
.pn-field-sm .tsb-sel { --tsb-r: 999px; height: 46px; padding: 0 14px 0 17px; font-size: 15px; }
/* the order form and sign-up; the error is on the wrapper */
.rq-field .tsb-sel { padding: 13px 15px; }
.rq-field.is-bad .tsb-sel { border-color: #c2412a; box-shadow: 0 0 0 3px rgba(217, 54, 12, .16); }
/* the configurator (/pricing and «+ New service») */
.tsc .tsc-field .tsb-sel { padding: 12px 14px; border-color: var(--line-2); background: rgba(7, 11, 16, .7); color: var(--fg); font: inherit; }
.tsc .tsc-field .tsb-sel:disabled { opacity: .7; }
/* the bot's fields: the box (.cb-in) carries the border and the ring, and the list hangs from the box */
.cb-in .tsb-sel { --tsb-r: 10px; --tsb-anchor: parent; flex: 1; width: auto; height: 44px; padding: 0; border: 0; background: transparent; box-shadow: none; font: 400 15px/1.2 var(--sans); }
.cb-in .tsb-sel:focus, .cb-in .tsb-sel[aria-expanded="true"] { box-shadow: none; }
.cb-in .tsb-sel:disabled { opacity: 1; color: var(--mut); }
/* the superuser's instance pickers */
.ao-picker .tsb-sel { --tsb-r: 999px; width: auto; min-width: 240px; padding: 10px 12px 10px 15px; font: 500 14px/1.2 var(--sans); }
.nv-picker .tsb-sel { min-width: 280px; background-color: rgba(10, 16, 23, .92); }
.nv-picker .tsb-sel:disabled { opacity: .45; }
/* the tickets (select.tkt-in): the error class is on the select, the control repeats it */
select.tkt-in + .tsb-sel { min-height: 48px; border-color: var(--line-2); color: var(--fg); font: 400 15px/1.4 var(--sans); }
select.tkt-in + .tsb-sel:focus, select.tkt-in + .tsb-sel[aria-expanded="true"] { border-color: var(--acc); }
select.tkt-in + .tsb-sel.is-bad { border-color: var(--acc-line); }
/* the account switch of the panel's header */
select.pc-switch + .tsb-sel { --tsb-r: 999px; width: auto; max-width: 260px; padding: 10px 12px 10px 15px; background-color: rgba(10, 16, 23, .92); font: 500 14px/1.2 var(--sans); }
@media (max-width: 700px) {
  .ao-picker .tsb-sel, .nv-picker .tsb-sel { width: 100%; min-width: 0; }
  select.pc-switch + .tsb-sel { max-width: 100%; }
}

/* ───────── 3. the open list ───────── */
.tsb-pop { box-sizing: border-box; position: fixed; z-index: 45; left: 0; top: 0; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 6px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: linear-gradient(180deg, #111b25, var(--s2));
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05); color: var(--fg);
  font: 400 14.5px/1.3 var(--sans); letter-spacing: 0; text-align: left; text-transform: none; cursor: default; animation: tsbIn .12s ease-out; }
.tsb-pop.is-up { animation-name: tsbUp; }
.tsb-pop.is-sheet { padding: 8px; border-radius: var(--r-lg); animation-name: tsbSheet; }
.tsb-scrim { position: fixed; z-index: 44; inset: 0; background: rgba(4, 7, 11, .62); }
@keyframes tsbIn { from { opacity: 0; transform: translateY(-4px); } }
@keyframes tsbUp { from { opacity: 0; transform: translateY(4px); } }
@keyframes tsbSheet { from { opacity: 0; transform: translateY(14px); } }
/* on the sheet, what is being chosen (the sheet covers the control and its label) */
.tsb-pop-t { flex: none; padding: 4px 6px 10px; color: var(--soft); font: 600 13px/1.3 var(--sans); overflow-wrap: anywhere; }
.tsb-pop-q { position: relative; flex: none; display: flex; align-items: center; margin: 0 0 6px; }
.tsb-pop-q > svg { position: absolute; left: 12px; color: var(--dim); pointer-events: none; }
.tsb-q { box-sizing: border-box; width: 100%; min-width: 0; height: 42px; margin: 0; padding: 0 12px 0 36px; border: 1px solid var(--line-2); border-radius: 10px;
  background: rgba(7, 11, 16, .7); color: var(--strong); font: 400 15px/1.2 var(--sans); outline: none; -webkit-appearance: none; appearance: none; }
.tsb-q::placeholder { color: var(--dim); opacity: 1; }
.tsb-q:focus, .tsb-q:focus-visible { outline: none; border-radius: 10px; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(255, 90, 51, .16); }
.tsb-list { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.tsb-opt { box-sizing: border-box; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 10px; color: var(--fg); cursor: pointer; }
.tsb-opt + .tsb-opt { margin-top: 2px; }
.tsb-opt[hidden], .tsb-grp[hidden], .tsb-none[hidden] { display: none; }
/* a long option wraps inside the list: never outside it, never cut */
.tsb-opt-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tsb-opt > svg { color: var(--acc); }
.tsb-opt.is-cur { color: var(--strong); }
.tsb-opt.is-act { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--strong); }
.tsb-opt.is-cur.is-act { background: var(--acc-soft); box-shadow: inset 0 0 0 1px var(--acc-line); }
.tsb-opt[aria-disabled="true"] { opacity: .5; cursor: default; }
.tsb-cap { padding: 10px 12px 5px; font: 500 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); overflow-wrap: anywhere; }
.tsb-grp + .tsb-grp, .tsb-opt + .tsb-grp { margin-top: 4px; border-top: 1px solid var(--line-soft); }
.tsb-none { flex: none; padding: 14px 12px; color: var(--mut); font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .tsb-q { height: 46px; font-size: 16px; }         /* 16 px: a smaller field makes iOS zoom the page on focus */
  .tsb-opt { min-height: 44px; }
}
@media (pointer: coarse) { .tsb-opt { min-height: 44px; } }