/* Shared classic floating labels.  The enhancer only opts in fields with a real,
   visible label, leaving checkboxes, radios, files and search controls alone. */
.fn-floating-field,
label.fn-floating-label,
.field.fn-floating-field { position:relative; }

.fn-floating-field > label.fn-floating-label,
.field.fn-floating-field > label.fn-floating-label,
label.fn-floating-label > .fn-floating-label-text {
  color:inherit;
}

.fn-floating-field > label.fn-floating-label,
.field.fn-floating-field label.fn-floating-label {
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  margin:0;
  pointer-events:none;
}

.fn-floating-label-text {
  position:absolute;
  z-index:2;
  top:50%;
  left:12px;
  max-width:calc(100% - 24px);
  overflow:hidden;
  padding:0 3px;
  background:var(--fn-floating-label-bg, transparent);
  color:inherit;
  font:inherit;
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
  pointer-events:none;
  transform:translateY(-50%);
  transform-origin:left center;
  transition:top 220ms ease, transform 220ms ease, font-size 220ms ease, background-color 220ms ease;
}

label.fn-floating-label { position:relative; }
label.fn-floating-label > .fn-floating-label-text { left:12px; }
label.fn-floating-label > :is(input, textarea, select) { display:block; }

/* Public auth fields use an icon/input shell. The label belongs to that
   full-width shell, not to the (intentionally compact) semantic-label row. */
.fn-input-shell > label.fn-floating-label {
  position:absolute;
  z-index:2;
  inset:0;
  margin:0;
  pointer-events:none;
}
.fn-input-shell > label.fn-floating-label > .fn-floating-label-text {
  left:var(--fn-floating-label-left, 12px);
}
.fn-input-shell:has(> label.fn-floating-label) > :is(input, textarea, select)::placeholder {
  color:transparent;
  opacity:1;
}

.fn-floating-field:focus-within > label .fn-floating-label-text,
.fn-floating-field.fn-floating-filled > label .fn-floating-label-text,
.field.fn-floating-field:focus-within > label .fn-floating-label-text,
.field.fn-floating-field.fn-floating-filled > label .fn-floating-label-text,
label.fn-floating-label:focus-within > .fn-floating-label-text,
label.fn-floating-label.fn-floating-filled > .fn-floating-label-text {
  top:0;
  font-size:.78em;
  transform:translateY(-50%);
}

/* An icon shell may sit between the field wrapper and its label. */
.field.fn-floating-field:focus-within .fn-floating-label-text,
.field.fn-floating-field.fn-floating-filled .fn-floating-label-text {
  top:0;
  font-size:.78em;
  transform:translateY(-50%);
}

/* Do not show a second copy of a label while the native field is empty. */
.fn-floating-field > :is(input, textarea, select)::placeholder,
.field.fn-floating-field > :is(input, textarea, select)::placeholder,
label.fn-floating-label > :is(input, textarea, select)::placeholder { color:transparent; opacity:1; }

.fn-floating-field > :is(input, textarea):-webkit-autofill + *,
.fn-floating-field > :is(input, textarea):-webkit-autofill ~ label .fn-floating-label-text { top:0; font-size:.78em; transform:translateY(-50%); }

@media (prefers-reduced-motion:reduce) {
  .fn-floating-label-text { transition:none; }
}

/* Resting (unfocused, empty) labels retain the established bold label treatment,
   but read like the compact, light-gray placeholder reference. Floated labels
   keep the old style. */
.fn-floating-label-text {
  color:var(--fn-floating-label-rest, #afafaf);
  font-size:small;
  font-weight:700;
}
.fn-floating-field:focus-within .fn-floating-label-text,
.fn-floating-field.fn-floating-filled .fn-floating-label-text,
label.fn-floating-label:focus-within > .fn-floating-label-text,
label.fn-floating-label.fn-floating-filled > .fn-floating-label-text {
  color:var(--fn-floating-label-active, #6b7280);
  font-size:.78em;
  font-weight:inherit;
}

/* Auth cards style every `label` dark/bold; force the compact light-gray resting
   label. A resting label lives inside the field, so it needs no backdrop. */
.fn-floating-label-text {
  color:#afafaf !important;
  font-size:small !important;
  background:transparent !important;
}
.fn-floating-field:focus-within .fn-floating-label-text,
.fn-floating-field.fn-floating-filled .fn-floating-label-text,
label.fn-floating-label:focus-within > .fn-floating-label-text,
label.fn-floating-label.fn-floating-filled > .fn-floating-label-text {
  color:var(--fn-floating-label-active, #6b7280) !important;
  font-size:.78em !important;
  /* The enhancer records the field's computed fill here. This masks the
     outline behind the floated text in light, dark, and custom themes. */
  background:var(--fn-floating-label-bg, var(--surface, #fff)) !important;
}

/* Plain React fields (wishes/WBS steps) have no icon shell: the label must span the
   control itself, otherwise its zero-width row clips the text to a single glyph. */
.field.fn-floating-field:not(:has(.fn-input-shell)) label.fn-floating-label {
  left:0;
  right:0;
  height:48px;
}
/* Drop the label's own (now empty) row so the field has no extra gap above the control. */
.field.fn-floating-field:not(:has(.fn-input-shell)) > span.row:has(> label.fn-floating-label) { display:contents; }

/* Chrome autofill: float the label even before JS sees a value (Chrome hides
   autofilled values from scripts until the first user interaction). */
.fn-floating-field:has(:is(input,textarea,select):-webkit-autofill) .fn-floating-label-text,
.fn-floating-field:has(:is(input,textarea,select):autofill) .fn-floating-label-text,
label.fn-floating-label:has(:is(input,textarea,select):-webkit-autofill) > .fn-floating-label-text {
  top:0 !important;
  font-size:.78em !important;
  transform:translateY(-50%) !important;
  color:var(--fn-floating-label-active, #6b7280) !important;
  background:var(--fn-floating-label-bg, var(--surface, #fff)) !important;
}
@keyframes fn-autofill-start { from { opacity:1; } to { opacity:1; } }
.fn-floating-field :is(input,textarea):-webkit-autofill,
label.fn-floating-label :is(input,textarea):-webkit-autofill { animation:fn-autofill-start 1ms; }