.ui-field {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.ui-input,
.ui-field__control {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--control-height);
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-value) / 1.4 var(--font-system);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
}

.ui-input {
  padding: 0 var(--space-3);
}

textarea.ui-input {
  min-height: calc(var(--control-height) * 2);
  padding: var(--space-3);
  resize: vertical;
}

.ui-input:focus,
.ui-field__control:focus-within {
  border-color: var(--accent);
  outline: 0 !important;
}

.ui-field__control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-right: var(--space-3);
}

.ui-field__control > input {
  min-width: 0;
  min-height: calc(var(--control-height) - 2px);
  flex: 1;
  padding: 0 0 0 var(--space-3);
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-value) / 1.4 var(--font-system);
  background: transparent;
  border: 0;
  outline: 0 !important;
}

.ui-field__unit {
  flex: 0 0 auto;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-list) / 1 var(--font-system);
}

.ui-form,
.ui-form__section {
  display: grid;
  gap: var(--space-3);
}

.ui-form__section + .ui-form__section {
  margin-top: var(--space-3);
}

.ui-form__heading {
  margin: 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-section) / 1.4 var(--font-system);
}

.ui-form__cancel {
  justify-self: start;
  padding: 0;
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
  background: transparent;
  border: 0;
}

.ui-form__footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  background: var(--page);
}

dialog.ui-bottom-sheet {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  max-height: calc(100dvh - var(--space-5));
  margin: auto 0 0;
  padding: 0;
  overflow: auto;
  color: var(--text);
  background: var(--card);
  border: 0;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

dialog.ui-bottom-sheet::backdrop {
  background: var(--scrim); /* hell wie bisher, dunkel über --dark-page (css/dark.css) */
}

.ui-bottom-sheet__handle {
  position: relative;
  width: var(--space-5);
  height: var(--space-1);
  margin: var(--space-2) auto;
  background: var(--border);
  border-radius: var(--radius-pill);
  cursor: grab;
  touch-action: none;
}

/* Zum Ziehen ist der Griff grösser als sichtbar. */
.ui-bottom-sheet__handle::before,
.nutrition-sheet__handle::before {
  position: absolute;
  inset: calc(var(--space-2) * -1) calc(var(--space-5) * -1);
  content: "";
}

.ui-bottom-sheet__header {
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border);
  touch-action: none;
}

.ui-bottom-sheet__title {
  margin: 0;
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-value) / 1.4 var(--font-system);
}

.ui-bottom-sheet__body {
  padding: var(--space-4);
}

.ui-search-list {
  min-width: 0;
  color: var(--text);
  font-family: var(--font-system);
}

.ui-search-list__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  background: var(--card);
}

.ui-search-list__tabs {
  display: flex;
  gap: var(--space-2);
}

.ui-search-list__loading {
  height: var(--progress-height-small);
  overflow: hidden;
  background: var(--border);
  border-radius: var(--radius-progress);
}

.ui-search-list__loading[aria-hidden="true"] {
  visibility: hidden;
}

.ui-search-list__loading::after {
  display: block;
  width: var(--progress-value, 0%);
  height: 100%;
  content: "";
  background: var(--accent);
}

.ui-search-list__results {
  display: grid;
}

