/* Field labels inside the top edge of their box rather than above it, the
   whole site over. A field is a div holding a label and then its input,
   select or textarea; the label is lifted onto the border line, with the
   box's own background behind it so the line breaks for the words. The
   background is painted by fields.js, which knows the colour of the box the
   field sits in. Saves the height of a label on every field. */
div:has(> label:first-child + :is(input, select, textarea)),
div:has(> label:first-child + .pick > input),
div:has(> label:first-child + #eWeeklyOff) {
  position: relative;
  padding-top: 7px;
}
div:has(> label:first-child + :is(input, select, textarea)) > label,
div:has(> label:first-child + .pick > input) > label,
div:has(> label:first-child + #eWeeklyOff) > label {
  position: absolute;
  top: 0;
  left: 9px;
  z-index: 2;
  margin: 0 !important;
  padding: 0 4px;
  line-height: 14px;
  font-size: 9.5px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted, #7A7A85);
  background: var(--field-bg, #fff);
  border-radius: 3px;
  max-width: calc(100% - 26px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
/* the words inside a label (hints, asterisks) keep to one line */
div:has(> label:first-child + :is(input, select, textarea)) > label > * { font-size: inherit; text-transform: none; letter-spacing: 0; }
/* the box itself is taller, so the words on its edge and what is typed in it
   both have room: 40px for a box, and a little extra at the top inside */
div:has(> label:first-child + :is(input, select)) > :is(input, select) { min-height: 40px !important; height: 40px !important; padding-top: 8px !important; box-sizing: border-box; }
div:has(> label:first-child + #eWeeklyOff) > #eWeeklyOff { height: 40px !important; }
div:has(> label:first-child + textarea) > textarea { padding-top: 12px; }
div:has(> label:first-child + :is(input, select, textarea)),
div:has(> label:first-child + #eWeeklyOff) { padding-top: 7px; }
/* ticks and radios are not fields: untouched */
label.tick { position: static; }
