/* Eingabefelder, für beide Schalen.
 *
 * Eine dritte Datei statt derselben Regeln in `app.css` und `portal.css`.
 * Die beiden Schalen gehören zu verschiedenen Bereichen, ihre Felder sehen
 * aber gleich aus — und zwei Kopien desselben Blocks weichen beim fünften
 * Feld voneinander ab. Genau das war in `praxis/stellen.html` schon
 * passiert, wo derselbe Inline-Stil viermal steht.
 *
 * Nur semantische Tokens. `border:1px solid #ddd` wäre Regel 8. */

.lbl {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.inp {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  /* `--ink` ist die dunkelste Stufe der Skala; ein `--ink-1` gibt es nicht.
   * Undefiniert liess die Ersetzung die Farbe auf den geerbten Wert fallen. */
  color: var(--ink);
  background: var(--surface);
}

select.inp { height: 40px; padding: 0 9px; }

/* `--focus` und nicht `--primary`: Letzteres ist nie definiert worden. Eine
 * var()-Ersetzung ohne Wert und ohne Rückfallwert macht die Eigenschaft
 * ungültig — `outline` fällt dann auf `unset` zurück, also auf
 * `outline-style:none`. Diese Regel hat den Fokusring nicht bloss nicht
 * gesetzt, sondern den globalen aus app.css:89 aktiv entfernt: Klasse +
 * Pseudoklasse ist spezifischer als das blanke `:focus-visible`. Wer das
 * Formular mit der Tastatur bediente, sah gar nichts. */
.inp:focus { outline: 2px solid var(--focus); outline-offset: -1px; }

.inp::placeholder { color: var(--ink-3); }

/* Ein Formular, das eingeklappt ist, bekommt oben eine Kante — sonst sieht
 * es aus, als gehörte es zum Knopf darüber statt zu dessen Wirkung. */
[id$="-form"]:not([hidden]) {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}