/* The dropdown (web/kit-select.js; docs/DESIGN-KIT.md): one control for every select of the site, its open list
   included, in both themes. Square, a 1 px hairline, the field's paper, the 7 x 7 pixel caret; the open list on card
   paper with a brass hairline along its top and a warm shade (never black), the chosen word in ink 500 after the 6 px
   green square, the word under the keys or the pointer boxed in ink. No radius, no pill, no gradient, no glow.
   Every colour is a --ks-* token with the site's own as its fallback, so a page with other tokens maps them once (the
   board does, in its own stylesheet). Loaded after every other stylesheet of the page. */

.ks {
  --ks-h: 42px;
  --ks-pad: 12px;
  --ks-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M0 2h1v1h-1zM6 2h1v1h-1zM1 3h1v1h-1zM5 3h1v1h-1zM2 4h1v1h-1zM4 4h1v1h-1zM3 5h1v1h-1z'/%3E%3C/svg%3E");
  position: relative;
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  /* whatever the label round it sets (capitals, tracking, a mono face) stops here */
  font: 400 14.5px/1.25 var(--ks-sans, var(--sans, sans-serif));
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  text-indent: 0;
  white-space: nowrap;
  color: var(--ks-ink, var(--ink));
}
.ks[hidden] { display: none; }

/* the select itself: laid over the control, unseen, still the page's (labels, focus, a test's selectOption) */
.ks > select.ks-src {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---- the control ---- */
.ks > .ks-btn {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: var(--ks-h);
  margin: 0;
  padding: 0 34px 0 var(--ks-pad);
  border: 1px solid var(--ks-edge, var(--field-edge));
  border-radius: 0;
  background: var(--ks-field, var(--field));
  box-shadow: none;
  color: var(--ks-ink, var(--ink));
  font: inherit;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s;
}
/* the chosen word over every option's words unseen (kit-select.js: .ks-gh, drawn from data-t), so the control is as wide
   as its longest one and a choice moves nothing beside it; a narrow place cuts the word with an ellipsis */
.ks-val { display: grid; grid-template-columns: minmax(0, 1fr); flex: 0 1 auto; min-width: 0; }
.ks-val > * { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ks-gh { visibility: hidden; }
.ks-gh::before { content: attr(data-t); }
.ks-wide .ks-val, .ks-bare .ks-val { flex: 1 1 auto; }
/* the caret: the kit's 7 x 7 rows at 2 px a cell, in the control's ink-2; turned over while the list is open */
.ks > .ks-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: var(--ks-caret-c, var(--ink-2));
  -webkit-mask: var(--ks-caret) center / 14px 14px no-repeat;
  mask: var(--ks-caret) center / 14px 14px no-repeat;
  pointer-events: none;
}
.ks[data-open] > .ks-btn::after { transform: scaleY(-1); }
.ks > .ks-btn:hover, .ks[data-open] > .ks-btn { border-color: var(--ks-ink, var(--ink)); }
.ks > .ks-btn:focus { outline: none; }
.ks > .ks-btn:focus-visible { outline: 2px solid var(--ks-focus, var(--green)); outline-offset: 2px; }
/* off: a dashed edge, the word muted, no caret */
.ks[data-disabled] > .ks-btn { cursor: not-allowed; color: var(--ks-muted, var(--muted)); background: transparent; border-style: dashed; border-color: var(--ks-edge-off, var(--ks-edge, var(--field-edge))); }
.ks[data-disabled] > .ks-btn::after { display: none; }
.ks[data-disabled] > .ks-btn { padding-right: var(--ks-pad); }
/* one choice only (agent001 with one agent): the name, nothing to open */
.ks[data-one] > .ks-btn { cursor: default; padding-right: var(--ks-pad); }
.ks[data-one] > .ks-btn::after { display: none; }
.ks[data-one] > .ks-btn:hover { border-color: var(--ks-edge, var(--field-edge)); }

/* ---- the open list (the top layer: no sheet's overflow cuts it) ---- */
.ks-list {
  display: none;
  position: fixed;
  inset: auto;
  z-index: 1000;
  box-sizing: border-box;
  width: max-content;
  min-width: 120px;
  max-width: calc(100vw - 32px);
  max-height: 360px;
  margin: 0;
  padding: 4px 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--ks-rule, var(--rule));
  border-top-color: var(--ks-brass-line, var(--brass-line, color-mix(in srgb, var(--brass) 55%, transparent)));
  border-radius: 0;
  background: var(--ks-card, var(--card, var(--paper)));
  box-shadow: 0 14px 28px -18px var(--ks-shade, var(--shade));
  color: var(--ks-ink, var(--ink));
  font: inherit;
  white-space: normal;
}
.ks-list.ks-on { display: block; }
/* a long list (agent001's models, the board's sorts) scrolls: a thin bar in the list's hairline on its own paper, not
   the system's grey one (scrollbar-* where it is known; the -webkit- parts for Safari, which ignores those) */
