.lab-scanner-privacy,
.lab-scanner-status,
.lab-scanner-page small,
.lab-scanner-review-row small {
  margin: 0;
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-label) / 1.5 var(--font-system);
}

.lab-scanner {
  min-height: 100%;
  color: var(--text);
  background: var(--page);
}

.lab-scanner[hidden] {
  display: none !important;
}

#labs[hidden] {
  display: none !important;
}

.lab-scanner-header {
  display: grid;
  grid-template-columns: var(--control-height) minmax(0, 1fr) var(--control-height);
  align-items: center;
  margin-bottom: var(--space-4);
}

.lab-scanner-header h2 {
  margin: 0;
  font: var(--font-weight-medium) var(--font-size-subscreen) / 1.4 var(--font-system);
  text-align: center;
}

.lab-scanner-icon {
  display: grid;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 0;
  place-items: center;
}

.lab-scanner-privacy {
  padding: var(--space-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.lab-scanner-stage {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.lab-scanner-source-actions,
.lab-scanner-actions {
  display: grid;
  gap: var(--space-2);
}

.lab-scanner-source-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lab-scanner-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.lab-scanner-upload {
  display: grid;
  min-height: calc(var(--control-height) * 2);
  padding: var(--space-3);
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  cursor: pointer;
  place-items: center;
  text-align: center;
}

.lab-scanner-pages {
  display: grid;
  gap: var(--space-2);
}

.lab-scanner-report-date {
  display: grid;
  gap: var(--space-1);
}

.lab-scanner-page {
  display: grid;
  grid-template-columns: var(--icon-size) minmax(0, 1fr) calc(var(--control-height) * 3);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.lab-scanner-page input,
.lab-scanner-review-row input[type="checkbox"] {
  width: var(--icon-size);
  height: var(--icon-size);
  accent-color: var(--accent);
}

.lab-scanner-page canvas {
  width: 100%;
  max-height: calc(var(--control-height) * 4);
  object-fit: contain;
  background: var(--page);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
}

.lab-scanner-progress {
  height: var(--space-1);
  overflow: hidden;
  background: var(--border);
  border-radius: var(--radius-progress);
}

.lab-scanner-progress span {
  display: block;
  width: var(--scanner-progress, 0%);
  height: 100%;
  background: var(--accent);
  transition: width .2s ease;
}

.lab-scanner-review-table {
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.lab-scanner-review-columns,
.lab-scanner-review-summary {
  display: grid;
  grid-template-columns: var(--icon-size) minmax(0, 1fr) minmax(calc(var(--control-height) + var(--space-1)), .72fr) minmax(calc(var(--control-height) + var(--space-3)), .9fr) var(--icon-size);
  gap: var(--space-2);
  align-items: center;
}

.lab-scanner-review-columns {
  min-height: calc(var(--control-height) - var(--space-2));
  padding: 0 var(--space-2);
  color: var(--text-3);
  background: var(--page);
  font: var(--font-weight-regular) var(--font-size-label) / 1.3 var(--font-system);
}

.lab-scanner-review-row + .lab-scanner-review-row {
  border-top: 1px solid var(--border);
}

.lab-scanner-review-summary {
  min-height: calc(var(--control-height) + var(--space-3));
  padding: var(--space-2);
}

.lab-scanner-review-row.is-unselected .lab-scanner-review-summary {
  color: var(--text-3);
}

.lab-scanner-review-select {
  display: grid;
  place-items: center;
}

.lab-scanner-review-marker,
.lab-scanner-review-toggle {
  min-width: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
}

.lab-scanner-review-marker,
.lab-scanner-review-result,
.lab-scanner-review-reference {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.lab-scanner-review-marker strong,
.lab-scanner-review-result strong,
.lab-scanner-review-reference strong {
  overflow: hidden;
  font: var(--font-weight-medium) var(--font-size-list) / 1.3 var(--font-system);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab-scanner-review-marker strong {
  display: -webkit-box;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lab-scanner-review-marker small,
.lab-scanner-review-result small,
.lab-scanner-review-reference small {
  overflow: hidden;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.2 var(--font-system);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab-scanner-review-toggle {
  display: grid;
  place-items: center;
}

.lab-scanner-review-toggle .bo-icon {
  transform: rotate(90deg);
}

.lab-scanner-review-row.is-open .lab-scanner-review-toggle .bo-icon {
  transform: rotate(-90deg);
}

.lab-scanner-review-editor {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--page);
  border-top: 1px solid var(--border);
}

.lab-scanner-review-editor[hidden] {
  display: none !important;
}

.lab-scanner-review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.lab-scanner-review-grid .is-wide {
  grid-column: 1 / -1;
}

.lab-scanner-raw {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

@media (max-width: 520px) {
  .lab-scanner-source-actions {
    grid-template-columns: 1fr;
  }
}

/* Scanner-Kontrolle: Hinweise je Zeile, «Alle auswählen», übersprungene Werte */
.lab-scanner-select-all {
  justify-self: start;
}

.lab-scanner-review-warning,
.lab-scanner-skipped {
  margin: 0;
  padding: 0 var(--space-3) var(--space-3);
  color: var(--warning-text);
  font: var(--font-weight-regular) var(--font-size-label) / 1.5 var(--font-system);
}

.lab-scanner-review-warning[hidden] {
  display: none !important;
}

.lab-scanner-skipped {
  padding: var(--space-3) 0 0;
}

.lab-scanner-skipped p,
.lab-scanner-skipped ul {
  margin: 0;
}

.lab-scanner-skipped ul {
  padding-left: var(--space-4);
}

/* Labor-Screen (27.09.2026): eine Menüzeile mit «Blutbild einlesen» und «Wert» (einzige primäre Aktion),
   darunter die Werte. Gruppen mit Abstand und Trennlinien, Rahmen nur um die Gruppe (docs/DESIGN-SYSTEM.md). */
.lab-menu-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.lab-menu-row__scan {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  min-height: var(--control-height);
  flex: 1;
  padding: 0;
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-value) / 1.3 var(--font-system);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.lab-menu-row__add {
  gap: var(--space-2);
  width: auto;
  flex: none;
}

.lab-menu-row .bo-icon {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: none;
}

.lab-screen-status {
  margin: var(--space-2) 0 0;
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.5 var(--font-system);
}

.lab-screen-status:empty {
  display: none;
}

.lab-values {
  margin-top: var(--space-4);
}

.lab-values__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.lab-values__head .lab-coverage {
  margin: 0;
}

/* Am Computer (ab 1024 px, Stand 27.09.2026): links Suche und Werte, rechts Verlauf und Messungen des gewählten Werts
   als eigene Karte; sie bleibt beim Blättern durch eine lange Werteliste stehen. Menüzeile und Pills gehen über beide
   Spalten. Auf dem Handy klappt der Wert wie bisher in seiner Zeile auf. */
.lab-detail-pane[hidden] {
  display: none;
}

@media (min-width: 1024px) {
  #healthScreen > .me-screen:has(.lab-values--split) {
    width: 100%;
  }

  .lab-values.lab-values--split {
    display: grid;
    grid-template-columns: var(--split-list-width) minmax(0, 1fr);
    grid-template-rows: repeat(5, auto) 1fr;
    column-gap: var(--space-5);
    align-items: start;
  }

  .lab-values--split > * {
    grid-column: 1;
  }

  .lab-values--split > .lab-detail-pane {
    position: sticky;
    top: var(--space-4);
    grid-column: 2;
    grid-row: 1 / span 6;
    padding: var(--space-3);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
  }

  .lab-detail-pane__title {
    margin: 0 0 var(--space-3);
    color: var(--text);
    font: var(--font-weight-medium) var(--font-size-value) / 1.4 var(--font-system);
  }

  .lab-detail-pane .lab-detail {
    display: block;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}

.lab-text-button {
  min-height: var(--control-height);
  margin-left: auto;
  padding: 0 var(--space-1);
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
  white-space: nowrap;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.lab-empty,
.lab-search-empty {
  margin: var(--space-2) 0 var(--space-4);
}

.lab-search-empty {
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
}

.lab-catalog-note {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.5 var(--font-system);
}

/* Wert löschen: Blatt von unten, Name des Werts im Text, «Löschen» und «Abbrechen» untereinander. */
.lab-delete-sheet__body {
  display: grid;
  gap: var(--space-3);
}

/* Eigenen Marker anlegen (Stand 28.09.2026): Name und Einheit untereinander, darunter die zwei Knöpfe. */
.lab-custom-marker-sheet__body {
  display: grid;
  gap: var(--space-3);
}

.lab-delete-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);
}

.lab-catalog-note p {
  margin: 0;
}

.lab-catalog-note .ui-secondary-button {
  width: auto;
}

.lab-skeleton-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control-height);
  padding: var(--space-3);
}

.lab-skeleton-row + .lab-skeleton-row {
  border-top: 1px solid var(--border);
}

.lab-skeleton-row__name {
  --skeleton-width: 40%;
}

.lab-skeleton-row__value {
  --skeleton-width: 20%;
}

.lab-export-button {
  margin-top: var(--space-4);
}

.lab-export-button[hidden] {
  display: none;
}

.lab-card.empty-marker .lab-ref {
  margin-top: var(--space-1);
  font-size: var(--font-size-label);
}

.lab-value-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--control-height);
}

.lab-hist-actions .remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-height);
  min-height: var(--control-height);
  padding: 0 var(--space-2);
}

.lab-hist-actions .remove .bo-icon,
.lab-card-arrow .bo-icon {
  width: var(--icon-size);
  height: var(--icon-size);
}

.lab-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Wert erfassen: Blatt von unten, «Abbrechen» als Textlink oben links, primärer Button fest unten.
   Auf breiten Bildschirmen so breit wie die Inhaltsspalte der Ich-Screens. */
dialog.lab-entry-sheet {
  width: min(100%, 720px);
  margin: auto auto 0;
}

.lab-entry-sheet__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.lab-entry-sheet__header .ui-form__cancel {
  min-height: var(--control-height);
  cursor: pointer;
}

.lab-entry-sheet__header .ui-bottom-sheet__title {
  text-align: center;
}

.lab-entry-sheet .ui-bottom-sheet__body {
  padding-bottom: 0;
}

/* Labor-Erfassung (P1-9): Marker, Wert mit Einheit, Datum; Rest unter «Details» */
.lab-entry-form {
  display: grid;
  gap: var(--space-3);
}

.lab-entry-value {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.lab-entry-form > .ui-error-text {
  margin-top: calc(var(--space-2) * -1);
}

.lab-range-edit {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lab-range-edit.hidden {
  display: none;
}

.lab-range-edit legend {
  margin: 0 0 var(--space-2);
  padding: 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-section) / 1.4 var(--font-system);
}

.lab-range-edit__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.lab-range-help {
  margin: 0;
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

/* Bereichsfelder wie die übrigen Felder im Blatt: Gewicht 400, ohne Drehpfeile. */
.lab-range-edit .ui-field__control > input {
  font-weight: var(--font-weight-regular);
  appearance: textfield;
}

.lab-range-edit .ui-field__control > input::-webkit-inner-spin-button,
.lab-range-edit .ui-field__control > input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.lab-entry-form select.input,
.lab-entry-form input.input,
#labRangeKind {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  color: var(--text);
  font: var(--font-weight-regular) var(--font-size-value) / 1.4 var(--font-system);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
}

.lab-entry-form select.input:focus,
.lab-entry-form input.input:focus,
#labRangeKind:focus {
  border-color: var(--accent);
  outline: 0;
}

.lab-entry-form .lab-reference-mode {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.lab-entry-details {
  border-top: 1px solid var(--border);
}

.lab-entry-details > summary {
  min-height: var(--control-height);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-1) 0;
  color: var(--text-2);
  font: var(--font-weight-regular) var(--font-size-list) / 1.4 var(--font-system);
  cursor: pointer;
}

/* Ruhiger Hinweis unter «Details» (28.09.2026): Der Bereich kommt vom eigenen Befund; Malna füllt keinen vor.
   Bei qualitativen Tests (ohne Zahlenbereich) verborgen. */
.lab-entry-details__hint {
  color: var(--text-3);
  font: var(--font-weight-regular) var(--font-size-label) / 1.4 var(--font-system);
}

.lab-entry-details__hint[hidden] {
  display: none;
}

.lab-entry-details__body {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
}

.lab-entry-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) 0 max(var(--space-4), env(safe-area-inset-bottom));
  background: var(--card);
}

