/* v0.6.7.68 — Runtime-independent Material-like UI contract ---------------
   This file is the canonical visual contract for input/select/textarea/file.
   Runtime surfaces should only provide semantics; visuals come from these
   tokens and component classes. */

:root {
  --kh-control-height: 52px;
  --kh-control-min-height: var(--kh-control-height);
  --kh-control-textarea-min-height: 104px;
  --kh-control-radius: 16px;
  --kh-control-pad-x: 14px;
  --kh-control-pad-y: 10px;
  --kh-control-gap: 10px;
  --kh-control-icon: 36px;
  --kh-control-chevron: 30px;
  --kh-control-font-size: 14px;
  --kh-control-font-weight: 720;
  --kh-control-label-size: 12px;
  --kh-control-border: rgba(207, 216, 230, .15);
  --kh-control-border-hover: rgba(207, 216, 230, .25);
  --kh-control-border-focus: rgba(185, 132, 255, .58);
  --kh-control-bg-top: rgba(255,255,255,.055);
  --kh-control-bg-bottom: rgba(255,255,255,.016);
  --kh-control-bg-base-top: rgba(16, 23, 34, .98);
  --kh-control-bg-base-bottom: rgba(10, 15, 24, .99);
  --kh-control-bg: linear-gradient(180deg, var(--kh-control-bg-top), var(--kh-control-bg-bottom)), linear-gradient(180deg, var(--kh-control-bg-base-top), var(--kh-control-bg-base-bottom));
  --kh-control-bg-hover: linear-gradient(180deg, rgba(255,255,255,.068), rgba(255,255,255,.018)), linear-gradient(180deg, rgba(19, 27, 40, .99), rgba(11, 16, 25, .99));
  --kh-control-bg-focus: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02)), linear-gradient(180deg, rgba(20, 28, 43, .99), rgba(12, 18, 29, .99));
  --kh-control-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.18);
  --kh-control-shadow-hover: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.16);
  --kh-control-shadow-focus: 0 0 0 4px var(--kh-md-focus, rgba(185,132,255,.18)), inset 0 1px 0 rgba(255,255,255,.065), 0 12px 30px rgba(0,0,0,.18);
  --kh-control-placeholder: rgba(199, 209, 225, .48);
  --kh-control-muted: rgba(199, 209, 225, .72);
  --kh-control-text: var(--kh-md-text, var(--text, #f4f6fb));
  --kh-control-transition: border-color .18s var(--kh-ease-premium, ease), background .18s var(--kh-ease-premium, ease), box-shadow .18s var(--kh-ease-premium, ease), color .18s var(--kh-ease-premium, ease), transform .18s var(--kh-ease-premium, ease);
}

html[data-density="compact"] {
  --kh-control-height: 44px;
  --kh-control-textarea-min-height: 82px;
  --kh-control-radius: 14px;
  --kh-control-pad-x: 12px;
  --kh-control-pad-y: 8px;
  --kh-control-gap: 8px;
  --kh-control-icon: 32px;
  --kh-control-chevron: 28px;
  --kh-control-font-size: 13px;
}

html[data-density="default"] {
  --kh-control-height: 52px;
  --kh-control-textarea-min-height: 104px;
  --kh-control-radius: 16px;
  --kh-control-pad-x: 14px;
  --kh-control-pad-y: 10px;
  --kh-control-gap: 10px;
  --kh-control-icon: 36px;
  --kh-control-chevron: 30px;
  --kh-control-font-size: 14px;
}

html[data-density="comfortable"] {
  --kh-control-height: 60px;
  --kh-control-textarea-min-height: 128px;
  --kh-control-radius: 18px;
  --kh-control-pad-x: 16px;
  --kh-control-pad-y: 12px;
  --kh-control-gap: 12px;
  --kh-control-icon: 40px;
  --kh-control-chevron: 32px;
  --kh-control-font-size: 15px;
}

:where(.field, .command-field, .command-arg-field, .worker-page-arg-field) {
  gap: 8px;
}

:where(.field > span, .command-field > span, .command-arg-label, .worker-page-arg-field label, .field > label) {
  color: rgba(242, 246, 252, .92) !important;
  font-size: var(--kh-control-label-size);
  font-weight: 900;
  letter-spacing: .055em;
  text-transform: uppercase;
}

/* One canonical surface for all text-like controls. */
:where(.command-control, .ui-control[data-ui-variant="field"], .ui-control-input, .ui-control-search, .ui-control-url, .ui-control-password, .ui-control-number, .ui-control-textarea) {
  min-height: var(--kh-control-height) !important;
  border: 1px solid var(--kh-control-border) !important;
  border-radius: var(--kh-control-radius) !important;
  background: var(--kh-control-bg) !important;
  box-shadow: var(--kh-control-shadow) !important;
  transition: var(--kh-control-transition) !important;
  overflow: hidden;
}

:where(.command-control, .ui-control[data-ui-variant="field"], .ui-control-input, .ui-control-search, .ui-control-url, .ui-control-password, .ui-control-number, .ui-control-textarea):hover {
  border-color: var(--kh-control-border-hover) !important;
  background: var(--kh-control-bg-hover) !important;
  box-shadow: var(--kh-control-shadow-hover) !important;
}

:where(.command-control, .ui-control[data-ui-variant="field"], .ui-control-input, .ui-control-search, .ui-control-url, .ui-control-password, .ui-control-number, .ui-control-textarea):focus-within {
  border-color: var(--kh-control-border-focus) !important;
  background: var(--kh-control-bg-focus) !important;
  box-shadow: var(--kh-control-shadow-focus) !important;
}

:where(.command-control > .command-control-element, .ui-control > .ui-control-element, .config-editor-input.ui-control-element, input[data-ui-component="search"], input[data-ui-component="input"], textarea[data-ui-component="textarea"]) {
  min-height: calc(var(--kh-control-height) - 2px) !important;
  width: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--kh-control-text) !important;
  -webkit-text-fill-color: var(--kh-control-text) !important;
  font-size: var(--kh-control-font-size) !important;
  font-weight: var(--kh-control-font-weight) !important;
  line-height: 1.35;
  padding: 0 var(--kh-control-pad-x) !important;
}

