/* Select: the same chrome as TextInput, spelled out here rather than shared, because one
   component owns one stylesheet and a reader of this file should not have to open another.
   The control itself keeps the browser's own arrow: it is the affordance people know. */
.select {
  display: grid;
  gap: var(--space-2);
  /* As text-input.css's: a taller box leaves its room below, never between label and control. */
  align-content: start;
}

.select-label {
  color: var(--color-muted);
  font-size: var(--text-label);
}

.select-required {
  color: var(--color-muted);
  margin-left: var(--space-1);
}

.select-control {
  box-sizing: border-box;
  width: 100%;
  height: var(--control-height);
  font: inherit;
  font-size: var(--text-md);
  color: var(--color-ink);
  background: var(--color-surface);
  border: var(--hairline) solid var(--color-field-line);
  border-radius: var(--radius);
  padding: 0 var(--space-3);
}

.select-control:focus {
  border-color: var(--color-ink);
  outline: var(--hairline) solid var(--color-ink);
  outline-offset: 0;
}

.select-control[disabled] {
  color: var(--color-muted);
  background: transparent;
  cursor: default;
}

.select-invalid .select-control {
  border-color: var(--color-danger);
}

.select-invalid .select-control:focus {
  outline-color: var(--color-danger);
}

.select-hint {
  color: var(--color-muted);
  font-size: var(--text-label);
  margin: 0;
}

.select-error {
  color: var(--color-danger);
  font-size: var(--text-label);
  margin: 0;
}

/* ---- the compact forms (17 Oct 2026, the polish round) ----
   A table row's or a toolbar's select: the control alone, at the artboards' 30 px, the field's
   3:1 hairline, the row's small type. Its label is its accessible name, so nothing stands above it
   and a row of controls is one height. */
.select-compact {
  display: inline-grid;
  vertical-align: middle;
  gap: var(--space-1);
}

/* Its own width, the widest answer's, never the column's: a <select> cannot end its value in an
   ellipsis (Chromium ignores text-overflow on it), so a box narrower than its words cuts them
   mid-word ("where the sheet adc"). Capped at what it sits in. */
.select-compact .select-control {
  width: auto;
  max-width: 100%;
  height: var(--control-height-compact);
  font-size: var(--text-label);
  padding: 0 var(--space-2);
  border-radius: var(--radius);
}

/* Add: a short dashed box in mono capitals, its first option the verb ("+ METHOD"), for adding a
   chip beside the chips already there. */
.select-add {
  display: inline-grid;
  justify-self: start;
}

.select-add .select-control {
  width: auto;
  height: var(--control-height-add);
  border-style: dashed;
  border-radius: var(--radius-chip);
  color: var(--color-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.select-add .select-control:hover:not([disabled]) {
  color: var(--color-ink);
}

/* Inline: a roster's cell. No box until the focus is on it (the pointer only darkens it), the value
   in mono, so a column of them reads as values; the page adds its own weights (given here, from
   above). */
.select-inline .select-control {
  width: auto;
  max-width: 100%;
  border-color: transparent;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--text-mono-number-sm);
}

.select-inline .select-control:hover:not([disabled]) {
  color: var(--color-ink);
  cursor: pointer;
}

.select-inline .select-control:focus {
  border-color: var(--color-ink);
  background: var(--color-surface);
}

/* On the ground (a lip, the selection bar): the box in the ground's inks. */
.on-ground .select-control {
  background: transparent;
  color: var(--color-on-ground);
  border-color: var(--color-on-ground-muted);
}

.on-ground .select-control option {
  color: var(--color-shell-ink);
  background: var(--color-shell);
}

/* On a phone a select under 16 px is zoomed into when it takes the focus. */
@media (max-width: 40rem) {
  .select-compact:not(.select-add) .select-control {
    font-size: var(--text-md);
  }
}