/* ---- V1.64 Lab results (lab-): Client\Apps\Lab (LabPage). Design system tokens only (--os-*), full page width; a new app file: every
   design guard at zero (DesignGuardTests.ZeroTolerance). ---- */

.lab-num { max-width: 9rem; }
.lab-results { display: flex; flex-wrap: wrap; gap: var(--os-space-1); }
.lab-result { padding: 0 var(--os-space-2); border-radius: var(--os-radius-pill); border: var(--os-border-w) solid var(--os-border-subtle);
    background: var(--os-neutral-soft); color: var(--os-neutral-text); white-space: nowrap; }
.lab-result--ok { background: var(--os-good-soft); color: var(--os-good-text); border-color: var(--os-good-border); }
.lab-result--warn { background: var(--os-warn-soft); color: var(--os-warn-text); border-color: var(--os-warn-border); }
.lab-result--low, .lab-result--high { background: var(--os-bad-soft); color: var(--os-bad-text); border-color: var(--os-bad-border); }

/* ---- V1.69 the premium pass (mockup 20): the overview, the phone's My shift, the settings ---- */
.lab-page { display: flex; flex-direction: column; gap: var(--os-space-4); min-width: 0; }
.lab-page > * { min-width: 0; max-width: 100%; }
.lab-page .os-grid { align-items: stretch; }
.lab-col { --span: 4; display: flex; flex-direction: column; gap: var(--os-gutter); min-width: 0; }
.lab-col.lab-col--8 { --span: 8; }
.lab-col.lab-col--7 { --span: 7; }
.lab-col.lab-col--5 { --span: 5; }
/* The overview's columns end together: each column stretches to its row, its last panel fills what is left */
.lab-ovgrid > .lab-col > :last-child { flex: 1 1 auto; }
.lab-ovgrid > .lab-col > div:last-child > .os-panel { height: 100%; }
.lab-brief { display: flex; flex-direction: column; gap: var(--os-gutter); }
.lab-pad { padding: var(--os-space-3) var(--os-space-4); }
.lab-nowrap { white-space: nowrap; }
.lab-click { cursor: pointer; }
.lab-clip2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lab-meta-warn { color: var(--os-warn-text); }
.lab-page .os-panel--flush > .os-panel__foot { margin: 0; flex-wrap: wrap; }
.lab-page .os-panel__foot { flex-wrap: wrap; }
.lab-pick { width: auto; max-width: 14rem; }

/* The figures under the chart */
.lab-stats { display: flex; flex-wrap: wrap; gap: var(--os-space-3) var(--os-space-5); margin: 0; width: 100%; }
.lab-stats > div { display: grid; gap: var(--os-space-1); padding-right: var(--os-space-5); border-right: var(--os-border-w) solid var(--os-border-subtle); }
.lab-stats > div:last-child { border-right: 0; }
.lab-stats dt { font: var(--os-type-caption); color: var(--os-text-2); }
.lab-stats dd { margin: 0; font: var(--os-type-kpi-sm); color: var(--os-text); font-variant-numeric: tabular-nums; }
.lab-stats small { font: var(--os-type-caption); color: var(--os-text-2); }

/* Needs attention now: a group's head, then its items */
.lab-agroup { display: flex; justify-content: space-between; gap: var(--os-space-2); padding: var(--os-space-1h) var(--os-space-4);
    background: var(--os-surface-sunken); border-top: var(--os-border-w) solid var(--os-border-subtle); font: var(--os-type-caption); color: var(--os-text-2); }
.lab-agroup:first-child { border-top: 0; }
.lab-alist { list-style: none; margin: 0; padding: 0; }
.lab-alist__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--os-space-3); align-items: center;
    padding: var(--os-space-3) var(--os-space-4); border-top: var(--os-border-w) solid var(--os-border-subtle); }