:where(.command-control > textarea.command-control-element, .ui-control-textarea > textarea.ui-control-element, textarea.ui-control-element) {
  min-height: var(--kh-control-textarea-min-height) !important;
  padding: var(--kh-control-pad-y) var(--kh-control-pad-x) !important;
  resize: vertical;
}

:where(.command-control > .command-control-element, .ui-control > .ui-control-element)::placeholder {
  color: var(--kh-control-placeholder) !important;
  -webkit-text-fill-color: var(--kh-control-placeholder) !important;
}

/* Select has exactly one outer surface; the internal trigger is content-only. */
:where(.ui-select-root, [data-ui-component="select"]) {
  min-height: var(--kh-control-height) !important;
  border: 1px solid var(--kh-control-border) !important;
  border-radius: var(--kh-control-radius) !important;
  background: var(--kh-control-bg) !important;
  box-shadow: var(--kh-control-shadow) !important;
  transition: var(--kh-control-transition) !important;
  overflow: visible !important;
}

:where(.ui-select-root, [data-ui-component="select"]):hover {
  border-color: var(--kh-control-border-hover) !important;
  background: var(--kh-control-bg-hover) !important;
  box-shadow: var(--kh-control-shadow-hover) !important;
}

:where(.ui-select-root, [data-ui-component="select"]):focus-within,
:where(.ui-select-root, [data-ui-component="select"]):has(.ui-select-picker.is-open) {
  border-color: var(--kh-control-border-focus) !important;
  background: var(--kh-control-bg-focus) !important;
  box-shadow: var(--kh-control-shadow-focus) !important;
}

:where(.ui-select-button, .command-preset-picker-button) {
  min-height: calc(var(--kh-control-height) - 2px) !important;
  grid-template-columns: var(--kh-control-icon) minmax(0, 1fr) var(--kh-control-chevron) !important;
  gap: var(--kh-control-gap) !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 var(--kh-control-pad-x) !important;
  color: var(--kh-control-text) !important;
}

:where(.ui-select-button, .command-preset-picker-button):hover,
:where(.ui-select-button, .command-preset-picker-button):focus-visible,
.ui-select-picker.is-open :where(.ui-select-button, .command-preset-picker-button) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