.ui-search-list__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  min-height: var(--control-height);
  padding: var(--space-3) 0;
  color: var(--text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.ui-search-list__row strong,
.ui-search-list__row small {
  display: block;
  font-weight: var(--font-weight-regular);
}

.ui-search-list__row strong {
  font-size: var(--font-size-list);
}

.ui-search-list__row small {
  margin-top: var(--space-1);
  color: var(--text-3);
  font-size: var(--font-size-label);
}

.ui-search-list__value {
  color: var(--text-2);
  font: var(--font-weight-medium) var(--font-size-list) / 1.4 var(--font-system);
}

.ui-quantity-row {
  display: flex;
  align-items: end;
  gap: var(--space-2);
  min-width: 0;
}

.ui-quantity-row__name {
  min-width: 0;
  flex: 1;
  padding-bottom: var(--space-3);
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
}

.ui-quantity-row__fields {
  display: grid;
  grid-auto-columns: minmax(var(--quantity-field-min-width), 1fr);
  grid-auto-flow: column;
  gap: var(--space-2);
  min-width: 0;
}

.ui-quantity-row__fields .ui-field {
  min-width: var(--quantity-field-min-width);
}

.ui-empty-state {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
}

.ui-empty-state p {
  margin: 0;
}

.ui-error-text {
  margin: var(--space-1) 0 0;
  color: var(--danger-text);
  font: var(--font-weight-regular) var(--font-size-error) / 1.4 var(--font-system);
}

.ui-skeleton {
  width: var(--skeleton-width, 100%);
  height: var(--skeleton-height, var(--control-height));
  overflow: hidden;
  color: transparent;
  background: var(--border);
  border-radius: var(--radius-button);
  user-select: none;
}

.ui-skeleton--text {
  --skeleton-height: var(--font-size-label);
  border-radius: var(--radius-progress);
}

.ui-skeleton--card {
  border-radius: var(--radius-card);
}

/* Zweizeilige Zeilen (Menüliste und verwandte Zeilen: Titel, darunter die Beschreibung). Für Screenreader trennt ein
   unsichtbares Komma die Teile, sonst laufen sie zu einem Satz zusammen («… offen ist Uhrzeit in den Einstellungen»).
   font-size 0 hält das Komma unsichtbar, ohne das Layout zu ändern; innerText bleibt gleich (Stand 27.09.2026).
   Teile mit id sind ausgenommen: Sie dienen per aria-labelledby selbst als Name und brauchen kein Komma. Ohne Text
   in der Beschreibung entfällt das Komma. */
:is(button, label, a, summary) :is(strong, span, small):not([id]):has(+ small:not(:empty))::after,
:is(button, label, a, summary) small:not([id], :empty):has(+ strong)::after {
  content: ",";
  font-size: 0;
}

/* Begriffe in einfachen Worten (js/01-glossary.js): Textknopf «Was heisst …?» an der Stelle, an der ein Begriff auf
   einem Screen zum ersten Mal steht, und ein kleines Blatt von unten mit der Erklärung. */
/* Derselbe Textknopf für andere Aktionen ohne Blatt-Begriff (Stand 28.09.2026): «Unterstützung», «Werte anzeigen»,
   «Bericht öffnen». */
.glossary-ask,
.ui-text-button {
  display: flex;
  align-items: center;
  justify-self: start;
  align-self: start;
  width: auto;
  min-height: var(--control-height);
  padding: 0;
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.glossary-sheet__body {
  display: grid;
  gap: var(--space-4);
}

.glossary-sheet__text {
  margin: 0;
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-value) / 1.5 var(--font-system);
}

/* Blatt «Unterstützung» (js/03-nutrition.js, Stand 28.09.2026): freigegebener Text der Beratungsstellen, Links in
   --accent (wie im einmaligen Hinweis), Satz zu REDs, «Schliessen». */
.support-sheet__body {
  display: grid;
  gap: var(--space-3);
}

.support-sheet__text,
.support-sheet__links {
  margin: 0;
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-list) / 1.5 var(--font-system);
}

.support-sheet__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
  color: var(--accent);
}

/* Rückfrage statt Browser-Dialog (js/01-confirm-sheet.js, Stand 28.09.2026): Text, Aktion und «Abbrechen» untereinander,
   wie beim Löschen eines Laborwerts. */
.confirm-sheet__body {
  display: grid;
  gap: var(--space-3);
}

.confirm-sheet__text {
  margin: 0 0 var(--space-1);
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-value) / 1.5 var(--font-system);
}

/* Diagramme in allen Bereichen: Achsen- und Wertebeschriftungen mit gleich breiten Ziffern. Die «font»-Kurzform setzt
   die Ziffernart zurück, deshalb stehen Beschriftungen mit eigener Schriftangabe hier ausdrücklich (höhere Spezifität).
   Grösse mindestens 11 px (--font-size-label); SVG-Diagramme mit Text rechnen dafür in Bildschirmpixeln (Körper) oder
   gleichen die Skalierung aus (GLP-1). */
.body-chart,
.glp1-chart,
.lab-trend-chart,
.body-kcal,
.body-kcal .body-kcal__weeks button,
.training-week-charts,
.exercise-detail-chart,
.today-weight-chart,
.cardio-charts {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .ui-quantity-row {
    align-items: stretch;
    flex-direction: column;
  }

  .ui-quantity-row__name {
    padding-bottom: 0;
  }

  .ui-quantity-row__fields {
    width: 100%;
  }
}

/* Sprachen (js/00-i18n.js, Stand 28.09.2026). Beim Start mit einer anderen Sprache als Deutsch bleibt die Seite höchstens
   1.5 s verborgen, bis deren Katalog geladen ist, damit kein deutscher Text aufblitzt. */
html.i18n-pending body {
  visibility: hidden;
}