.lab-alist__item:first-child { border-top: 0; }
.lab-alist__body { display: grid; gap: var(--os-space-0h); min-width: 0; }
.lab-alist__title { font: var(--os-type-body-strong); color: var(--os-text); overflow-wrap: anywhere; }
.lab-alist__value { font: var(--os-type-body-strong); color: var(--os-text); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lab-alist__item--bad .lab-alist__value { color: var(--os-bad-text); }
.lab-alist__item--warn .lab-alist__value { color: var(--os-warn-text); }
.lab-alist__acts { display: flex; gap: var(--os-space-2); justify-content: flex-end; flex-wrap: wrap; }
.lab-alist__icon { display: inline-flex; padding: var(--os-space-1h); border-radius: var(--os-radius-md); background: var(--os-neutral-soft); color: var(--os-neutral-text); }
.lab-alist__icon--warn { background: var(--os-warn-soft); color: var(--os-warn-text); }
.lab-alist__icon--bad { background: var(--os-bad-soft); color: var(--os-bad-text); }
.lab-alist__icon--info { background: var(--os-info-soft); color: var(--os-info-text); }
@media (max-width: 899.98px) {
    .lab-alist__item { grid-template-columns: auto minmax(0, 1fr); }
    .lab-alist__value, .lab-alist__acts { grid-column: 2; justify-content: flex-start; text-align: left; }
}

/* Off-spec rate: one bar per point and analyte, the tick the window before */
.lab-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--os-space-3); }
.lab-bars li { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; gap: var(--os-space-1) var(--os-space-3); align-items: center; }
.lab-bars__label { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--os-space-2); min-width: 0; font: var(--os-type-small); color: var(--os-text); }
.lab-bars__label b { font: var(--os-type-body-strong); }
.lab-bars__pct { font: var(--os-type-body-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lab-bars__track { position: relative; height: 10px; border-radius: var(--os-radius-xs); background: var(--os-surface-sunken); }
.lab-bars__bar { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: var(--os-radius-xs); background: var(--os-chart-1); }
.lab-bars__bar.is-warn { background: var(--os-warn); }
.lab-bars__bar.is-bad { background: var(--os-bad); }
.lab-bars__tick { position: absolute; top: -3px; bottom: -3px; left: var(--x); width: 2px; background: var(--os-text); }
.lab-bars__delta { text-align: right; font-variant-numeric: tabular-nums; }
.lab-bars__axis { display: flex; justify-content: space-between; margin: var(--os-space-2) 4.5rem 0 0; }
.lab-ainote { display: flex; gap: var(--os-space-3); margin-top: var(--os-space-4); padding: var(--os-space-3); border-radius: var(--os-radius-md);
    border-left: var(--os-border-w-strong) solid var(--os-accent-brand); background: var(--os-surface-sunken); }
.lab-ainote > div { display: grid; gap: var(--os-space-1); }

/* Turnaround by point */
.lab-tatpoints { display: grid; gap: var(--os-space-2); width: 100%; }
.lab-tatpoints__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(4rem, 7rem) 3.5rem 2.5rem; gap: var(--os-space-2); align-items: center; }
.lab-tatpoints__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--os-text); }
.lab-tatpoints__track, .lab-tat { position: relative; display: inline-block; height: 6px; border-radius: var(--os-radius-xs); background: var(--os-surface-sunken); }
.lab-tatpoints__track { width: 100%; }
.lab-tatpoints__bar, .lab-tat__bar { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: var(--os-radius-xs); background: var(--os-text-2); }
.lab-tatpoints__bar.is-bad, .lab-tat__bar.is-bad { background: var(--os-bad); }
.lab-tat__bar.is-wait { background: var(--os-info); }
.lab-tatpoints__v { font: var(--os-type-body-strong); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lab-tatpoints__t { text-align: right; }

/* The latest samples */
.lab-ltable td, .lab-ltable th { vertical-align: middle; }
.lab-ltable tr.is-hot { background: var(--os-bad-soft); }
.lab-cellname { color: var(--os-text); white-space: nowrap; }
.lab-unit { display: block; font: var(--os-type-caption); color: var(--os-text-3); }
.lab-tat { width: 2.5rem; margin-right: var(--os-space-1h); vertical-align: middle; }
.lab-v { font-variant-numeric: tabular-nums; }
.lab-v.is-warn { color: var(--os-warn-text); }
.lab-v.is-bad { color: var(--os-bad-text); }
.lab-v.is-warn::before, .lab-v.is-bad::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: var(--os-space-1); border-radius: 1px;
    background: currentColor; vertical-align: middle; }
.lab-v.is-prelim { font-style: italic; color: var(--os-text-2); }

