/* Input Fields · Outline · label notched · Desktop */
.field {
  display: flex;
  flex-direction: column;
}

/* The label stands where the value stands, and lifts when the field has a
   value or focus. Lifted, it rides onto the stroke: the box's own background
   paints out the line under it. */
.field__box { position: relative; }
.field__label {
  position: absolute;
  inset-inline-start: calc(calc(12px - 1px) /* inset 12, less the stroke */ + 4px);
  top: 50%;
  translate: 0 -50%;
  font: var(--dsm-type-body-sm-weight, 500) var(--dsm-type-body-sm-size, 12px)/var(--dsm-type-body-sm-line, 20px) var(--dsm-type-body-sm-family, var(--dsm-font-sans, system-ui, sans-serif)); /* 02 · body-sm */
  color: var(--dsm-textHeading, #EEEEEE); /* 03 · textHeading */
  pointer-events: none;
  transition: top .15s, font-size .15s, translate .15s;
}
.field__box:focus-within .field__label,
.field__box[data-filled="true"] .field__label {
  top: -8px;
  translate: 0;
  font-size: var(--dsm-type-caption-size, 12px); /* 02 · caption — the lifted label shrinks to the helper's size */
  line-height: var(--dsm-type-caption-line, 16px);
  padding-inline: 4px;
  background: #2A2A2A; /* the notch: box color over the stroke */
}

.field__box {
  display: flex;
  align-items: center;
  gap: var(--dsm-inputs-gap, 8px); /* 2 × 4 */
  box-sizing: border-box;
  height: var(--dsm-inputs-height, 40px); /* 10 × 4 */
  padding-inline: calc(12px - 1px); /* inset 12, less the stroke */
  background: #2A2A2A; /* 03 · #2A2A2A */
  border: 1px solid var(--dsm-controlBorder, #4C4C4C); /* 03 · controlBorder */
  border-radius: var(--dsm-inputs-radius, 8px); /* 2 × 4 */
  color: var(--dsm-textBody, #EEEEEE); /* 03 · textBody */
  font-size: var(--dsm-type-body-sm-size, 12px); /* 02 · body-sm */
  line-height: var(--dsm-type-body-sm-line, 20px);
}

/* States — one attribute each, so a state is something you can see in the DOM. */
.field__box:hover { border-color: var(--dsm-textMuted, #ABABAB); /* 03 · textMuted */ }
.field__box:focus-within { border-color: var(--dsm-primary, #194CFF); /* 03 · primary */ }
.field__box[data-invalid="true"] { border-color: var(--dsm-error, #FFAAA2); /* 03 · error */ }
.field__box[data-readonly="true"] { background: #2A2A2A; color: inherit; }
.field__box[data-disabled="true"] { opacity: .45; pointer-events: none; }

.field__icon { flex: 0 0 auto; width: 16px; height: 16px; color: inherit; /* 04 · · icon */ */ }

.field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
  caret-color: #194CFF;
}
.field__input::placeholder { color: inherit; /* 03 · placeholder */ }

/* The clear button shows only when there is something to clear. */
.field__clear { flex: 0 0 auto; width: 16px; height: 16px; border: 0; padding: 0; background: none; color: inherit; cursor: pointer; /* 03 · clear */ }
.field__box:not([data-filled="true"]) .field__clear,
.field__box[data-readonly="true"] .field__clear { display: none; }

/* The help mark: sized from 04, drawn in the label's color, hangs on the
   label when there is one and at the end of the field when there is not. */
.field__tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; /* 04 */
  border: var(--dsm-inputs-stroke, 1px) solid #EEEEEE; border-radius: 50%;
  color: #EEEEEE; font: 700 9px/1 var(--dsm-font-sans, system-ui, sans-serif);
  cursor: help;
}

.field__help {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--dsm-type-caption-size, 12px); /* 02 · caption */
  line-height: var(--dsm-type-caption-line, 16px);
  color: inherit; /* 03 · helper */
  /* Optical again: 12px from the box to the cap height. */
  margin-block-start: calc(12px - var(--help-leading, 4px));
}
/* 1.4.1: color is never the only carrier — the invalid helper says what is wrong. */
.field__help[data-invalid="true"] { color: #FFAAA2; }
.field__help[data-invalid="true"]::before { content: ""; width: 16px; height: 16px; background: currentColor; mask: url(#alert) center / contain no-repeat; }