/* labs area styles (owned by the labs builder). Use app.css tokens; keep the restrained house style. */
/* ===== Labs: virtual science practicals ===== */

:root {
  --lab-liquid: color-mix(in srgb, var(--sky) 75%, var(--surface));
  --lab-water: color-mix(in srgb, var(--sky) 70%, var(--surface));
  --lab-gas: color-mix(in srgb, var(--sky-ink) 16%, transparent);
  --lab-cloud: #E5DAB2;
  --lab-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lab-cloud: #8C8160; } }
:root[data-theme="dark"] { --lab-cloud: #8C8160; }

.lab-sym { font: italic 500 13.5px/1 var(--font-read); color: var(--ink-2); margin-left: 3px; letter-spacing: 0; }
.lab-sym.big { font-size: 18px; margin: 0; min-width: 26px; color: var(--ink); }
.input.mono, .lab-editor code, .lab-report code { font-family: var(--lab-mono); font-size: 12.5px; }
.lab-editor code, .lab-report code { background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.lab-h { font-size: 14px; margin-bottom: 10px; }

/* ---------------------------------------------------------------- bench */
.lab-bench { display: flex; flex-direction: column; gap: 16px; }
.lab-brief-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.lab-aim { font-size: 15.5px; line-height: 1.6; margin-top: 6px; max-width: 72ch; }
.lab-brief-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 22px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.lab-brief-grid:empty { display: none; }
.lab-brief h4 { font: 600 12px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 6px; }
.lab-list { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); }
.lab-list li { margin: 3px 0; padding-left: 2px; }
.lab-method { grid-column: span 2; }
.lab-safety { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r); background: var(--warn-tint); align-self: start; }
.lab-safety > svg { color: var(--warn); flex: none; margin-top: 1px; }
.lab-safety p { font-size: 13.5px; }
@media (max-width: 680px) { .lab-method { grid-column: auto; } }

.lab-rig { display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); gap: 16px; align-items: start; }
.lab-stage { padding: 14px 16px 16px; }
.lab-stage-head { display: flex; justify-content: space-between; align-items: center; min-height: 30px; margin-bottom: 4px; }
.lab-app { width: 100%; aspect-ratio: 480 / 300; }
.lab-app svg, .lab-thumb svg { width: 100%; height: 100%; display: block; }
.lab-panel { display: flex; flex-direction: column; gap: 18px; }
.lab-ctls { display: flex; flex-direction: column; gap: 16px; }
.lab-ctl { display: flex; flex-direction: column; gap: 4px; }
.lab-ctl label { font-size: 13px; font-weight: 550; }
.lab-ctl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lab-ctl output { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lab-range-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* range: hairline track, ink thumb */
.lab-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 2px 0 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.lab-range:focus { outline: none; }
.lab-range::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: var(--surface-3); }
.lab-range::-moz-range-track { height: 4px; border-radius: 99px; background: var(--surface-3); }
.lab-range::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--ink-3); }
.lab-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); box-shadow: var(--sh-1); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.lab-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); box-shadow: var(--sh-1); transition: transform .18s var(--ease); }
.lab-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.lab-range:active::-moz-range-thumb { transform: scale(1.12); }
.lab-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 30%, transparent); }
.lab-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 30%, transparent); }
.lab-num { display: flex; align-items: center; gap: 6px; }
.lab-num .input { width: 112px; text-align: center; }
.lab-unit { color: var(--ink-2); font-size: 13px; white-space: nowrap; }

