/* Field.css — Phase 17 PRIM-02 scoped styles for the <Field> primitive.
 *
 * Why this file exists (the "why", per feedback_extensive_docs):
 * ==============================================================
 * The renovated <Field> in Field.jsx drops its `t` (theme) prop entirely per
 * Phase 17 D-01. Before the renovation, label styling rode the closure-bound
 * `subLabel(t)` helper from card-builder.jsx:12216 which read `t.muted` for
 * the label color. After dropping `t`, the label needs to reach the same
 * theme value through CSS instead of via prop-threading — that's what this
 * file owns.
 *
 * The (default) badge previously rendered with hardcoded inline styles
 * (card-builder.jsx:11946-11953: JetBrains Mono, fontSize 9, italic, weight
 * 400, color var(--mt-dim), marginLeft 4). Moving those declarations here
 * keeps Field.jsx clean of style literals (Phase 16 PRIM-STYLE gate scope)
 * and lets theme.css cascade redefine the badge color per-theme without
 * touching the JSX.
 *
 * Failure mode without this file:
 *   The Field's label silently inherits whatever color the parent <div>
 *   carries — usually fine in default theme, but the sentry/voltagent/
 *   erratic/raycast themes redefine `--mt-muted` to suit their palette;
 *   without scoped styling, Field labels would render in the parent's
 *   color (often a much-too-bright fg) on those themes. Same hazard on
 *   the (default) badge — switching themes without scoped styling shows
 *   the badge in the wrong color across 4 of 5 themes.
 *
 * Recovery recipe:
 *   - If Field labels render at the wrong color on a theme: check
 *     `--mt-muted` in that theme's theme.css. Theme contract is the
 *     source of truth — primitive CSS reads, doesn't declare.
 *   - If the (default) badge color drifts: same — check `--mt-dim` per
 *     theme.
 *   - If a new variant of Field needs a different label color: add a
 *     modifier class here (e.g. .field-label-text.is-warn), do NOT
 *     hex-code it or inline-style it in Field.jsx.
 *
 * PRIM-STYLE compliance (17-SPEC.md R5):
 *   1. Consumes var(--mt-muted) and var(--mt-dim) (≥1 var(--mt-*) ref).
 *   2. Zero hex literals.
 *   3. Zero --mt-* / --m-* variable DECLARATIONS — this file is
 *      consume-only.
 *
 * Load order (per Phase 17 D-08):
 *   utilities.css → Button.css → Field.css → Modal.css → Panel.css →
 *   theme.css
 *
 * The active theme.css loads LAST so per-theme overrides of var(--mt-*)
 * cascade over the references in this file.
 */

/* Label-row container. Holds the label text + optional (default) badge +
 * optional HelpHint affordance. Uses flex + center alignment to keep the
 * icon-shaped trio visually grouped with the text.
 *
 * margin-bottom 3px matches the original inline value from card-builder.jsx
 * line 11941 — keeps the input control snug under the label. */
.field-label-row {
  display: flex;
  align-items: center;
  margin-bottom: 3px;
}

/* Label text. Matches the legacy subLabel(t) shape from card-builder.jsx
 * line 12216-12221: JetBrains-Mono font, weight 700, fontSize 9, color =
 * t.muted, letterSpacing 0.4em, uppercase. Migrated verbatim from the
 * inline-style + closure-bound color pattern to a scoped class so theme
 * cascade can override `--mt-muted` per theme without touching JS. */
.field-label-text {
  font-family: var(--m-font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--mt-muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* (default) badge — renders to the right of the label when isDefault === true.
 * Matches the original inline-style block at card-builder.jsx:11946-11953:
 *   fontFamily: '"JetBrains Mono",monospace' → var(--m-font-mono)
 *   fontSize 9 / fontStyle italic / fontWeight 400 / color var(--mt-dim)
 *   marginLeft 4
 *
 * Color is intentionally `--mt-dim` (not `--mt-muted`): the original badge
 * was dimmer than the label so the eye treats it as secondary metadata
 * rather than part of the label noun. */
.field-default-badge {
  font-family: var(--m-font-mono);
  font-size: 9px;
  font-style: italic;
  font-weight: 400;
  color: var(--mt-dim);
  margin-left: 4px;
}