/* ============================================================================
   The lab results page's own layout (T343). Only what no other page has, and
   only on this page's own wrappers: the rows of the form and where their fields
   sit at a desk and on a phone, the gaps between them, the file line. Every
   element is the standard's (components.css); this sheet names none of its
   classes and restyles none of them.
   ========================================================================== */
/* the values of a report, one fieldset each, a gap between */
.labres-rows { display: grid; gap: 16px; margin-top: 12px; }
/* one value: the marker, how it is given, the value, the unit, the printed range */
.labres-row__grid { display: grid; gap: 12px 16px; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr) minmax(0, .9fr); align-items: end; }
.labres-row__foot { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-top: 8px; }
.labres-file { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.labres-consent { padding-top: 8px; }
.labres-form__act { padding-top: 8px; }

@media (max-width: 900px) {
  .labres-row__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .labres-row__marker { grid-column: 1 / -1; }
}

/* ---- T343b: the report first, its review, the expert's table, feedback -------------
   Only this page's own wrappers; every element inside them is the standard's. */
/* the person's row: the test, how the value is given, the value, the unit (no range: Jesse, 2026-09-18) */
.labres-row__grid--person { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr); }
@media (max-width: 900px) { .labres-row__grid--person { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* the entry: the drop box, and the way by hand under it as the second, quieter act, centred under the box */
.labres-entry__alt { display: flex; justify-content: center; margin-top: 16px; }
/* T343c: the review. The test takes the room, the value and the unit sit beside it, and the confirmation sits right
   after the unit with its quiet remove, never at the far edge */
.labres-review__table th:nth-child(1) { width: 40%; }
.labres-review__table th:nth-child(2) { width: 16%; }
.labres-review__table th:nth-child(3) { width: 17%; }
.labres-review__table th:nth-child(4) { width: 27%; }
.labres-review__ok { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; min-height: 44px; }
/* what the report printed, as small parts that wrap whole */
.labres-printed { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 4px; }
.labres-printed > span { max-width: 100%; overflow-wrap: anywhere; }
/* T343c: the entries. The columns sized to what they hold; one line of actions a row */
.labres-entries th:nth-child(1) { width: 8.25rem; }
.labres-entries th:nth-child(2) { width: auto; }
.labres-entries th:nth-child(4) { width: 13.75rem; }

.labres-review__flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.labres-review__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 16px 0; }
.labres-review__date { flex: 0 1 22rem; min-width: 0; }
/* T343d: Check all stands on its own line, directly over the first row it checks, at every width */
.labres-review__bulk { margin: 0 0 12px; }
/* T457: the report's own facts above the rows (its laboratory, whether every row was read, the columns left out), one tight block */
.labres-review__facts { margin: 0 0 16px; }
.labres-review__facts .bp-note { margin: 0 0 4px; }
.labres-review__act, .labres-review__feedback { margin-top: 16px; }
/* the expert's one table: the full width, the range as a pair of fields in two equal tracks */
.labres-table { margin-top: 12px; }
/* T343c: the columns sized to what they hold: the test widest, the range a pair, the remove narrow */
.labres-table__grid th:nth-child(1) { width: 30%; }
.labres-table__grid th:nth-child(2) { width: 19%; }
.labres-table__grid th:nth-child(3) { width: 25%; }
.labres-table__grid th:nth-child(4) { width: 16%; }
.labres-table__grid th:nth-child(5) { width: 10%; }
.labres-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.labres-table__add { margin-top: 12px; }
/* feedback: the control sits among a row's acts; its note opens in the row under it, or under the control */
.labres-feedback { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.labres-feedback__form { display: grid; gap: 12px; width: 100%; max-width: 38rem; margin-top: 8px; }
/* T343c: the expert's client page. The client's analysis (its own renderer, #dash-root) stood flush against the plan
   versions above it; it gets the section rhythm the rest of the page keeps */
.labres-gap { height: 40px; }
.labres-gap:has(+ [hidden]) { display: none; }

/* ---- T385b: the dashboard on T385a's approved design ------------------------------------------------------------
   Only this dashboard's own elements (labx-*): the two filters, the view switch, the list, the tags, the status word,
   the popup. The tones are the standard's (`data-cx-status` sets `--cx-status-tone`, components.css); the graph is the
   standard's (`BP_UI.bandTrend`); every button, section, empty state and trend inside is the standard's. This sheet
   names none of their classes. Every control a thumb uses keeps 44 px at a phone's width. */
.labx-filter__n[hidden], .labx-filter__panel[hidden], .labx-modal[hidden] { display: none; }

/* the status word: a dot in the tone, the word in ink */
.labx-status { display: inline-flex; align-items: center; gap: var(--cx-s-2); margin: 0; min-width: 0;
  font-size: var(--cx-t-body); font-weight: var(--w-med); color: var(--cx-ink); line-height: var(--cx-lh-small); }
.labx-status > i { flex: none; width: 12px; height: 12px; border-radius: var(--cx-r-pill); background: var(--cx-status-tone); }

/* the tags */
.labx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.labx-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: var(--cx-r-pill);
  background: var(--cx-raised); color: var(--cx-ink-2); font-size: var(--cx-t-small); font-weight: var(--w-reg); line-height: 1.3; }
.labx-tag--more { background: var(--cx-surface); border: 1px solid var(--cx-rule); font-weight: var(--w-med); }

/* the bar: the two filters and the view switch */
.labx-bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--cx-s-3) var(--cx-s-4); margin-top: var(--cx-s-5); }
.labx-filters { position: relative; display: flex; flex-wrap: wrap; gap: var(--cx-s-2); min-width: 0; }
.labx-filter { position: relative; min-width: 0; }
.labx-filter__btn { display: inline-flex; align-items: center; gap: var(--cx-s-2); min-height: var(--cx-control-phone); padding: 0 14px 0 16px;
  border: 1px solid var(--cx-edge); border-radius: var(--cx-r-pill); background: var(--cx-surface); color: var(--cx-ink);
  font: inherit; font-size: var(--cx-t-body); font-weight: var(--w-med); cursor: pointer; white-space: nowrap; }
