/* Shared chrome for every permission-aware field control. Three states, and the
   read-only one is a value rather than a disabled editor. */

.c-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.c-field > label { font-size: var(--ui-sm); font-weight: 600; color: var(--ink-2); }
.c-field .req { color: var(--neg); margin-left: 2px; }

.c-inputwrap {
  display: flex; align-items: center; gap: 6px;
  height: var(--ctl-h); padding: 0 var(--ctl-px);
  border: 1px solid var(--line); border-radius: var(--r1);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease);
}
.c-inputwrap:hover { border-color: var(--ink-3); }
.c-inputwrap:focus-within { border-color: var(--accent); box-shadow: var(--focus-field); }
.c-inputwrap.ta { height: auto; padding: 0 var(--ctl-px); }

.c-input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  font-family: inherit; font-size: var(--ui); outline: none; padding: 0;
}
.c-input::placeholder { color: var(--ink-3); }
textarea.c-input { padding: 8px 0; resize: vertical; line-height: 1.5; }
.c-input.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* The read-only state. Aligned to the same baseline as an editor so a form does
   not jump when it switches mode, but visibly not a control. */
.c-value {
  display: flex; align-items: center; gap: 6px;
  min-height: var(--ctl-h); padding: 0 2px;
  font-size: var(--ui); color: var(--ink);
  border-bottom: 1px solid var(--line-2);
}
.c-value.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.c-value.multiline { display: block; padding: 6px 2px; line-height: 1.55; white-space: pre-wrap; }

.c-select {
  appearance: none; width: 100%;
  height: var(--ctl-h); padding: 0 calc(var(--ctl-px) + 16px) 0 var(--ctl-px);
  border: 1px solid var(--line); border-radius: var(--r1);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: var(--ui); cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.c-select:hover { border-color: var(--ink-3); }
.c-select:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-field); }

.afx { font-size: var(--ui-sm); color: var(--ink-3); font-family: var(--font-mono); }
.hint { font-size: var(--ui-sm); color: var(--ink-3); }
.err { font-size: var(--ui-sm); color: var(--neg); font-weight: 500; }

.c-field[data-invalid="true"] .c-inputwrap { border-color: var(--neg); background: var(--neg-soft); }