label {
  display: inline-block;
  font-family: var(--font-plaque);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="password"],
textarea,
select {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-data);
  font-size: var(--fs-md);
  color: var(--color-phosphor);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-inset-deep);
  transition: border-color var(--dur-fast) var(--ease-snap),
              box-shadow var(--dur-fast) var(--ease-snap);
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--color-phosphor) 40%, transparent);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--color-focus);
  box-shadow:
    var(--shadow-inset-deep),
    0 0 0 2px color-mix(in srgb, var(--color-focus) 40%, transparent);
  outline: none;
}

textarea { min-height: 6rem; resize: vertical; }

/* Select chevron: strip the native arrow, draw our own muted chevron as a
   data: URI SVG background-image (CSP-allowed — img-src 'self' data:). Extra
   right padding clears the chevron; border/background/focus inherit above. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2382998F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}

/* Light (G5): swap the select chevron stroke to a dark ink. A url() can't read
   a CSS var, so the chevron is a per-theme background-image swap; in light the
   locked dark-theme gray would otherwise float on cream. */
[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2336443B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}

/* Disabled controls (G7): desaturate + fade, mirroring .c-button:disabled.
   NB: no brightness < 1 — darkening an already-dark well is wrong in light;
   grayscale + opacity reads "inactive" correctly in BOTH themes. */
input:disabled,
textarea:disabled,
select:disabled {
  cursor: not-allowed;
  filter: grayscale(0.6) opacity(0.55);
  color: var(--color-text-muted);
}