/* Floating labels. Paired with /float-labels.js, which does the wrapping and
 * measures the two positions the label travels between.
 *
 * Timing: 220ms on the label, long enough to read as movement rather than a
 * jump and still inside the 300ms ceiling for interface animation. The curve is
 * a strong ease-out, so it leaves at once and settles softly. The ring and the
 * border follow at 150ms, faster than the label, so the field acknowledges the
 * click before the label has finished travelling.
 *
 * The label moves with transform only, never top or font-size, so the whole
 * travel runs on the compositor and the letters glide instead of reflowing. */
/* Spacing. Before the labels floated, the gap between two fields came from the
 * label's own margin (label{margin:14px 0 5px} on the static pages). The label
 * now sits inside the field and its margin is zeroed, so the field has to carry
 * the gap itself. Without this, consecutive fields touch: on /for-operators the
 * measured gaps ran 12px, 0, 12px, 0, 12px, 0, because only the rows inside the
 * two-column grid were spaced and the grids themselves were not.
 *
 * A field that is already a grid or flex item is left alone and its container
 * carries the gap instead, so the two never stack up. 12px matches the gap those
 * grids already use. */
.ffl { position: relative; margin-bottom: 12px; }
.ffl:last-child { margin-bottom: 0; }
:is(.two, .row, .fields, .grid):has(> .ffl) > .ffl { margin-bottom: 0; }
:is(.two, .row, .fields, .grid):has(> .ffl) { margin-bottom: 12px; }
.ffl-wrap { display: block; }

.ffl > label {
  position: absolute;
  top: 0;
  left: 12px;
  transform: var(--ffl-rest, translateY(14px));
  transform-origin: left center;
  margin: 0;
  padding: 0 6px;
  max-width: calc(100% - 26px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  line-height: 1.15;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #8a97a5;
  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1), color 150ms ease;
}
.ffl.is-float > label { transform: var(--ffl-up, translateY(-8px) scale(0.8)); font-weight: 600; }
.ffl-flat > label { background: transparent !important; padding-left: 0; padding-right: 0; }
.ffl-flat.is-float > label { text-transform: uppercase; letter-spacing: .06em; }

.ffl > input, .ffl > select, .ffl > textarea {
  width: 100%;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.ffl > input:focus, .ffl > select:focus, .ffl > textarea:focus {
  outline: none;
  border-color: #C9A24C;
  box-shadow: 0 0 0 3px rgba(201, 162, 76, 0.16);
}
.ffl-flat > input:focus, .ffl-flat > select:focus, .ffl-flat > textarea:focus {
  box-shadow: inset 0 0 0 1.5px #C9A24C, 0 0 0 3px rgba(201, 162, 76, 0.14);
}
.ffl:focus-within > label { color: #C9A24C; }

@media (prefers-reduced-motion: reduce) {
  .ffl > label, .ffl > input, .ffl > select, .ffl > textarea { transition-duration: 1ms; }
}