/* 06-components/field — form control with a mono uppercase label. */
.c-field label {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-block-end: 0.3rem;
}
.c-field input,
.c-field textarea,
.c-field select {
  width: 100%;
  background: color-mix(in srgb, var(--ground) 80%, #000);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
  color: var(--ink);
  font-family: var(--font-chrome);
  font-size: var(--text-sm);
}
.c-field input:focus,
.c-field textarea:focus,
.c-field select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
.c-field input::placeholder,
.c-field textarea::placeholder { color: color-mix(in srgb, var(--ink-dim) 60%, var(--ground)); }
.c-field textarea { resize: vertical; }

/* Inline filter field: label and control on one baseline, the control sized to its
   content rather than the full row — for compact toolbars like the admin
   access-request status filter, where a full-width select would swallow the row. */
.c-field--inline {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.c-field--inline label { margin-block-end: 0; }
.c-field--inline select { width: auto; }

/* The markdown body is the terminal's edit region: mono machine input in a calm,
   generous field big enough to read and rewrite a long rules page in. */
.c-field--editor textarea {
  min-height: 22rem;
  line-height: var(--leading-body);
}

/* The edit-summary line, styled as the commit-message that goes in the revision
   log: set visually apart from the body by a brand keyline and a leading `>` on
   the label, so its connection to the history is legible before you submit. */
.c-field--commit {
  border-inline-start: 2px solid color-mix(in srgb, var(--brand) 60%, var(--rule));
  padding-inline-start: var(--space-sm);
}
.c-field--commit label::before {
  content: "> ";
  color: var(--brand);
}
.c-field--commit .c-field__hint {
  margin-block-start: 0.3rem;
  font-family: var(--font-chrome);
  font-size: var(--text-xs);
  color: var(--ink-dim);
}

/* The gold economic role on a field (design-system law: property/money is gold).
   The admin donor-tier control and the game-map spatial extents wear it — the mono
   label turns gold and the focus keyline follows, so the money/property field reads
   as gold before it is read as text. Not every number: only the ones about value. */
.c-field--value > label { color: var(--value); }
.c-field--value input:focus,
.c-field--value select:focus {
  border-color: var(--value);
  box-shadow: 0 0 8px color-mix(in srgb, var(--value) 30%, transparent);
}

/* The file-upload control's current-image preview — the screenshot forms show the
   image already on file above the picker so the operator sees what they're about to
   replace. A capped thumbnail in a hairline frame (kills the legacy inline `style=`);
   it never blows the reading column at phone width. Paired with a mono caption so
   the "current" state is worded, not just pictured. */
.c-field__preview {
  margin-block-end: 0.5rem;
}
.c-field__preview figcaption {
  font-family: var(--font-chrome);
  font-size: var(--text-xs);
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  margin-block-end: 0.3rem;
}
.c-field__thumb {
  display: block;
  max-width: min(14rem, 100%);
  height: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ground) 80%, #000);
}

/* Inline field error — the shared invalid-field primitive (established sprint 07,
   extended by the authoring forms in sprint 08). Danger colour on the control,
   paired with a glyphed message beneath: the state never reads by colour alone,
   and the input keeps the user's value. */
.c-field.is-invalid input,
.c-field.is-invalid textarea,
.c-field.is-invalid select {
  border-color: var(--danger);
}
.c-field.is-invalid input:focus,
.c-field.is-invalid textarea:focus,
.c-field.is-invalid select:focus {
  border-color: var(--danger);
  box-shadow: 0 0 8px color-mix(in srgb, var(--danger) 30%, transparent);
}
.c-field__error {
  display: flex;
  align-items: baseline;
  gap: 0.5ch;
  margin-block-start: 0.3rem;
  font-family: var(--font-chrome);
  font-size: var(--text-xs);
  color: var(--danger);
}
/* The glyph carries the meaning so the error survives without colour. */
.c-field__error::before {
  content: "[!]";
  flex: none;
}