Field

/* ============================================================================
   POST UI System — components
   HAND-WRITTEN. Not generated: this file encodes the RULES the components follow,
   which is not the same thing as whatever the Figma canvas currently looks like.
   The contract it implements (variant axes + reasoning) is synced in components.json.

   Import order:  tokens.css  ->  type.css  ->  components.css

   NAMING. Every class is `post-` prefixed. This ships into Webflow projects where
   `.button`, `.field`, `.label` or `.text-body` are exactly the classes a site
   already has, and an unprefixed collision would silently restyle real content.
   Block `post-x` · modifier `post-x--y` · state `is-*`.

   THE FOUR RULES EVERYTHING BELOW OBEYS
   1. Tokens are named by scale, never by consumer — space/m, stroke/m, icon-size/m
      and text/md all mean "the middle step".
   2. Strokes are altitude, not component — s detail · m component · l section.
   3. Optical padding — outer padding is uniform, the LABEL carries space/xs left and
      right, and the gap is 0. Text ends up inset by outer+xs while an icon sits at
      outer, which is correct: a glyph carries internal whitespace and text does not.
      One recipe covers icon-left, icon-right, both, or neither.
   4. Control height comes from the ICON TIER, never from text. Every control label
      carries min-height = its icon-size token. Without it the icon becomes the
      tallest child and toggling an optional icon grows the control — a chip jumped
      28 -> 32px exactly this way. With it, toggling an icon changes width only.

   currentColor is load-bearing. Outline/ghost controls bind their label fill AND
   their stroke to the same `action` token, so the border is written as
   `border-color: currentColor` and one colour change moves both.
   ============================================================================ */

/* ---- field ---- */
/* Label + Input + helper as ONE unit — this is what a form actually consumes.
   The helper flips to the error colour with the input. */
.post-fieldset { display: flex; flex-direction: column; gap: var(--space-s); }
.post-fieldset > .post-fieldlabel {
  font-family: var(--font-post);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
/* /inline, not /text. The chip ink is theme-invariant by design and only works ON the
   chip: red/800 reads 1.08:1 on a brand plane and 1.63:1 on deep — invisible. Anything
   error-coloured that sits on the SECTION plane needs the theme-aware token. */
.post-fieldset > .post-fieldlabel .post-req { color: var(--feedback-error-inline); }
.post-fieldset > .post-helper {
  font-family: var(--font-post);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.2;
  color: var(--muted);
}
.post-fieldset.is-error > .post-helper { color: var(--feedback-error-inline); }

/* HOVERING ANY PART OF THE FIELD HOVERS ITS INPUT. The label and the helper belong to the
   control, exactly as a checkbox's label belongs to its box - reaching for the word
   "Email" should light the box you are about to type in.

   Guarded with :not(.is-error). The descendant selector outranks `.post-input.is-error`, so
   without it an errored field would turn blue the moment the pointer crossed its label -
   hover quietly overruling a state that matters far more. */
.post-fieldset:hover .post-input:not(.is-error):not(:disabled):not(.is-disabled) {
  border-color: var(--hover-ink);
  background: var(--hover-surface);
}