/* =========================================================
   Klar — form and input vocabulary
   ----------------------------------------------------------
   Fields, the portioning block, the goal sliders, permission
   rows and the copy fields. Shared on purpose: portioning is the
   same component in the food log, the entry edit, the ingredient
   log and the recipe variant log, and UIUX.md treats it as one.

   Every text input is 16 px. Below that iOS zooms the page on
   focus, which moves the main action out of reach — the exact
   failure ABNAHME.md asks to check with the keyboard open.
   ========================================================= */

/* ---------------------------------------------------------- fields */

.app-main .field,
.app-main .form-field {
  display: grid;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 700;
  min-width: 0;
}

.app-main .form-field__label,
.app-main .field > span:first-child {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
}

.app-main .field input,
.app-main .field select,
.app-main .field textarea,
.app-main .form-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.app-main .form-field select,
.app-main .form-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 12px;
  border-radius: 12px;
  min-height: 48px;
  font-size: var(--text-16);
  font-family: inherit;
}

.app-main .field textarea,
.app-main .form-field textarea {
  min-height: 96px;
  line-height: 1.6;
  resize: vertical;
}

.app-main .field input:focus,
.app-main .field select:focus,
.app-main .field textarea:focus,
.app-main .form-field input:focus,
.app-main .form-field select:focus,
.app-main .form-field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-main .form-field--error input,
.app-main .form-field--error select,
.app-main .form-field--error textarea,
.app-main [aria-invalid="true"] {
  border-color: var(--danger);
}

.app-main .form-field__error {
  font-size: var(--text-sm);
  color: var(--danger);
  line-height: 1.6;
  font-weight: 500;
}

.app-main .form-field__hint,
.app-main .helptext {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 500;
  line-height: 1.7;
}

.app-main .fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.app-main .field-block {
  display: grid;
  gap: 14px;
}

.app-main .field-title {
  font-size: var(--text-xs);
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 9px;
}

.app-main .form-footer {
  display: grid;
  gap: 9px;
}

.app-main .toggle-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 45px;
  font-size: var(--text-sm);
}

/* Die Beschreibung darunter: dieselbe Zweitzeile wie in einer
   Rechtezeile, damit die beiden Formen zusammengehören. */
.app-main .toggle-check small {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
  margin-top: 4px;
}

.app-main .toggle-check input {
  width: 18px;
  height: 18px;
  min-width: 18px;
  accent-color: var(--accent);
}

@media (max-width: 350px) {
  .app-main .fields {
    gap: 9px;
  }
}

/* ---------------------------------------------------------- portioning
   One amount field plus direct portion buttons. No unit dropdown
   at logging time — the pills are the unit. */

.app-main .amount-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

.app-main .amount-heading > label {
  font-size: var(--text-md);
  font-weight: 750;
}

.app-main .amount-heading input {
  width: 130px;
  max-width: 55%;
  min-height: 58px;
  font-size: 1.6875rem;
  font-weight: 750;
  text-align: center;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  border-radius: 13px;
  font-variant-numeric: tabular-nums;
  padding: 8px;
}

.app-main .portion-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Zwei Bauformen, eine Gestalt.
   Der Prototyp benutzt Schaltflächen. Ein ``<label>`` mit einem echten
   Radiofeld darin ist die bessere Bauform: die Auswahl funktioniert ohne
   JavaScript, sie wandert beim Senden mit, und Tastatur und Vorleseprogramm
   bekommen die Gruppensemantik vom Browser statt von uns. Beide werden hier
   gleich gestaltet, damit die Wahl der Bauform keine Gestaltungsfrage ist. */
.app-main .portion-pills button,
.app-main .portion-pills label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  min-height: 46px;
  min-width: 63px;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  position: relative;
}

/* Das Radiofeld bleibt bedienbar und fokussierbar — es wird nur nicht
   gezeichnet. ``display: none`` würde es aus der Tastaturbedienung nehmen. */
.app-main .portion-pills label > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.app-main .portion-pills button strong,
.app-main .portion-pills label strong {
  font-size: var(--text-sm);
  font-weight: 650;
}

.app-main .portion-pills button small,
.app-main .portion-pills label small {
  font-size: var(--text-2xs);
  color: var(--muted);
}

.app-main .portion-pills button.is-selected,
.app-main .portion-pills button[aria-pressed="true"],
.app-main .portion-pills label.is-selected,
.app-main .portion-pills label:has(> input:checked) {
  background: var(--tint);
  border-color: var(--accent);
  color: var(--accent);
}

.app-main .portion-pills button.is-selected small,
.app-main .portion-pills button[aria-pressed="true"] small,
.app-main .portion-pills label.is-selected small,
.app-main .portion-pills label:has(> input:checked) small {
  color: var(--accent);
}

/* Der Fokus liegt auf dem unsichtbaren Feld; sichtbar machen muss ihn die
   Hülle, sonst ist die Tastaturbedienung blind. */