.labx-filter__btn:hover { border-color: var(--cx-primary); color: var(--cx-primary); }
.labx-filter__btn svg { flex: none; transition: transform var(--dur-1) var(--ease); }
.labx-filter.is-open .labx-filter__btn svg { transform: rotate(180deg); }
.labx-filter.is-chosen .labx-filter__btn { border-color: var(--cx-primary); background: var(--cx-primary-wash); color: var(--cx-primary); }
.labx-filter__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--cx-r-pill);
  background: var(--cx-primary); color: #ffffff; font-size: var(--cx-t-label); font-weight: var(--w-semi); font-variant-numeric: tabular-nums; }
.labx-filter__panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 20rem; max-width: calc(100vw - 32px);
  max-height: min(70vh, 30rem); overflow: auto; padding: var(--cx-s-2); background: var(--cx-surface); border: 1px solid var(--cx-rule);
  border-radius: var(--cx-r); box-shadow: var(--sh-3); overscroll-behavior: contain; }
.labx-filter__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.labx-filter__legend { padding: 4px var(--cx-s-2) var(--cx-s-2); font-size: var(--cx-t-small); color: var(--cx-muted); line-height: var(--cx-lh-small); }
.labx-opt { display: flex; align-items: center; gap: 10px; min-height: var(--cx-control-phone); padding: 0 var(--cx-s-2);
  border-radius: var(--cx-r-sm); color: var(--cx-ink); font-size: var(--cx-t-body); line-height: 1.3; cursor: pointer; }
.labx-opt + .labx-opt { border-top: 1px solid var(--line); }
.labx-opt:hover { background: var(--cx-raised); }
.labx-opt input { flex: none; margin: 0; }
.labx-opt > span { min-width: 0; }
.labx-swatch { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: var(--cx-r-pill); background: var(--cx-status-tone); }
.labx-filter__note { margin: var(--cx-s-2) var(--cx-s-2) 0; font-size: var(--cx-t-small); color: var(--cx-muted); line-height: var(--cx-lh-small); }
.labx-filter__foot { display: flex; justify-content: space-between; gap: var(--cx-s-2); margin-top: var(--cx-s-2); padding: var(--cx-s-2) var(--cx-s-2) 4px;
  border-top: 1px solid var(--line); }