.ks-list { scrollbar-width: thin; scrollbar-color: var(--ks-rule, var(--rule)) transparent; }
.ks-list::-webkit-scrollbar { width: 6px; }
.ks-list::-webkit-scrollbar-track { background: transparent; }
.ks-list::-webkit-scrollbar-thumb { background: var(--ks-rule, var(--rule)); border-radius: 0; }
.ks-list::-webkit-scrollbar-thumb:hover { background: var(--ks-muted, var(--muted)); }
.ks-list[data-up] { border-top-color: var(--ks-rule, var(--rule)); border-bottom-color: var(--ks-brass-line, var(--brass-line, color-mix(in srgb, var(--brass) 55%, transparent))); box-shadow: 0 -14px 28px -18px var(--ks-shade, var(--shade)); }
.ks-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 14px 8px 12px;
  color: var(--ks-ink-2, var(--ink-2));
  line-height: 1.3;
  cursor: pointer;
}
.ks-opt[hidden] { display: none; }
/* the chosen word's place: the 6 px square, green on the chosen one */
.ks-opt::before { content: ""; flex: none; width: 6px; height: 6px; }
.ks-opt[aria-selected="true"] { color: var(--ks-ink, var(--ink)); font-weight: 500; }
.ks-opt[aria-selected="true"]::before { background: var(--ks-green, var(--green)); }
/* the word under the keys or the pointer: boxed in ink */
.ks-opt.ks-act { color: var(--ks-ink, var(--ink)); background: var(--ks-hover, var(--hover)); box-shadow: inset 0 0 0 1px var(--ks-ink, var(--ink)); }
.ks-opt[aria-disabled="true"] { color: var(--ks-muted, var(--muted)); cursor: not-allowed; }
.ks-opt[aria-disabled="true"].ks-act { box-shadow: none; }
.ks-t { min-width: 0; overflow-wrap: anywhere; }

/* ---- variants (the select's data-ks) ---- */
/* sm: a toolbar's or a row's, 34 px */
.ks-sm { --ks-h: 34px; --ks-pad: 10px; font-size: 13.5px; }
.ks-sm > .ks-btn { padding-right: 30px; }
.ks-sm > .ks-btn::after { right: 8px; }
/* wide: the whole of its cell, or the rest of its row (on a line of its own under 220 px) */
.ks-wide { display: flex; width: 100%; flex: 1 1 220px; }
/* mono: model names and ids */
.ks-mono { font-family: var(--ks-mono, var(--mono, monospace)); font-size: 13.5px; }
/* bare: words in a sentence, the caret after them */
.ks-bare > .ks-btn { min-height: 0; padding: 0 20px 0 0; border: 0; background: transparent; font-weight: 600; }
.ks-bare > .ks-btn::after { right: 0; }
.ks-bare[data-disabled] > .ks-btn, .ks-bare[data-one] > .ks-btn { padding-right: 0; }
/* pick: a header's picker (agent001's agent) */
.ks-pick { --ks-h: 40px; --ks-pad: 14px; max-width: min(340px, 100%); font-size: 15px; }
.ks-pick > .ks-btn { padding-right: 36px; font-weight: 500; }
.ks-pick > .ks-btn::after { right: 12px; }

/* ---- where a select sits (the places with no switch of their own) ---- */
/* the account pages (Go mode, /stocks): their fields' hairline (.acct input), so a select beside a field draws the same
   edge; off, still the kit's dashed field edge */
.acct .ks { --ks-edge: var(--rule); --ks-edge-off: var(--field-edge); }
/* a row of a field, the select and a button: one height */
.row > .ks { align-self: stretch; }
/* Tools > Use tools' Pays from */
.tl-payer .ks { max-width: 260px; }
/* Tools > Sell your API's form: its fields' height */
.ax-grid .ks { --ks-h: 46px; }
@media (max-width: 640px) {
  .tl-payer .ks { width: 100%; max-width: none; }
  .se-tools .ag-sort .ks { flex: 1 1 auto; }
  .ks-pick { width: 100%; max-width: none; --ks-h: 44px; }
}

/* ---- a touch screen: 44 px to hit, 16 px words (a phone zooms in on a smaller field) ---- */
@media (pointer: coarse) {
  .ks { font-size: 16px; }
  .ks > .ks-btn { min-height: max(44px, var(--ks-h)); }
  .ks-bare > .ks-btn { min-height: 44px; }
  .ks-opt { min-height: 44px; }
}

/* ---- forced colours: the system's own ---- */
@media (forced-colors: active) {
  .ks > .ks-btn, .ks-list { border-color: CanvasText; }
  .ks > .ks-btn::after { background: CanvasText; }
  .ks-opt[aria-selected="true"]::before { background: CanvasText; forced-color-adjust: none; }
  .ks-opt.ks-act { outline: 2px solid Highlight; outline-offset: -2px; }
}