/* .field, .consent — styles for src/lib/expand.mjs's `x-field` and
   `x-consent`. Load AFTER tokens.css. See public/components/README.md for
   load order and the box-sizing requirement (.field__input is width:100%). */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  cursor: pointer;
}

.field__label {
  font-size: var(--size-400);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-ui);
  color: var(--color-text-primary);
}

/* Sits BETWEEN the label and the input, never inside the input as a
   placeholder. Three reasons, from the GOV.UK Design System's own text-input
   guidance: placeholder text vanishes the moment someone starts typing (a
   problem for anyone reviewing their answers, and worse for users with memory
   conditions), not all screen readers announce it, and its browser default
   styling "often does not meet WCAG 2.2 success criterion 1.4.3 Contrast
   (minimum)" — so a placeholder-as-hint is failing contrast before anyone
   designs anything.

   Regular weight, not semibold: the label is the thing being scanned, and a
   hint at label weight competes with it. Muted colour, but muted is not an
   exemption — this text is governed by 1.4.3 like any other, and
   --color-text-muted is the token that carries the measured ratio. */
.field__hint {
  font-size: var(--size-200);
  font-weight: var(--weight-regular);
  line-height: var(--line-height-ui);
  color: var(--color-text-muted);
}

.field__input {
  width: 100%;
  min-height: var(--hit-target);
  padding: var(--field-padding-block) var(--field-padding-inline);
  background-color: var(--field-background);
  border: var(--border-width-hairline) solid var(--field-border);
  border-radius: var(--radius-default);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--size-400);
  line-height: var(--line-height-heading);
  transition: border-color var(--duration-fast) var(--easing-standard);
}

/* The multiline form of .field__input (x-field's `multiline` attribute).
   Height comes from the textarea's own `rows`, so min-height is released —
   --hit-target is a floor for something you tap once, and a note field is
   already several times that tall. Vertical-only resize: horizontal resize
   would let a textarea escape a phone-width column, and `both` is the browser
   default. line-height moves to the body value because this holds sentences,
   not a single line of entry. */
.field__input--multiline {
  min-height: 0;
  resize: vertical;
  line-height: var(--line-height-body);
}

.field__input:hover {
  border-color: var(--field-border-hover);
}

.field__input:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring-field);
  outline-offset: var(--focus-ring-offset-field);
  border-color: var(--field-border-focus);
}

/* --- consent (checkbox) -------------------------------------------------- */
.consent {
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
  margin-bottom: var(--space-3);
  font-size: var(--size-400);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  cursor: pointer;
}

.consent__input {
  flex: none;
  margin-top: 0.45rem;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--color-interactive-accent);
}

.consent__input:disabled {
  opacity: var(--button-primary-opacity-disabled);
  cursor: not-allowed;
}