.labx-seg { display: inline-flex; gap: 6px; padding: 4px; border-radius: var(--cx-r-pill); background: var(--cx-raised); }
.labx-seg__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 16px;
  border: 0; border-radius: var(--cx-r-pill); background: transparent; color: var(--cx-ink-2); font: inherit; font-size: var(--cx-t-body);
  font-weight: var(--w-med); cursor: pointer; }
.labx-seg__btn:hover { color: var(--cx-primary); }
.labx-seg__btn[aria-pressed="true"] { background: var(--cx-surface); color: var(--cx-primary); box-shadow: var(--cx-shadow-2); }
.labx-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cx-s-2) var(--cx-s-4); margin-top: var(--cx-s-3);
  font-size: var(--cx-t-small); color: var(--cx-ink-2); }
.labx-summary p { margin: 0; }

/* the list: biomarker, result, status, a rail in the status tone */
.labx-list { --labx-cols: minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1fr);
  border: 1px solid var(--cx-rule); border-radius: var(--cx-r); background: var(--cx-surface); box-shadow: var(--cx-shadow); overflow: hidden; }
.labx-list__head { display: grid; grid-template-columns: var(--labx-cols); gap: var(--cx-s-4); padding: var(--cx-s-3) var(--cx-s-5) var(--cx-s-3) 36px;
  border-bottom: 1px solid var(--cx-rule); font-size: var(--cx-t-small); font-weight: var(--w-semi); color: var(--cx-ink-2); }
.labx-list__rows { margin: 0; padding: 0; list-style: none; }
.labx-row + .labx-row { border-top: 1px solid var(--line); }
.labx-row__btn { position: relative; display: grid; grid-template-columns: var(--labx-cols); align-items: center; gap: var(--cx-s-2) var(--cx-s-4);
  width: 100%; min-height: 64px; margin: 0; padding: var(--cx-s-4) var(--cx-s-5) var(--cx-s-4) 36px; border: 0; background: none;
  color: var(--cx-ink); font: inherit; text-align: left; cursor: pointer; }
.labx-row__btn:hover { background: var(--cx-ground); }
.labx-row__btn:focus-visible { outline-offset: -3px; }
.labx-row__rail { position: absolute; left: 16px; top: 12px; bottom: 12px; width: 4px; border-radius: var(--cx-r-pill); background: var(--cx-status-tone); }
.labx-row__name { display: grid; gap: 6px; min-width: 0; }
.labx-row__name b { font-size: var(--cx-t-body); font-weight: var(--w-semi); line-height: var(--cx-lh-small); }
.labx-row__result { display: grid; gap: 2px; min-width: 0; font-variant-numeric: tabular-nums; }
.labx-row__result b { font-size: var(--cx-t-body); font-weight: var(--w-semi); }
.labx-row__result time { font-size: var(--cx-t-small); color: var(--cx-ink-2); }

/* the popup */
html.labx-locked { overflow: hidden; }
.labx-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--cx-s-4); }
/* the house scrim (app/shell/shell.css .bp-scrim), the same ink at the same weight */
.labx-modal__scrim { position: absolute; inset: 0; background: rgba(17, 24, 24, .45); }
.labx-dialog { position: relative; display: grid; gap: var(--cx-s-5); width: min(760px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 28px 32px 32px; background: var(--cx-surface); border-radius: var(--r-lg); box-shadow: var(--sh-4); overscroll-behavior: contain;
  overflow-wrap: anywhere; }
.labx-dialog__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cx-s-3); }
.labx-dialog__titles { min-width: 0; }
.labx-dialog__kicker { margin: 0 0 4px; font-size: var(--cx-t-body); color: var(--cx-ink-2); }
.labx-dialog h2 { margin: 0; font-size: var(--t-h2); font-weight: var(--w-semi); line-height: var(--lh-tight); color: var(--cx-ink); text-wrap: balance; }
.labx-dialog h2:focus-visible { outline: 2px solid var(--cx-primary); outline-offset: 4px; border-radius: var(--cx-r-sm); }
.labx-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid var(--cx-rule);
  border-radius: var(--cx-r-pill); background: var(--cx-surface); color: var(--cx-ink); cursor: pointer; }
.labx-close:hover { border-color: var(--cx-primary); color: var(--cx-primary); }
.labx-dialog__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cx-s-2) var(--cx-s-4);
  padding-bottom: var(--cx-s-4); border-bottom: 1px solid var(--line); }