/* Hinweis unter Inhalten, die nur auf Deutsch vorliegen (Rechtstexte, geprüfte medizinische Aussagen). */
.i18n-german-only {
  display: block;
  margin: var(--space-1) 0 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.i18n-german-only[hidden] {
  display: none;
}

/* Blätter «Pause verwalten», «Teilen» und «Sprachprotokoll» (js/20-activity-ui.js, js/22-share.js, js/23-speech-log.js,
   Klasse os-dialog) als Blatt von unten nach DESIGN-SYSTEM. Ihre Stile standen in css/orbit.css und fielen mit der Datei
   weg (21.09.2026): Seither liefen Felder und Kästchen ineinander, und die Vorschau zum Teilen stand in voller Bildgrösse
   (1080 px breit) im Blatt. Stand 28.09.2026. */
dialog.os-dialog {
  box-sizing: border-box;
  width: min(100%, 768px);
  max-width: none;
  max-height: calc(100dvh - var(--space-5));
  margin: auto auto 0;
  padding: 0 var(--space-4) var(--space-4);
  overflow: auto;
  font: var(--font-weight-regular) var(--font-size-list) / 1.5 var(--font-system);
  border: 0;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  overscroll-behavior: contain;
}

.os-dialog > header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--control-height);
  gap: var(--space-2);
  align-items: center;
  margin: 0 calc(var(--space-4) * -1) var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.os-dialog > header h2 {
  margin: 0;
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-value) / 1.4 var(--font-system);
}

.os-dialog [data-close] {
  display: grid;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  place-items: center;
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-subscreen) / 1 var(--font-system);
  background: transparent;
  border: 0;
  border-radius: var(--radius-button);
}

.os-dialog p {
  margin: 0 0 var(--space-3);
  color: var(--text-2);
}

.os-dialog form,
.os-form-grid,
.os-share-controls {
  display: grid;
  gap: var(--space-3);
}

.os-form-grid > label,
.os-share-controls > label {
  display: grid;
  gap: var(--space-1);
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.os-dialog select,
.os-dialog input:not([type="checkbox"]) {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-value) / 1.4 var(--font-system);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
}

.os-dialog fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.os-dialog legend {
  margin: 0 0 var(--space-1);
  padding: 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-section) / 1.4 var(--font-system);
}

.os-check-grid {
  display: grid;
}

.os-check-grid > label,
.os-diagnostic-switch {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-height);
  padding: var(--space-2) 0;
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
  border-bottom: 1px solid var(--border);
}

/* Angaben, die zur gewählten Karte nicht passen, blendet js/22-share.js mit hidden aus (display: flex oben überschrieb das). */
.os-check-grid > label[hidden] {
  display: none;
}

.os-check-grid input,
.os-diagnostic-switch input {
  flex: none;
  width: var(--icon-size);
  height: var(--icon-size);
  margin: 0;
  accent-color: var(--accent);
}

.os-dialog form > .primary,
.os-action-row > button {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-4);
  font: var(--font-weight-medium) var(--font-size-value) / 1.3 var(--font-system);
}

.os-action-row > .secondary {
  font-weight: var(--font-weight-regular);
}

