/* A copy of frontend/src/components/ds/field.css for the public site (ADR 0147). Generated by scripts/site-ds.mjs: do not edit. */
@layer components {
  .ds-field {
    display: grid;
    gap: 6px;
    min-width: 0;
  }
  .ds-field__label {
    font-size: var(--text-label);
    line-height: var(--text-label--line-height);
    font-weight: 500;
    color: var(--color-ink-2);
  }
  .ds-field__hint {
    margin: 0;
    font-size: var(--text-caption);
    line-height: var(--text-caption--line-height);
    color: var(--color-ink-3);
  }
  .ds-field__error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--text-caption);
    line-height: var(--text-caption--line-height);
    font-weight: 500;
    color: var(--color-down);
  }

  /* text fields and selects share one edge, one height, one focus */
  .ds-input,
  .ds-select__control {
    width: 100%;
    min-width: 0;
    height: max(var(--control-h), 38px);
    padding: 0 12px;
    border: 1px solid var(--color-control);
    border-radius: var(--radius-control);
    background-color: var(--color-paper);
    color: var(--color-ink);
    font: inherit;
    font-size: var(--text-body);
    transition: border-color var(--dur-fast);
  }
  /* a few lines: its height is its rows' (a text field's own height is one line's), and a hand resizes it only in height */
  .ds-textarea {
    height: auto;
    min-height: max(var(--control-h), 38px);
    padding-block: 8px;
    line-height: var(--text-body--line-height);
    resize: vertical;
  }
  .ds-input::placeholder {
    color: var(--color-ink-3);
  }
  .ds-input:hover,
  .ds-select__control:hover {
    border-color: var(--color-ink-3);
  }
  .ds-input:focus-visible,
  .ds-select__control:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 1px;
  }
  .ds-input[aria-invalid="true"],
  .ds-select__control[aria-invalid="true"] {
    border-color: var(--color-down);
  }
  .ds-input:disabled,
  .ds-input[readonly],
  .ds-select__control:disabled {
    background-color: var(--color-wash);
    border-color: var(--color-line-2);
    color: var(--color-ink-2);
  }
  .ds-select {
    position: relative;
    display: block;
    min-width: 0;
  }
  .ds-select__control {
    appearance: none;
    padding-inline-end: 32px;
    cursor: pointer;
  }
  .ds-select__chev {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    translate: 0 -50%;
    color: var(--color-ink-3);
    pointer-events: none;
  }

  /* a box and a switch: the whole line is the target (≥ 24 px, 44 px on a phone) */
  .ds-check,
  .ds-switch {
    display: inline-flex;
    align-items: flex-start;
    gap: 12px;
    min-height: max(var(--control-h), 24px);
    padding-block: 4px;
    cursor: pointer;
    font-size: var(--text-body);
    line-height: var(--text-body--line-height);
  }
  .ds-choice__text {
    display: grid;
  }
  .ds-choice__hint {
    font-size: var(--text-caption);
    line-height: var(--text-caption--line-height);
    color: var(--color-ink-3);
  }
  .ds-check__box,
  .ds-switch__track {
    appearance: none;
    flex: none;
    margin: 0;
    margin-block-start: 3px;
    cursor: pointer;
    border: 1px solid var(--color-control);
    background-color: var(--color-paper);
    transition:
      background-color var(--dur-fast),
      border-color var(--dur-fast);
  }
  .ds-check__box {
    position: relative;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-chip);
  }
  /* the tick is two borders of a rotated box: no image, the ink of the theme */
  .ds-check__box::after {
    content: "";
    width: 6px;
    height: 11px;
    margin-block-start: -2px;
    border: solid var(--color-paper);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform var(--dur-fast) var(--ease-spring-pop);
  }
  .ds-check__box:checked {
    background-color: var(--color-ink);
    border-color: var(--color-ink);
  }
  .ds-check__box:checked::after {
    transform: rotate(45deg) scale(1);
  }
  .ds-check__box:indeterminate {
    background-color: var(--color-ink);
    border-color: var(--color-ink);
  }
  .ds-check__box:indeterminate::after {
    width: 10px;
    height: 0;
    margin: 0;
    border-width: 0 0 2px 0;
    transform: none;
  }
  /* a switch that is on is a pressed control: the brand tone */
  .ds-switch__track {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 9999px;
    background-color: var(--color-wash-2);
    border-color: var(--color-control);
  }
  .ds-switch__track::after {
    content: "";
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--color-knob); /* in the dark, lighter than its track rather than a hole in it */
    /* the knob's own edge: an off switch reads at ≥ 3:1 against its track (WCAG 1.4.11) */
    box-shadow: 0 0 0 1px var(--color-control);
    transition: transform var(--dur-slow) var(--ease-spring);
  }
  .ds-switch__track:checked {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
  }
  .ds-switch__track:checked::after {
    background-color: var(--color-raised); /* on the brand tone: white in the light, the night on the dark's */
    transform: translateX(16px);
  }
  .ds-switch__track:checked:dir(rtl)::after {
    transform: translateX(-16px);
  }
  .ds-check__box:focus-visible,
  .ds-switch__track:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
  }
  .ds-check__box:disabled,
  .ds-switch__track:disabled,
  .ds-check:has(:disabled),
  .ds-switch:has(:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
  }
  /* forced colours: an on switch fills with the system's highlight, its knob in the text colour, so on and off differ */
  @media (forced-colors: active) {
    .ds-switch__track::after {
      forced-color-adjust: none;
      background-color: CanvasText;
      box-shadow: none;
    }
    .ds-switch__track:checked {
      forced-color-adjust: none;
      background-color: Highlight;
      border-color: Highlight;
    }
    .ds-switch__track:checked::after {
      background-color: HighlightText;
    }
  }
}