.labx-dialog__result { margin: 0; font-size: var(--cx-t-body); color: var(--cx-ink); font-variant-numeric: tabular-nums; }
.labx-dialog__result time { color: var(--cx-ink-2); }
.labx-dialog__tags { display: grid; gap: var(--cx-s-2); }
.labx-dialog__sec { display: grid; gap: var(--cx-s-3); min-width: 0; }
.labx-dialog__sec h3 { margin: 0; font-size: var(--cx-t-section); font-weight: var(--w-semi); line-height: var(--cx-lh-section); color: var(--cx-ink); }
.labx-dialog__what h3 { font-size: var(--t-h3); }
.labx-dialog__what p { margin: 0; max-width: 68ch; font-size: var(--cx-t-body); line-height: var(--cx-lh-body); color: var(--cx-ink); }
.labx-dialog__note { margin: 0; font-size: var(--cx-t-small); line-height: var(--cx-lh-small); color: var(--cx-ink-2); }
.labx-dialog__act { margin: 0; }
/* an empty said line takes no room: the section's gap before it is given back */
.labx-dialog__said:empty { margin-top: calc(-1 * var(--cx-s-3)); }

/* a phone */
@media (max-width: 640px) {
  .labx-list__head { display: none; }
  .labx-row__btn { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--cx-s-4) var(--cx-s-4) var(--cx-s-4) 32px; }
  .labx-row__rail { left: 14px; }
  .labx-row__name { grid-column: 1 / -1; }
  .labx-row__btn > .labx-status { justify-self: end; text-align: right; }
}
@media (max-width: 560px) {
  .labx-bar { flex-direction: column; align-items: stretch; }
  .labx-filters { display: grid; grid-template-columns: minmax(0, 1fr); }
  .labx-filter { position: static; }
  .labx-filter__btn { width: 100%; justify-content: space-between; padding: 0 12px; }
  .labx-filter__btn > span:first-child { min-width: 0; margin-right: auto; }
  .labx-filter__panel { left: 0; right: 0; width: auto; max-width: none; }
  .labx-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .labx-seg__btn { min-height: var(--cx-control-phone); }
  .labx-modal { padding: var(--cx-s-2); }
  .labx-dialog { max-height: calc(100dvh - 16px); padding: var(--cx-s-5) var(--cx-s-4) var(--cx-s-5); gap: var(--cx-s-4); }
}

/* ---- T519: what the page holds, the values of one report, the quiet link to the lab tests page, the medical records ----
   Only this page's own wrappers; every element inside them is the standard's. */
/* the four parts of the page, each a link to its place: two columns at a desk, one on a phone */
/* the label 8 px over its list by the nav's own gap (Addendum 3: the standard label's margin is never restyled here) */
.labres-onpage { display: grid; gap: 8px; margin: 0 0 24px; }
.labres-onpage__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.labres-onpage__list li { display: flex; flex-direction: column; gap: 0; min-height: 48px; }
.labres-onpage__link { font-weight: 600; display: inline-flex; align-items: center; min-height: 32px; align-self: flex-start; }
.labres-onpage__list span { font-size: var(--cx-t-small); line-height: var(--cx-lh-small); color: var(--cx-muted); }
@media (max-width: 640px) { .labres-onpage__list { grid-template-columns: minmax(0, 1fr); } }
/* the pointer to the medical records under the upload */
.labres-entry__note { text-align: center; margin: 16px 0 0; }
.labres-entry__note a { display: inline-flex; align-items: center; min-height: 32px; }
/* under a finger both links are 44 px (after their desk rules, which they override) */
@media (max-width: 900px) { .labres-onpage__link, .labres-entry__note a { min-height: 44px; } }
/* the values of one report, in the dialog: the test and its result on one line, wrapping whole */
.labres-values { list-style: none; margin: 8px 0 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.labres-values li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; padding: 8px 0; border-top: 1px solid var(--cx-rule); }
.labres-values li b { white-space: nowrap; }
/* T536: a value with bands carries its bar under its line, the full width */
.labres-values__bar { flex: 1 0 100%; margin-top: 8px; }
/* T536: a kind of test's own line above its cards, and Blood values' groups inside it */
.labx-kind-note { margin: 0 0 16px; }
.labx-group { margin: 24px 0 8px; font-size: var(--cx-t-body); line-height: var(--cx-lh-body); font-weight: 600; color: var(--cx-ink); }
.cx-lab-overview > .labx-group:first-child { margin-top: 0; }
.labx-ref-origin { margin: 0 0 8px; }
.labx-refgraph + .labx-refgraph { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--cx-rule); }
/* the one quiet link at the page's end */
.labres-order__line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; }
.labres-order__link { min-height: 44px; }
/* the medical records: the form's three fields side by side at a desk, one under the other on a phone */
.medrec__never { margin: 0 0 16px; }
.medrec-form { display: grid; gap: 16px; }
.medrec-form__title { margin: 0; }
.medrec-form__grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .medrec-form__grid { grid-template-columns: minmax(0, 1fr); } }
.medrec-form__act { padding-top: 8px; }
.medrec-table th:nth-child(1) { width: 8.25rem; }
.medrec-table th:nth-child(3) { width: 12rem; }
.medrec-table th:nth-child(4) { width: 8rem; }