.os-action-row {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.os-share-layout {
  display: grid;
  gap: var(--space-4);
}

/* Die Vorschau hat die Grösse des Bilds (1080 px breit); im Blatt passt sie in Breite und Höhe. */
.os-share-preview {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 45dvh;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

@media (min-width: 720px) {
  .os-share-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .os-share-preview {
    max-height: 70dvh;
  }
}

.os-pause-record,
.os-speech-log-entry {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  overflow-wrap: break-word;
}

.os-pause-record > div {
  display: grid;
  gap: var(--space-1);
}

.os-pause-record strong,
.os-speech-log-entry strong {
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-list) / 1.4 var(--font-system);
}

.os-pause-record span,
.os-pause-record small,
.os-speech-log-entry small {
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.os-speech-log-entry p {
  margin: 0;
  color: var(--text);
}

/* Auswahlfelder auf allen Screens (Stand 28.09.2026, docs/DESIGN-SYSTEM.md «Eingabefeld»): Höhe, Rahmen und Radius wie
   ein Eingabefeld; der Fokus kommt aus css/theme.css (Rahmen in --accent), das Label ist mit dem Feld verknüpft. */
body select:not([multiple]):not([size]) {
  min-height: var(--control-height);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
}

/* Im Fokus Rahmen in --accent wie jedes Eingabefeld (die Regel oben ist spezifischer als .ui-input:focus). */
body select:not([multiple]):not([size]):focus {
  border-color: var(--accent);
}

/* Auswahlfeld mit Namen aus den Daten (Stand 28.09.2026, docs/DESIGN-SYSTEM.md): Ein langer gewählter Name bricht um und
   macht das Feld höher, statt abgeschnitten zu werden. Das Auswahlfeld bleibt sichtbar (Rahmen, Pfeil, Fokus, Auswahl des
   Geräts), nur sein eigener Text ist unsichtbar; .ui-select-wrap__text zeigt den Namen an derselben Stelle (gesetzt von
   BODYOS_SELECT_TEXT in js/01-core.js). Gleiches Muster wie .nutrition-meal-select in css/nutrition.css. */
.ui-select-wrap {
  display: grid;
  min-width: 0;
}

.ui-select-wrap > select,
.ui-select-wrap__text {
  grid-area: 1 / 1;
}

.ui-select-wrap > select {
  align-self: stretch;
  height: auto;
  -webkit-text-fill-color: transparent;
}

.ui-select-wrap > select option {
  -webkit-text-fill-color: var(--text);
}

.ui-select-wrap__text {
  z-index: 1;
  align-self: center;
  min-width: 0;
  padding: var(--space-2) calc(var(--space-3) + var(--space-5)) var(--space-2) calc(var(--space-3) + 1px);
  color: var(--text);
  font: var(--font-weight-medium) var(--font-size-value) / var(--line-height-control) var(--font-system);
  overflow-wrap: break-word;
  pointer-events: none;
}

/* Auswahlfelder am Computer (Maus, ab 1024 px), seit 28.09.2026 auf allen Screens (vorher nur Body): wie ein Eingabefeld, die Liste öffnet als Karte mit Zeilen von
   44 px, die gewählte Zeile in --page und 500. Das braucht «appearance: base-select» (Chromium, Edge); andere Browser
   zeigen weiter ihre eigene Liste. Auf dem Handy bleibt die Auswahl des Geräts als Blatt. Ausgenommen sind die
   Auswahlfelder mit Namen aus den Daten (.nutrition-meal-select, .ui-select-wrap, Text darüber); sie behalten die Liste
   des Geräts. */
@media (min-width: 1024px) and (pointer: fine) {
  @supports (appearance: base-select) {
    body select:not([multiple]):not([size]):not(.nutrition-meal-select > select, .ui-select-wrap > select),
    body select:not([multiple]):not([size]):not(.nutrition-meal-select > select, .ui-select-wrap > select)::picker(select) {
      appearance: base-select;
    }

    body select:not([multiple]):not([size]):not(.nutrition-meal-select > select, .ui-select-wrap > select) {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: 0 var(--space-3);
      cursor: pointer;
    }

    /* Chevron als Umriss (wie die Icons), gezeichnet aus zwei Rahmenlinien in --text-3; kein gefülltes Dreieck. */
    body select:not([multiple]):not([size]):not(.nutrition-meal-select > select, .ui-select-wrap > select)::picker-icon {
      content: "";
      box-sizing: border-box;
      width: var(--space-2);
      height: var(--space-2);
      margin: 0 0 var(--space-1) auto;
      border: solid var(--text-3);
      border-width: 0 1.5px 1.5px 0;
      transform: rotate(45deg);
    }

    body select:not([multiple]):not([size]):not(.nutrition-meal-select > select, .ui-select-wrap > select)::picker(select) {
      margin-top: var(--space-1);
      padding: var(--space-1);
      color: var(--text);
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-card);
      box-shadow: none;
    }

    body select:not([multiple]):not([size]):not(.nutrition-meal-select > select, .ui-select-wrap > select) option {
      display: flex;
      align-items: center;
      min-height: var(--control-height);
      padding: 0 var(--space-3);
      font: var(--font-weight-regular) var(--font-size-value) / 1.4 var(--font-system);
      border-radius: var(--radius-button);
    }

    body select:not([multiple]):not([size]):not(.nutrition-meal-select > select, .ui-select-wrap > select) option::checkmark {
      display: none;
    }

    body select:not([multiple]):not([size]):not(.nutrition-meal-select > select, .ui-select-wrap > select) option:hover,
    body select:not([multiple]):not([size]):not(.nutrition-meal-select > select, .ui-select-wrap > select) option:checked {
      background: var(--page);
    }

    body select:not([multiple]):not([size]):not(.nutrition-meal-select > select, .ui-select-wrap > select) option:checked {
      font-weight: var(--font-weight-medium);
    }

    body select:not([multiple]):not([size]):not(.nutrition-meal-select > select, .ui-select-wrap > select) option:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: -2px;
    }
  }
}