.app-main .portion-pills label:has(> input:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.app-main .amount-equivalent {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--muted);
  background: var(--bg);
  padding: 9px 11px;
  border-radius: 9px;
  font-variant-numeric: tabular-nums;
}

.app-main .portion-editor-row {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  display: grid;
  gap: 12px;
}

/* ---------------------------------------------------------- target selection */

.app-main .target-selection {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  padding: 14px;
  color: inherit;
  text-decoration: none;
  min-height: 62px;
}

.app-main .target-selection__body {
  flex: 1;
  min-width: 0;
}

.app-main .target-selection small {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 6px;
}

.app-main .target-selection strong {
  display: block;
  font-size: var(--text-md);
  overflow-wrap: anywhere;
}

/* Maß in klar-icons.css (``.target-selection > svg`` = 17 px). */
.app-main .target-selection > svg:last-child {
  color: var(--muted);
  flex-shrink: 0;
}

.app-main .type-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--accent);
  border-radius: 11px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------- goals
   The existing V2 slider logic stays; this is only its surface. */

.app-main .goal-line {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.app-main .goal-line:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Die Zeile ist die gemeinsame ``.row`` (utilities.css) — genau wie in der
   Referenz. Hier steht nur, was die Zielzeile daran ändert: enger. */
.app-main .goal-line .row {
  gap: 8px;
}

.app-main .goal-line label {
  font-size: var(--text-base);
  font-weight: 750;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-main .goal-number {
  margin-left: auto;
  width: 82px;
  max-width: 78px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg);
  padding: 9px 7px;
  color: var(--ink);
  font-size: var(--text-16);
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-height: 44px;
}

.app-main .goal-line input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  margin: 15px 0 0;
  min-height: 28px;
}

.app-main .lock-button {
  padding: 10px;
  min-height: 44px;
  min-width: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Offenes und geschlossenes Schloss liegen beide im Knopf; sichtbar ist
   immer genau eines, und ``aria-pressed`` entscheidet welches. Ein SVG hat
   keine umschaltbare Klasse wie eine Icon-Glyphe — der frühere Weg (zwei
   Remixicon-Klassen an einem ``<i>``) tat nach der Umstellung gar nichts,
   und das Schloss sah in beiden Stellungen gleich aus. */
.app-main .lock-button .lock-button__closed,
.app-main .lock-button[aria-pressed="true"] .lock-button__open {
  display: none;
}

.app-main .lock-button[aria-pressed="true"] .lock-button__closed {
  display: block;
}

.app-main .lock-button.is-locked,
.app-main .lock-button[aria-pressed="true"] {
  color: var(--accent);
  background: var(--tint);
}

.app-main .goal-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.app-main .goal-presets .btn {
  font-size: var(--text-xs);
  padding: 10px 5px;
  min-height: 44px;
}

/* The explanation sits at the lock, not in a distant help text. */
.app-main .lock-explanation {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--muted);
  padding-top: 12px;
}

/* Maß in klar-icons.css (``.lock-explanation svg`` = 17x18). */
.app-main .lock-explanation > svg {
  flex-shrink: 0;
  color: var(--accent);
}

.app-main .lock-explanation strong {
  color: var(--ink);
}

/* ---------------------------------------------------------- household */

.app-main .permission-row {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: var(--text-sm);
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.app-main .permission-row:last-child {
  border-bottom: 0;
}

.app-main .permission-row input {
  width: 18px;
  height: 18px;
  min-width: 18px;
  accent-color: var(--accent);
}

.app-main .permission-row small {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.5;
  margin-top: 4px;
  font-weight: 500;
}

.app-main .invite-code {
  font: 600 19px var(--font-mono);
  letter-spacing: 2px;
  padding: 15px;
  background: var(--tint);
  border-radius: 10px;
  color: var(--accent);
  word-break: break-all;
}

.app-main .invite-fields {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.app-main .invite-fields > label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--muted);
  margin-top: 5px;
}

/* Code and link each with a compact copy button right beside them. */
.app-main .copy-field {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 0;
}

.app-main .copy-field input {
  min-width: 0;
  width: 100%;
  padding: 11px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--text-sm);
  border-radius: 10px;
  min-height: 44px;
  text-overflow: ellipsis;
}

.app-main .copy-field .icon-button {
  flex-shrink: 0;
  border-radius: 10px;
}

/* ---------------------------------------------------------- images */

.app-main .image-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.app-main .image-options button {
  border: 2px solid transparent;
  border-radius: 12px;
  background: #fff;
  width: 70px;
  height: 66px;
  padding: 5px;
}

.app-main .image-options button.is-selected,
.app-main .image-options button[aria-pressed="true"] {
  border-color: var(--accent);
}

.app-main .image-options img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.app-main .image-upload {
  display: block;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  font-size: var(--text-sm);
  color: var(--muted);
}

.app-main .image-upload input {
  font-size: var(--text-xs);
  max-width: 100%;
  margin-top: 8px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
}