/* 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;
}

/* 999.20-A — "customized" dot. A small filled circle to the right of the label
 * shown whenever this Field differs from its default (SectionedInspector passes
 * `customized`). This is the per-field signal the Changed view is built on; the
 * legacy (default) badge marks the OTHER state (un-customized), so a Field shows
 * at most one of the two.
 *
 * Color rides var(--mt-accent) — the shared amber accent token every theme
 * already defines (the logs-amber + reveal-control precedent). NO hex literal,
 * so the four themes restyle the dot for free by redefining --mt-accent.
 *
 * 6px circle, vertically centered in the flex label-row, with a small left
 * gutter so it sits clearly apart from the label noun rather than touching it. */
.field-customized-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mt-accent);
  margin-left: 6px;
  flex: 0 0 auto;
}

/* 999.20-A — "adv" tag. A small muted pill reading the plain word "adv", shown
 * only in All mode for advanced-tier Fields (SectionedInspector passes
 * `showAdvTag`). It tells the user "this is a power-user setting" without the
 * UI ever saying "tier" or "advanced-predicate".
 *
 * Quiet by design: it must not compete with the label. Mono caption like the
 * (default) badge, dim text on a hairline-bordered chip, both riding tokens
 * (--mt-dim text, --mt-border outline). Zero hex literals. */
.field-adv-tag {
  font-family: var(--m-font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--mt-dim);
  border: 1px solid var(--mt-border);
  border-radius: 3px;
  padding: 0 3px;
  line-height: 1.4;
  margin-left: 6px;
  flex: 0 0 auto;
}