/* Dropdowns on the public pages (select-ui.js): the closed control and its floating list, in Telemetry — charcoal well,
 * hairline border, 6px corners, one amber signal (the highlighted row's bar, the chosen row's tick, the focus ring).
 * Every value is a --uis-* token. The defaults read the site theme (Telemetry's --tm-*, the Studio adapter's --st-*,
 * dark fallbacks for Night); pages that draw their own themes map the tokens to theirs below (.md model pages,
 * .dd Developer Guide), so all five themes work. The list is moved to <body> when it opens and select-ui.js copies the
 * tokens onto it, so it looks the same wherever its page put the control. */

.uis {
  --uis-bg: var(--tm-well, var(--st-paper, rgb(255 255 255 / .05)));
  --uis-panel: var(--tm-panel-2, var(--st-soft, #141417));
  --uis-line: var(--tm-line-hi, var(--st-line2, rgb(255 255 255 / .14)));
  --uis-line-hi: var(--st-muted, rgb(255 255 255 / .3));
  --uis-ink: var(--tm-ink, var(--st-ink, #ffffff));
  --uis-muted: var(--tm-muted, var(--st-muted, #9ca3af));
  --uis-acc: var(--st-blue, #3b82f6);
  --uis-acc-rgb: var(--studio-rgb-blue, 59 130 246);
  --uis-r: var(--tm-r-sm, 12px);
  --uis-shadow: 0 0 0 1px rgb(0 0 0 / .35), 0 24px 48px -20px rgb(0 0 0 / .85);
  --uis-font: var(--ft-sans, 'Manrope', 'Inter', system-ui, sans-serif);
  --uis-size: 14px;
  --uis-h: 46px;
  --uis-pad: 16px;
  --uis-weight: 400;
  position: relative; display: inline-block; vertical-align: middle; max-width: 100%;
}
.uis.uis-block { display: block; width: 100%; }

/* Pages with their own token sets */
.md .uis {
  --uis-bg: var(--md-well); --uis-panel: var(--md-panel2); --uis-line: var(--md-line2); --uis-line-hi: var(--md-line3);
  --uis-ink: var(--md-ink); --uis-muted: var(--md-muted); --uis-acc: var(--md-acc); --uis-acc-rgb: var(--md-acc-rgb);
  --uis-r: var(--md-r-sm); --uis-font: var(--md-sans); --uis-size: 13.5px; --uis-h: 40px; --uis-pad: 12px;
}
.dd .uis {
  --uis-bg: var(--dd-well); --uis-panel: var(--dd-panel2); --uis-line: var(--dd-line3); --uis-line-hi: rgb(var(--dd-acc-rgb) / .6);
  --uis-ink: var(--dd-ink); --uis-muted: var(--dd-muted); --uis-acc: var(--dd-acc); --uis-acc-rgb: var(--dd-acc-rgb);
  --uis-r: var(--dd-r-sm); --uis-font: var(--dd-sans); --uis-size: 14.5px; --uis-h: 44px; --uis-pad: 14px; --uis-weight: 600;
}
/* Light themes cast a softer shadow */
html[data-theme="studio"]:not([data-final="telemetry"]):not([data-cloud="dark"]) .uis { --uis-shadow: 0 0 0 1px rgb(11 22 34 / .06), 0 18px 40px -18px rgb(11 22 34 / .35); }

/* The <select> keeps the value (and the form's validation) but isn't seen */
.uis > select.uis-native { position: absolute !important; left: 0; bottom: 0; width: 100% !important; height: 1px !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.uis-hide { display: none !important; }

/* The closed control */
.uis-box { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--uis-h); padding: 0 calc(var(--uis-pad) - 2px) 0 var(--uis-pad);
  border: 1px solid var(--uis-line); border-radius: var(--uis-r); background: var(--uis-bg); color: var(--uis-ink);
  font: var(--uis-weight) var(--uis-size)/1.3 var(--uis-font); text-align: left; cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: border-color .15s, box-shadow .15s; box-sizing: border-box;
  text-transform: none; letter-spacing: normal; word-spacing: normal; text-indent: 0; text-shadow: none; white-space: nowrap; }   /* like a form control: nothing inherited from a styled label */
.uis-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uis-box.is-placeholder .uis-val { color: var(--uis-muted); }
.uis-chev { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--uis-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s, stroke .15s; }
.uis-box:hover { border-color: var(--uis-line-hi); }
.uis-box:hover .uis-chev { stroke: var(--uis-ink); }
.uis .uis-box:focus { outline: none !important; }     /* its own focus state below (the site-wide [tabindex] outline would double it) */
.uis-box:focus-visible, .uis.is-open .uis-box { border-color: var(--uis-acc); box-shadow: 0 0 0 3px rgb(var(--uis-acc-rgb) / .18); }
.uis.is-open .uis-chev { transform: rotate(180deg); stroke: var(--uis-acc); }
.uis-box[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.uis-box[aria-invalid="true"] { border-color: var(--st-red, #f87171); }
.uis-err { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--st-red, #f87171); }
.uis-err[hidden] { display: none; }

/* The list */
.uis-list { position: fixed; z-index: 1000; margin: 0; padding: 6px; list-style: none; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--uis-line); border-radius: var(--uis-r); background: var(--uis-panel); box-shadow: var(--uis-shadow);
  font: 400 var(--uis-size)/1.35 var(--uis-font); color: var(--uis-ink); scrollbar-width: thin; scrollbar-color: var(--uis-line) transparent;
  animation: uis-in .12s ease-out; box-sizing: border-box; text-transform: none; letter-spacing: normal; text-align: left; }
.uis-list.is-up { animation-name: uis-up; }
.uis-list[hidden], .uis-opt[hidden] { display: none; }
@keyframes uis-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes uis-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.uis-opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 7px 10px 7px 14px; border-radius: calc(var(--uis-r) - 2px);
  cursor: pointer; color: var(--uis-ink); }
.uis-opt > span { flex: 1; min-width: 0; }
.uis-tick { flex: none; width: 15px; height: 15px; fill: none; stroke: var(--uis-acc); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.uis-opt[aria-selected="true"] { font-weight: 600; }
.uis-opt[aria-selected="true"] .uis-tick { visibility: visible; }
.uis-opt.is-active { background: rgb(var(--uis-acc-rgb) / .1); }
.uis-opt.is-active::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--uis-acc); }
.uis-opt[aria-disabled="true"] { color: var(--uis-muted); cursor: not-allowed; background: none; }
.uis-opt[aria-disabled="true"]::before { display: none; }

@media (forced-colors: active) {
  .uis-opt.is-active { outline: 2px solid Highlight; }
  .uis .uis-box:focus-visible { outline: 2px solid Highlight !important; }
}
@media (prefers-reduced-motion: reduce) { .uis-list, .uis-chev { animation: none; transition: none; } }