/* Form controls (task 34): text fields, the switch and the checkbox. Field borders are --field-border,
   3:1 against the page and the card in every appearance (WCAG 1.4.11); focus keeps the outline from
   desk-base.css and adds a soft glow, never one instead of the other. */

/* Text fields */
label {
  font: var(--type-subheadline);
  font-weight: 600;
}
input[type="text"],
input[type="search"],
input[type="date"],
select,
textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--hit);
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--field-border);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  color: var(--ink);
  font: var(--type-body);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}
textarea {
  min-height: 4.5rem;
  resize: vertical;
}
input::placeholder,
textarea::placeholder {
  color: var(--ink-3);
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--accent-soft); /* a soft glow beside the focus outline, never instead of it */
}
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--bad);
}
textarea[readonly] {
  background: var(--surface-3);
}
.field {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}
.field-error {
  color: var(--bad);
  font: var(--type-footnote);
  font-weight: 600;
}
.field-help {
  margin: var(--space-1) 0 0;
  color: var(--ink-3);
  font: var(--type-footnote);
}

/* Switch: an iOS-style track; on is green, off is a gray that still shows against the page. */
.switch,
.impact-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--hit);
  font: var(--type-body);
  cursor: pointer;
}
.switch input,
.impact-toggle input {
  appearance: none;
  position: relative;
  flex: none;
  width: 2.75rem;
  height: 1.625rem;
  margin: 0;
  border-radius: var(--radius-full);
  background: var(--ink-3);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.switch input::after,
.impact-toggle input::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-popover);
  transition: transform var(--duration-fast) var(--ease-out);
}
.switch input:checked,
.impact-toggle input:checked {
  background: var(--good);
}
.switch input:checked::after,
.impact-toggle input:checked::after {
  transform: translateX(1.125rem);
}
/* Forced colours drop the track's and the knob's fills, which left nothing on screen: draw both in system
   colours, the track outlined, and filled with the selection colour when on. */
@media (forced-colors: active) {
  .switch input,
  .impact-toggle input {
    forced-color-adjust: none;
    border: 1px solid CanvasText;
    background: Canvas;
  }
  .switch input::after,
  .impact-toggle input::after {
    background: CanvasText;
    box-shadow: none;
  }
  .switch input:checked,
  .impact-toggle input:checked {
    border-color: Highlight;
    background: Highlight;
  }
  .switch input:checked::after,
  .impact-toggle input:checked::after {
    background: HighlightText;
  }
}

/* Checkbox: a rounded square; checked fills green with a checkmark (desk-icons.css). */
.check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--hit);
  font: var(--type-body);
  font-weight: 600;
  cursor: pointer;
}
.check input[type="checkbox"] {
  appearance: none;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  border: 2px solid var(--field-border);
  border-radius: 0.375rem;
  background: var(--surface);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}
.check input[type="checkbox"]:checked {
  border-color: var(--good);
  background: var(--good);
}