:where(.ui-select-icon, .command-preset-picker-icon) {
  width: var(--kh-control-icon) !important;
  height: var(--kh-control-icon) !important;
  border: 1px solid rgba(207,216,230,.12) !important;
  border-radius: calc(var(--kh-control-radius) - 4px) !important;
  background: rgba(185, 132, 255, .12) !important;
  color: var(--kh-md-brand, #b984ff) !important;
  box-shadow: none !important;
}

:where(.ui-select-copy strong, .command-preset-picker-copy strong) {
  color: var(--kh-control-text) !important;
  font-size: var(--kh-control-font-size) !important;
  font-weight: 860 !important;
  letter-spacing: -.01em;
}

:where(.ui-select-copy small, .command-preset-picker-copy small) {
  color: var(--kh-control-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

:where(.ui-select-chevron) {
  width: var(--kh-control-chevron) !important;
  height: var(--kh-control-chevron) !important;
  border: 1px solid rgba(207, 216, 230, .10) !important;
  border-radius: calc(var(--kh-control-radius) - 5px) !important;
  background: rgba(255,255,255,.045) !important;
  color: rgba(243, 240, 255, .76) !important;
  rotate: 0deg;
  transition: rotate .22s cubic-bezier(.2,.7,.2,1), background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.ui-select-picker.is-open :where(.ui-select-chevron),
.command-preset-picker.is-open :where(.ui-select-chevron) {
  rotate: 180deg;
  color: #fff !important;
  border-color: rgba(185, 132, 255, .26) !important;
  background: linear-gradient(180deg, rgba(185,132,255,.18), rgba(255,255,255,.035)) !important;
  box-shadow: 0 10px 22px rgba(88, 36, 163, .18) !important;
}

:where(.ui-select-chevron::before) {
  transform: translateY(-2px) rotate(45deg) !important;
}

.ui-select-picker.is-open :where(.ui-select-chevron::before),
.command-preset-picker.is-open :where(.ui-select-chevron::before) {
  transform: translateY(-2px) rotate(45deg) !important;
}

/* Topbar search is a composed field: one shell, no nested runtime surface. */
.search-shell {
  min-height: var(--kh-control-height) !important;
  border-radius: var(--kh-control-radius) !important;
  background: var(--kh-control-bg) !important;
  border-color: var(--kh-control-border) !important;
  box-shadow: var(--kh-control-shadow) !important;
}

.search-shell:hover {
  border-color: var(--kh-control-border-hover) !important;
  background: var(--kh-control-bg-hover) !important;
  box-shadow: var(--kh-control-shadow-hover) !important;
}

.search-shell:focus-within {
  border-color: var(--kh-control-border-focus) !important;
  background: var(--kh-control-bg-focus) !important;
  box-shadow: var(--kh-control-shadow-focus) !important;
}

.search-shell > :where(.ui-control, .command-control, .ui-control-search, .command-control-input) {
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.search-shell :where(input, .ui-control-element, .command-control-element) {
  min-height: calc(var(--kh-control-height) - 2px) !important;
  padding: 0 !important;
}

.search-shell kbd {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding-left: var(--kh-control-pad-x);
  border-left: 1px solid rgba(207,216,230,.10);
  color: rgba(199, 209, 225, .58) !important;
}

/* Native controls that have not been componentized yet still follow tokens. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select):not(.ui-native-select):not(.ui-native-file):not(.command-control-element):not(.ui-control-element) {
  min-height: var(--kh-control-height);
  border-radius: var(--kh-control-radius);
  border: 1px solid var(--kh-control-border);
  background: var(--kh-control-bg);
  color: var(--kh-control-text);
  font-size: var(--kh-control-font-size);
  padding: 0 var(--kh-control-pad-x);
}

@media (prefers-reduced-motion: reduce), (update: slow) {
  :where(.command-control, .ui-control, .ui-select-root, .ui-select-button, .command-preset-picker-button, .ui-select-chevron, .ui-select-chevron) {
    transition-duration: .01ms !important;
  }
}

/* v0.8.4 — select chevron contract ---------------------------------------
   Registry-backed selects own exactly one visible dropdown affordance: the
   dedicated .ui-select-chevron element. The old .command-control-select::after
   pseudo-chevron is kept only for non-registry legacy shells and must never
   render on .ui-select-root. */
.ui-select-root.command-control-select::after,
.ui-select-root.ui-control-select::after,
[data-ui-component="select"].command-control-select::after {
  content: none !important;
  display: none !important;
}

.ui-select-root .ui-select-button,
.ui-select-root .command-preset-picker-button {
  position: relative;
}

.ui-select-root .ui-select-chevron {
  flex: 0 0 var(--kh-control-chevron);
}