/* T536 Addenda 7 and 8: the upload's blocks on the 8 px grid, the tester's spacing findings at 1440 and 390. A block's
   title and its hint 4 px apart, the hint 8 px over its list, 16 px between the list, the agreement, a choice and the
   buttons, 24 px between two blocks (the sitting's list, the files being sorted, the end), 16 px over a said line; an
   other document's kind and date 16 px under its choice and 16 px apart, each the standard's field (label over control).
   Only the page's own wrappers carry these: no standard element is drawn here. */
.labimp-flow, .labimp-block, .labimp-intro, .labimp-head, .labimp-doc { display: grid; grid-template-columns: minmax(0, 1fr); }
.labimp-flow { gap: var(--cx-s-5); }
.labimp-block { gap: var(--cx-s-4); }
.labimp-intro { gap: var(--cx-s-2); }
.labimp-head { gap: var(--cx-s-1); }
.labimp-doc { gap: var(--cx-s-4); margin-top: var(--cx-s-4); }
.labimp-said:not(:empty) { margin-top: var(--cx-s-4); }
/* T536: a file of a sitting that did not arrive says why, in the error colour */
.labimp-failed { color: var(--cx-danger); }
/* T536: a report corrected by the person says so on a line of its own under its state (never beside it, so a phone never scrolls sideways) */
.labres-mark { margin-top: 4px; }

/* T566: the member's upload first when empty, the results first when filled, and the upload page */
.labres-upact { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.labres-upact svg { flex: none; }
.labres-up__line { text-align: center; margin: 8px 0 0; color: var(--cx-ink-2); }
.labres-up__line:first-of-type { margin-top: 16px; }
.labres-up__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: none;
  font: inherit; font-weight: 600; color: var(--bp-teal); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.labres-up__where a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.labres-up__back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.labres-up__open { margin: 0 0 16px; }
.labres-up__open a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
[data-up-more] { margin-top: 24px; }
.labimp-pending { margin: 8px 0 0; }
/* T566, Astra's code read: on a phone the labelled upload act stays at the top right, beside the title (the standard's
   phone rule would put it full width under the purpose); the purpose keeps the full width under both */
@media (max-width: 560px) {
  .cx-head:has(.labres-upact) { position: relative; }
  .cx-head:has(.labres-upact) .cx-head__act { position: absolute; top: 0; right: 0; width: auto; }
  .cx-head:has(.labres-upact) h1 { padding-right: 9.5rem; min-height: 44px; display: flex; align-items: center; }
}

/* T566 Addendum 1 (Jesse, 2026-10-07: the save button out of its box, the page scrolling sideways): the typed-values form
   is this page's own wrapper; its one track never grows past its host, whatever a part inside asks for */
.lab-form { grid-template-columns: minmax(0, 1fr); }
[data-lab-formhost] { min-width: 0; }
/* T465 Addendum 6: a reading still open, said above the results once the box has left the page: the card's words,
   its door to the upload page and its quiet Delete on one line, 8 px grid */
.labres-waiting { margin: 0 0 24px; }
.labres-waiting .cx-actions { margin-top: 16px; align-items: center; }
.labres-waiting .cx-actions .btn, .labres-waiting .cx-actions .cx-btn { min-height: 44px; display: inline-flex; align-items: center; }