/* The settings and the events */
.lab-check { align-self: end; }
.lab-tests { display: flex; flex-wrap: wrap; gap: var(--os-space-1) var(--os-space-4); margin: 0; padding: var(--os-space-2) 0 0; border: 0; }
.lab-tests legend { padding: 0; margin-bottom: var(--os-space-1); }
.lab-events { list-style: none; margin: 0; padding: 0; }
.lab-events li { display: grid; grid-template-columns: 9rem auto minmax(0, 1fr); gap: var(--os-space-3); align-items: center; padding: var(--os-space-2) var(--os-space-4);
    border-top: var(--os-border-w) solid var(--os-border-subtle); overflow-wrap: anywhere; }
.lab-events li:first-child { border-top: 0; }
@media (max-width: 639.98px) {
    .lab-events li { grid-template-columns: minmax(0, 1fr); gap: var(--os-space-1); }
}

/* The phone: My shift first, the overview one tap away */
.lab-phone-only { display: none; }
@media (max-width: 639.98px) {
    .lab-phone-only { display: block; }
    .lab-phone-only.lab-hidden, .lab-phone-hide { display: none; }
}
.lab-phone-switch { margin-bottom: var(--os-space-1); }
.lab-mine { display: flex; flex-direction: column; gap: var(--os-space-3); }
.lab-mine__who { display: grid; gap: var(--os-space-0h); }
.lab-mine__who b { font: var(--os-type-h2); color: var(--os-text); }
.lab-mine__seg { width: 100%; }
.lab-mine__row { display: flex; align-items: center; justify-content: space-between; gap: var(--os-space-2); flex-wrap: wrap; }
.lab-mine__title { margin: var(--os-space-1) 0 var(--os-space-2); font: var(--os-type-h2); color: var(--os-text); }
.lab-mine__test { display: grid; gap: var(--os-space-2); padding: var(--os-space-3) 0; border-top: var(--os-border-w) solid var(--os-border-subtle); }
.lab-mine__label { font: var(--os-type-h3); color: var(--os-text); }
.lab-mine__entry { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--os-space-3); align-items: center; }
.lab-mine__input { display: flex; align-items: center; gap: var(--os-space-2); padding: 0 var(--os-space-3); border: var(--os-border-w-strong) solid var(--os-border-input);
    border-radius: var(--os-radius-lg); background: var(--os-field); }
.lab-mine__input.is-warn { border-color: var(--os-warn); background: var(--os-warn-soft); }
.lab-mine__input.is-bad { border-color: var(--os-bad); background: var(--os-bad-soft); }
.lab-mine__input .os-input { border: 0; background: transparent; min-height: 3rem; font: var(--os-type-kpi-sm); text-align: right; padding: 0; }
.lab-mine__input > span { font: var(--os-type-h3); color: var(--os-text-2); }
.lab-mine__spec { display: grid; gap: var(--os-space-0h); text-align: right; }
.lab-mine__acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--os-space-3); }
.lab-mine__big { min-height: 3rem; justify-content: center; font: var(--os-type-h3); }
.lab-mine__head { display: flex; align-items: center; justify-content: space-between; gap: var(--os-space-2); font: var(--os-type-label); color: var(--os-text-2); }
.lab-mine__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--os-space-2); }
.lab-mine__list li { display: flex; align-items: center; gap: var(--os-space-2); padding: var(--os-space-3); border: var(--os-border-w) solid var(--os-border-subtle);
    border-radius: var(--os-radius-lg); background: var(--os-surface); color: var(--os-text); overflow-wrap: anywhere; }
.lab-mine__list li .os-caption { margin-left: auto; }
.lab-mine__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--os-space-2); }
.lab-mine__tile { display: grid; gap: var(--os-space-1); text-align: left; padding: var(--os-space-3); border: var(--os-border-w) solid var(--os-border-subtle);
    border-radius: var(--os-radius-lg); background: var(--os-surface); color: var(--os-text); cursor: pointer; font: var(--os-type-caption); }
.lab-mine__tile.is-bad { border-left: var(--os-border-w-strong) solid var(--os-bad); }
.lab-mine__tile.is-warn { border-left: var(--os-border-w-strong) solid var(--os-warn); }
.lab-mine__tile b { font: var(--os-type-kpi-sm); }
.lab-mine__tile em { font-style: normal; color: var(--os-text-2); }