.lab-entry-actions > button {
  width: 100%;
  min-height: var(--control-height);
}

/* Präparate: Entfernen durch Wischen nach links, Rückfrage im Blatt von unten */
.med-swipe {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.med-swipe__content {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  background: var(--card);
  touch-action: pan-y;
  transition: transform 160ms ease;
}

.med-swipe__content > [data-glp1-open] {
  grid-column: 1 / -1;
  justify-self: start;
}

.med-swipe.is-revealed .med-swipe__content {
  transform: translateX(calc(var(--control-height) * -2.5));
}

/* «Entfernen» liegt unter der Zeile und ist erst nach dem Wischen zu sehen; bis dahin ist der Knopf auch unsichtbar
   (vorher lag seine Beschriftung verdeckt unter dem Text der Zeile). Beim Zurückschieben verschwindet er erst, wenn die
   Zeile ihn wieder bedeckt. */
.med-swipe__remove {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(var(--control-height) * 2.5);
  color: var(--card);
  font: var(--font-weight-medium) var(--font-size-list) / 1 var(--font-system);
  background: var(--text);
  border: 0;
  visibility: hidden;
  transition: visibility 0s linear 160ms;
}

.med-swipe.is-revealed .med-swipe__remove {
  visibility: visible;
  transition-delay: 0s;
}

.med-swipe__actions {
  display: grid;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  color: var(--text-3);
  background: transparent;
  border: 0;
  place-items: center;
}

.medication-remove-sheet .ui-bottom-sheet__body {
  display: grid;
  gap: var(--space-3);
}

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

@media (prefers-reduced-motion: reduce) {
  .med-swipe__content,
  .med-swipe__remove {
    transition: none;
  }
}

/* Zahlen in Wertespalten stehen tabellarisch untereinander. Am Dateiende, weil die font-Kurzformen
   weiter oben (und in components.css) die Ziffernart sonst wieder zurücksetzen. */
.lab-value,
.lab-meta,
.lab-hist-row,
.lab-coverage,
.lab-trend-chart figcaption,
.lab-wizard-history-row,
.lab-scanner-review-result strong,
.lab-scanner-review-result small,
.lab-scanner-review-reference strong,
.lab-scanner-review-reference small,
.lab-entry-form input.input,
.lab-entry-form .ui-field__control > input,
.lab-scanner-review-editor input {
  font-variant-numeric: tabular-nums;
}