.lab-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; }
.lab-meter { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.lab-meter .k { font-size: 12px; line-height: 1.3; color: var(--ink-3); }
.lab-meter-v { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.lab-meter-v b { font: 600 22px/1.1 var(--font-ui); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lab-meter-v .u { color: var(--ink-2); font-size: 13px; white-space: nowrap; }
.lab-record { display: flex; flex-direction: column; gap: 8px; }
.lab-record .btn.pulse { animation: labPress .3s var(--ease); }
@keyframes labPress { 40% { transform: scale(.975); } }

.lab-data { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.lab-t th { vertical-align: bottom; }
.lab-t th small { display: block; margin-top: 2px; min-width: 64px; max-width: 128px; margin-left: auto; font-weight: 400; font-size: 11px; line-height: 1.3; color: var(--ink-3); text-transform: none; letter-spacing: 0; white-space: normal; }
.lab-t td.num, .lab-t th { text-align: right; }
.lab-t .lab-idx { text-align: left; width: 34px; color: var(--ink-3); }
.lab-t tr.fresh td { animation: labRowIn .42s var(--ease); }
@keyframes labRowIn { from { opacity: 0; transform: translateY(-4px); } }
.lab-row-act { white-space: nowrap; text-align: right; width: 72px; }
.lab-row-act .iconbtn { width: 30px; height: 30px; }
.lab-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 12px; text-align: center; color: var(--ink-3); font-size: 13.5px; }
.lab-empty p { max-width: 42ch; }

.lab-graph { width: 100%; height: auto; display: block; overflow: visible; }
.g-gridline { stroke: var(--line); stroke-width: 1; }
.g-axis { stroke: var(--ink-3); stroke-width: 1.2; }
.g-tick { fill: var(--ink-3); font: 11px var(--font-ui); font-variant-numeric: tabular-nums; }
.g-title { fill: var(--ink-2); font: 500 12.5px var(--font-ui); }
.g-empty { fill: var(--ink-3); font: 13px var(--font-ui); }
.g-pt { transition: transform .38s var(--ease); }
.g-pt circle { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; }
.g-pt.fresh circle, .g-pt.static circle { animation: labPtIn .36s var(--ease) both; }
.g-pt.static circle { animation-delay: inherit; }
.g-pt.hi circle { fill: var(--brand); }
@keyframes labPtIn { from { opacity: 0; transform: scale(.2); } }
.g-fit { stroke: var(--brand); stroke-width: 2; opacity: 0; transition: transform .42s var(--ease), opacity .3s var(--ease); }
.g-fit.on { opacity: .9; }
.g-join { fill: none; stroke: var(--ink-3); stroke-width: 1.4; stroke-dasharray: 3 4; }
.g-ref { stroke: var(--info); stroke-width: 1.4; stroke-dasharray: 5 5; }
.lab-fit { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 10px; font-size: 13px; }
.lab-fitv .k { color: var(--ink-3); margin-right: 6px; }
.lab-fitv b { font-weight: 650; font-size: 14.5px; }
.lab-fitv .u { color: var(--ink-2); margin-left: 4px; }

.lab-qs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.lab-q-top { display: flex; gap: 10px; align-items: flex-start; }
.lab-q-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); }
.lab-q-prompt { font-size: 14.5px; line-height: 1.55; padding-top: 1px; min-width: 0; }
.lab-q-meta { margin: 4px 0 8px 34px; }
.lab-q textarea, .lab-ans, .lab-check, .lab-given, .lab-model { margin-left: 34px; }
.lab-q textarea { width: calc(100% - 34px); }
.lab-ans { display: flex; align-items: center; gap: 8px; }
.lab-ans .input { max-width: 220px; }
.lab-check { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 9px 11px; border-radius: var(--r-sm); font-size: 13px; animation: labRowIn .32s var(--ease); }
.lab-check svg { flex: none; margin-top: 1px; }
.lab-check.ok { background: var(--ok-tint); } .lab-check.ok svg { color: var(--ok); }
.lab-check.bad { background: var(--bad-tint); } .lab-check.bad svg { color: var(--bad); }
.lab-given { margin-top: 8px; padding: 9px 11px; border-radius: var(--r-sm); border: 1px solid var(--line); white-space: pre-wrap; font-size: 14px; }
.lab-model { margin-top: 6px; }
.lab-submit { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 680px) {
  .lab-q textarea, .lab-ans, .lab-check, .lab-given, .lab-model, .lab-q-meta { margin-left: 0; }
  .lab-q textarea { width: 100%; }
  .lab-ans .input { max-width: none; flex: 1; }
}

.lab-result { border-color: var(--line-2); }
.lab-result-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.lab-result h2 { font-size: 18px; margin: 6px 0 8px; }
.lab-mark { text-align: right; white-space: nowrap; }
.lab-mark b { font: 650 36px/1 var(--font-ui); letter-spacing: -.03em; }
.lab-mark span { color: var(--ink-3); margin-left: 4px; font-size: 16px; }
.lab-feedback { margin: 12px 0 0; padding: 12px 14px; border-left: 3px solid var(--ink); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; white-space: pre-wrap; font-size: 14px; }
.lab-feedback footer { margin-top: 6px; font-size: 12px; color: var(--ink-3); }
.lab-save { color: var(--ink-3); white-space: nowrap; transition: color .2s var(--ease); }
.lab-save[data-state="error"] { color: var(--bad); }

/* -------------------------------------------------------------- apparatus */
.lab-svg { overflow: hidden; }
.lab-svg text { font-variant-numeric: tabular-nums; }
.a-label { fill: var(--ink-2); font: 500 11.5px var(--font-ui); }
.a-caption { fill: var(--ink-3); font: 500 11px var(--font-ui); }
.a-tiny { fill: var(--ink-3); font: 9.5px var(--font-ui); }
.a-letter { fill: var(--ink-2); font: 600 12px var(--font-ui); }
.a-read { fill: var(--ink); font: 600 12px var(--font-ui); }
.a-watch { fill: var(--ink); font: 600 18px var(--font-ui); letter-spacing: .02em; }
.a-lcd { fill: var(--surface-2); stroke: var(--line); }
.a-lcd-num { fill: var(--ink); font: 600 16px var(--font-ui); }
.a-rod { stroke: var(--ink-3); stroke-width: 4; stroke-linecap: round; }
.a-rod.thin { stroke-width: 2; }
.a-base, .a-clamp { fill: var(--surface-3); stroke: var(--line-2); }
.a-clamp { stroke: var(--ink-3); }
.a-pivot { fill: var(--ink-2); }
.a-string { stroke: var(--ink-2); stroke-width: 1.3; }
.a-bob { fill: var(--ink); }
.a-shine { fill: var(--surface); opacity: .35; }
.a-tick { stroke: var(--ink-3); stroke-width: 1.1; }
.a-tick.minor { stroke: var(--line-2); }
.a-arc { fill: none; stroke: var(--ink-3); stroke-width: 1.1; }
.a-arc.faint { stroke: var(--line-2); }
.a-fid { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 4; }
.a-guide { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 4; }
.a-dim line { stroke: var(--ink-3); stroke-width: 1; }
.a-spring { fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.a-hook { fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; }
.a-disc { fill: var(--ink-3); stroke: var(--surface); stroke-width: .8; }
.a-ruler { fill: var(--surface); stroke: var(--line-2); }
.a-pointer { stroke: var(--brand); stroke-width: 1.2; }
.a-pointer-head { fill: var(--brand); }
.a-wire { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; }
.a-flow { fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-dasharray: 0.1 15; stroke-linecap: round; opacity: .45; }
.a-node, .a-hub { fill: var(--ink); }
.a-body, .a-face { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.2; }
.a-window { fill: var(--surface-2); stroke: var(--line); }
.a-needle { stroke: var(--brand); stroke-width: 1.6; stroke-linecap: round; }
.a-resistor { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.6; }
.a-glass { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.a-liquid { fill: var(--lab-liquid); }
.a-cloud { fill: var(--lab-cloud); }
.a-paper, .a-inset { fill: var(--surface); stroke: var(--line-2); }
.a-cross { stroke: var(--ink); stroke-width: 9; stroke-linecap: round; }
.a-rim { fill: none; stroke: var(--line-2); stroke-dasharray: 2 3; }
.a-bung { fill: var(--ink-3); }
.a-tube { fill: none; stroke: var(--ink-3); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.a-barrel { fill: none; stroke: var(--ink-3); stroke-width: 1.4; }
.a-gas { fill: var(--lab-gas); }
.a-seal { fill: var(--ink-2); }
.a-bubble { fill: none; stroke: var(--ink-3); stroke-width: 1; }
.a-stem { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1; }
.a-col, .a-bulb { fill: var(--brand); }
.a-bath { fill: var(--lab-water); stroke: var(--line-2); }
.a-surface { stroke: var(--sky-ink); stroke-width: 1; opacity: .35; }
.a-axis { stroke: var(--ink-3); stroke-width: 1.1; }
.a-curve { fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linejoin: round; }
.a-dot { fill: var(--brand); stroke: var(--surface); stroke-width: 2; }

/* ---------------------------------------------------------- student list */
.lab-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.lab-card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; }
.lab-card h3 { font-size: 16px; }
.lab-card-aim { margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lab-card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); }
.lab-thumb { display: block; aspect-ratio: 480 / 300; border-radius: var(--r); background: var(--surface-2); overflow: hidden; }
.lab-card .lab-thumb { margin: -6px -6px 0; }

/* ------------------------------------------------------------- studio */
.lab-li { display: flex; gap: 10px; align-items: center; min-width: 0; }
.lab-li-ic { flex: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.lab-li b { display: block; font-weight: 600; }
.lab-li .small { display: block; }

.lab-sub { font-size: 15px; margin: 22px 0 12px; }
.lab-starters { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.lab-starter, .lab-tpl { position: relative; cursor: pointer; border: 1px solid var(--line); background: var(--surface); transition: border-color .18s var(--ease), box-shadow .22s var(--ease), background .18s var(--ease); }
.lab-starter { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r-xl); }
.lab-starter:hover, .lab-tpl:hover { border-color: var(--line-2); }
.lab-starter.on, .lab-starter:has(input:checked) { border-color: var(--ink); box-shadow: var(--sh-2); }
.lab-starter input, .lab-tpl input { position: absolute; opacity: 0; pointer-events: none; }
.lab-starter:focus-within, .lab-tpl:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.lab-starter-t { display: flex; flex-direction: column; gap: 3px; }
.lab-starter-t .chip { align-self: flex-start; margin-top: 4px; }

.lab-ed-head h1 { overflow-wrap: anywhere; }
.lab-ed-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.lab-ed-body.wide { grid-template-columns: minmax(0, 1fr); }
.lab-ed-body.wide .lab-ed-side { display: none; }
.lab-ed-side { position: sticky; top: calc(var(--topbar) + 16px); }
.lab-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bad); display: inline-block; }
.lab-item { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; background: var(--surface); }
.lab-item.compact { display: flex; gap: 8px; align-items: flex-end; padding: 12px; }
.lab-item.compact .lab-grid { flex: 1; }
.lab-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-height: 30px; }
.lab-row-tools { margin-left: auto; display: flex; gap: 2px; }
.lab-row-tools .iconbtn { width: 30px; height: 30px; }
.lab-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lab-grid .span2 { grid-column: span 2; }
.lab-grid .full { grid-column: 1 / -1; }
.lab-editor .field > .seg { align-self: flex-start; }
.lab-hint { font-size: 12.5px; min-height: 1em; }
.lab-hint.ok { color: var(--ok); }
.lab-hint.bad { color: var(--bad); font-weight: 500; }
.lab-qprev { padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 14px; }
.lab-checks .card-head { margin-bottom: 10px; }
.lab-issues { list-style: none; margin: 0 -6px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lab-issues button { display: flex; gap: 8px; align-items: flex-start; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--r-sm); background: none; text-align: left; font-size: 13px; color: var(--ink); transition: background .15s var(--ease); }
.lab-issues button:hover { background: var(--surface-2); }
.lab-issues svg { flex: none; margin-top: 2px; }
.lab-issues .error svg { color: var(--bad); }
.lab-issues .warn svg { color: var(--warn); }
.lab-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.lab-sum div { padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); }
.lab-sum dt { font-size: 11.5px; color: var(--ink-3); }
.lab-sum dd { margin: 0; font-weight: 650; font-size: 16px; }
.lab-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.lab-tpl { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: var(--r-lg); }
.lab-tpl.on, .lab-tpl:has(input:checked) { border-color: var(--ink); background: var(--surface-2); }
.lab-tpl > svg { flex: none; margin-top: 2px; color: var(--ink-2); }
.lab-tpl b { display: block; font-weight: 600; font-size: 13.5px; }
.lab-app-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.lab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pick.sm { padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.lab-ideal { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.lab-ideal .lab-fit { flex-direction: row; }
.lab-sheet { margin-top: 14px; }
.lab-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.lab-sheet-file { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 12px; }
.lab-preview-note { margin-bottom: 16px; }

/* ------------------------------------------------------------- results */
.lab-scatter { max-width: 640px; }
.lab-report { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; align-items: start; }
.lab-report-main > section + section { margin-top: 22px; }
.lab-report-side { position: sticky; top: 0; display: flex; flex-direction: column; gap: 14px; }
.lab-big { font: 650 28px/1.1 var(--font-ui); letter-spacing: -.02em; margin: 6px 0; }
.lab-concl { white-space: pre-wrap; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 14px; }

@media (max-width: 1100px) {
  .lab-data, .lab-app-edit { grid-template-columns: minmax(0, 1fr); }
  .lab-ed-body { grid-template-columns: minmax(0, 1fr); }
  .lab-ed-side { position: static; }
}
@media (max-width: 980px) {
  .lab-rig { grid-template-columns: minmax(0, 1fr); }
  .lab-report { grid-template-columns: minmax(0, 1fr); }
  .lab-report-side { position: static; }
}
@media (max-width: 680px) {
  .lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lab-stage { padding: 10px 10px 12px; }
  .lab-meter-v b { font-size: 19px; }
  /* drawings and graphs scale down on a phone: keep their text legible */
  .a-caption { font-size: 14px; } .a-tiny { font-size: 12.5px; } .a-label, .a-read { font-size: 14.5px; } .a-letter { font-size: 14px; }
  .g-tick { font-size: 17px; } .g-title { font-size: 19px; } .g-empty { font-size: 19px; }
  .lab-result-head { flex-direction: column; }
  .lab-mark { text-align: left; }
}