/* ==========================================================================
   BioTrack Pro — Module composition
   Layout composition specific to individual screens. No new colours,
   no new spacing values — tokens only.
   ========================================================================== */

/* ==========================================================================
   Dashboard
   ========================================================================== */

.dash-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
}

.dash-col-8 { grid-column: span 8; min-width: 0; }
.dash-col-6 { grid-column: span 6; min-width: 0; }
.dash-col-4 { grid-column: span 4; min-width: 0; }
.dash-col-12 { grid-column: span 12; min-width: 0; }

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}

.quick-action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: var(--transition-colors), var(--transition-shadow), transform var(--duration-fast) var(--ease-out);
  text-align: left;
  min-width: 0;
}

.quick-action:hover {
  border-color: var(--color-primary-border);
  background: var(--color-primary-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.quick-action:focus-visible { box-shadow: var(--shadow-focus); outline: none; }

.quick-action__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.quick-action:hover .quick-action__icon {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.quick-action__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-strong);
  line-height: var(--leading-snug);
  min-width: 0;
}

.quick-action__kbd {
  font-size: var(--text-2xs);
  color: var(--color-text-subtle);
  margin-top: 1px;
}

/* Lab split summary */
.lab-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}

.lab-tile {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunk);
  min-width: 0;
}

.lab-tile__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.lab-tile__stats {
  display: flex;
  gap: var(--space-4);
}

.lab-tile__stat-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.lab-tile__stat-label {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Patient entry
   ========================================================================== */

.entry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-5);
  align-items: start;
}

.entry-aside {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.id-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.id-preview__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.id-preview__label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.id-preview__value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

/* Age composite input */
.age-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.age-group .field__label { font-size: var(--text-2xs); }

/* ==========================================================================
   Patient detail
   ========================================================================== */

.patient-hero {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.patient-hero__id {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.patient-hero__name {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
  line-height: var(--leading-tight);
}

.patient-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.mini-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--space-3);
}

.mini-stat {
  padding: var(--space-3);
  background: var(--color-surface-sunk);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
}

.mini-stat__value {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.mini-stat__label {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ==========================================================================
   Sample tracking
   ========================================================================== */

.track-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.track-step {
  display: flex;
  gap: var(--space-4);
  position: relative;
  padding-bottom: var(--space-4);
}

.track-step:last-child { padding-bottom: 0; }

.track-step__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 26px;
}

.track-step__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  background: var(--color-surface);
  display: grid;
  place-items: center;
  color: var(--color-text-subtle);
  flex-shrink: 0;
  z-index: 1;
}

.track-step__dot .icon { width: 13px; height: 13px; }

.track-step__line {
  flex: 1;
  width: 2px;
  background: var(--color-border);
  margin: 2px 0;
  min-height: var(--space-4);
}

.track-step:last-child .track-step__line { display: none; }

.track-step.is-done .track-step__dot {
  border-color: var(--color-success);
  background: var(--color-success);
  color: #fff;
}

.track-step.is-done .track-step__line { background: var(--color-success); }

.track-step.is-current .track-step__dot {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}

.track-step.is-failed .track-step__dot {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: #fff;
}

.track-step.is-skipped .track-step__dot {
  border-style: dashed;
  opacity: 0.6;
}

.track-step__body { flex: 1; min-width: 0; padding-top: 2px; }

.track-step__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}

.track-step.is-pending .track-step__title { color: var(--color-text-muted); font-weight: var(--weight-medium); }

.track-step__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ==========================================================================
   Barcode label preview
   ========================================================================== */

.label-preview {
  width: 189px; /* 50mm at 96dpi */
  min-height: 95px; /* 25mm */
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  background: #fff;
  color: #000;
  font-size: 8px;
  line-height: 1.25;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.label-preview__lab {
  font-weight: var(--weight-bold);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.label-preview__barcode { width: 100%; height: 32px; }
.label-preview__barcode svg { width: 100%; height: 100%; }

.label-preview__id {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: 10px;
  text-align: center;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Report entry grid
   ========================================================================== */

.result-grid {
  width: 100%;
}

.result-row__param {
  font-weight: var(--weight-medium);
  color: var(--color-text-strong);
}

.result-row__subheading td {
  background: var(--color-surface-sunk);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-text-muted);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.result-input {
  width: 100%;
  max-width: 120px;
  height: 32px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.result-ref {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ==========================================================================
   Settings
   ========================================================================== */

.settings-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.settings-nav {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-nav__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  transition: var(--transition-colors);
  text-align: left;
  width: 100%;
}

.settings-nav__item:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-strong);
}

.settings-nav__item.is-active {
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

.logo-upload {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.logo-preview {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-sunk);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.logo-preview img,
.logo-preview svg { width: 100%; height: 100%; object-fit: contain; }

/* ==========================================================================
   Analytics
   ========================================================================== */

.range-picker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ==========================================================================
   Billing cart
   ========================================================================== */

.billing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-5);
  align-items: start;
}

.cart-aside {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.test-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 460px;
}

.test-picker__list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 200px;
}

.test-pick {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: var(--transition-colors);
  text-align: left;
  width: 100%;
}

.test-pick:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border);
}

.test-pick.is-added {
  background: var(--color-success-bg);
  border-color: var(--color-success-br);
}

.test-pick__body { flex: 1; min-width: 0; }

.test-pick__name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test-pick__meta {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 1px;
}

.test-pick__price {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ==========================================================================
   Phase-scope notice — used where a later phase owns the workflow.
   ========================================================================== */

.phase-note {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-br);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-info);
  line-height: var(--leading-snug);
}

.phase-note .icon { flex-shrink: 0; margin-top: 1px; }
.phase-note strong { font-weight: var(--weight-semibold); }

/* ==========================================================================
   Component gallery (#/kitchen-sink) — development route only.
   ========================================================================== */

.ks-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.ks-row:last-child { border-bottom: none; }

.ks-row__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.ks-row__demo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  min-width: 0;
}

.ks-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
  gap: var(--space-3);
}

.ks-icon {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  text-align: center;
}

.ks-icon span {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  word-break: break-word;
}

@media (max-width: 767px) {
  .ks-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* ==========================================================================
   Billing workspace (#/billing/new) — Phase 6
   ==========================================================================

   Two columns on a desk: selection on the left, the money on the right. On a
   tablet the summary drops below the cart; on a phone it becomes a sticky
   footer bar, because the total and the create button are the two things an
   operator must always be able to reach.
   ========================================================================== */

.billing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-5);
  align-items: start;
}

.billing-layout__side { position: sticky; top: var(--space-5); }

.billing-summary .totals__value--lg { font-size: var(--text-lg); }

/* --- Patient strip --------------------------------------------------- */

.bill-patient {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.bill-patient__body { flex: 1; min-width: 0; }

.bill-patient__name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}

.bill-patient__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.bill-patient__visit {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* --- Test picker ----------------------------------------------------- */

.bill-picker {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
}

.bill-picker__field { flex: 1; min-width: 0; }
.bill-picker__field--narrow { flex: 0 0 180px; }

.bill-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.bill-chips__label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-right: var(--space-1);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: var(--transition-colors);
}

.chip:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
}

.chip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.chip__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Cart ------------------------------------------------------------ */

.bill-cart input[type="number"] { width: 100%; max-width: 108px; }
.bill-cart tfoot td { font-size: var(--text-sm); color: var(--color-text-muted); }

/* --- Discount -------------------------------------------------------- */

.bill-discount {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.bill-discount__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.bill-discount__head .text-xs { margin-left: auto; }

.bill-discount__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.bill-discount__row .select { flex: 1 1 auto; min-width: 0; }
.bill-discount__row .input { flex: 0 0 96px; }

.bill-discount__unit {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  min-width: 1.2em;
}

/* --- Payment --------------------------------------------------------- */

.bill-pay {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.bill-pay__body { margin-top: var(--space-3); }

.bill-pay__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
}

/* --- Payment dialog -------------------------------------------------- */

.pay-summary {
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  background: var(--color-surface-sunk);
  border-radius: var(--radius-md);
}

.pay-summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.pay-summary__row + .pay-summary__row { margin-top: var(--space-1); }

.pay-summary__row--em {
  padding-top: var(--space-2);
  margin-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}

.pay-quick {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* --- Success dialog -------------------------------------------------- */

.bill-done { text-align: center; }

.bill-done__mark { color: var(--color-success); }

.bill-done__no {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}

.bill-done__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

/* --- Responsive ------------------------------------------------------ */

@media (max-width: 1100px) {
  .billing-layout { grid-template-columns: minmax(0, 1fr); }
  .billing-layout__side { position: static; }
}

@media (max-width: 767px) {
  .bill-picker { flex-direction: column; align-items: stretch; }
  .bill-picker__field--narrow { flex: 1 1 auto; }

  .bill-patient { flex-wrap: wrap; }

  /* The total and the create button must stay reachable without scrolling
     back up, so the summary card becomes a sticky footer on a phone. */
  .billing-layout__side {
    position: sticky;
    bottom: 0;
    z-index: var(--z-sticky);
    margin: 0 calc(-1 * var(--space-4));
    padding: 0 var(--space-4) var(--space-3);
    background: var(--color-bg);
    box-shadow: 0 -6px 18px -12px rgb(0 0 0 / 40%);
  }

  .bill-done__actions .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Barcode — on-screen pieces only. Phase 7.
   ==========================================================================

   The LABEL itself is described once, in css/print/print-barcode.css, and the
   preview loads that same stylesheet inside an iframe. Nothing here describes
   a label; these rules style the frame around it and the barcode shown on the
   sample detail screen.
   ========================================================================== */

.label-preview {
  display: block;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
}

.sample-barcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  /* Always white behind a barcode, in either theme — a scanner needs the
     contrast, and an operator comparing screen to tube should see the same
     thing. */
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.sample-barcode__svg {
  width: 100%;
  max-width: 260px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sample-barcode__svg svg { width: 100%; height: auto; }

.sample-barcode__value {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  color: #111;
}

@media (max-width: 480px) {
  .sample-barcode { padding: var(--space-3); }
  .label-preview { max-width: 100%; }
}

/* ==========================================================================
   Inter-laboratory transfers — Phase 8
   ==========================================================================

   Three screens share this block: creating a batch, looking at one, and the
   receiving bench a technician stands at with a rack and a scanner. The
   receiving bench is the one that has to survive a phone, because a courier
   arriving at a collection centre is not always met by a desk.
   ========================================================================== */

/* --- Creating a transfer --------------------------------------------- */

.transfer-entry {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.transfer-entry__form > .card + .card { margin-top: var(--space-4); }

.transfer-picker {
  max-height: 52vh;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.picker-row {
  display: grid;
  grid-template-columns: 24px 4px minmax(0, 1fr) 110px 110px auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-in-out);
}

.picker-row:last-child { border-bottom: 0; }
.picker-row:hover { background: var(--color-surface-hover); }

.picker-row.is-selected { background: var(--color-primary-soft); }

.picker-row__check {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.picker-row.is-selected .picker-row__check {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.picker-row__bar { align-self: stretch; border-radius: 2px; }

.picker-row__main { min-width: 0; display: flex; flex-direction: column; }
.picker-row__id { font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.picker-row__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picker-row__meta { display: flex; flex-direction: column; min-width: 0; }
.picker-row__badge { justify-self: end; }

.sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* --- Transfer detail -------------------------------------------------- */

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-5);
  align-items: start;
}

.detail-grid__side > .card + .card { margin-top: var(--space-4); }

.transfer-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.transfer-route__lab { min-width: 0; }
.transfer-route__arrow { color: var(--color-text-subtle); flex-shrink: 0; }

/* --- Receiving bench -------------------------------------------------- */

.receiving {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.receiving__scanner > .card + .card { margin-top: var(--space-4); }

.scanner {
  border-radius: var(--radius-md);
  transition: var(--transition-shadow), var(--transition-colors);
  padding: var(--space-1);
  margin: calc(var(--space-1) * -1);
}

/* Quiet confirmation. A tube going the right way should not need a fanfare;
   a tube going the wrong way should be impossible to miss. */
.scanner.is-ok { box-shadow: 0 0 0 2px var(--color-success); }
.scanner.is-error { box-shadow: 0 0 0 2px var(--color-danger); }

.scanner .input { width: 100%; letter-spacing: 0.06em; }

.scan-feedback {
  display: none;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.scan-feedback.is-visible { display: flex; }

.scan-feedback--success { background: var(--color-success-bg); color: var(--color-success); }
.scan-feedback--info    { background: var(--color-info-bg);    color: var(--color-info); }
.scan-feedback--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.scan-feedback--error   { background: var(--color-danger-bg);  color: var(--color-danger); }

.scan-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-surface-sunk);
}

.scan-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.scan-card__bar {
  width: 6px;
  align-self: stretch;
  min-height: 34px;
  border-radius: 3px;
  flex-shrink: 0;
}

.scan-card__id {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-text-strong);
}

.scan-card__patient { font-size: var(--text-sm); color: var(--color-text); }

.scan-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
}

.scan-card__facts dt {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
}

.scan-card__facts dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-strong);
}

.scan-card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.scan-log { list-style: none; margin: 0; padding: 0; }

.scan-log__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--text-sm);
}

.scan-log__item:last-child { border-bottom: 0; }

.scan-log__item--ok .scan-log__icon { color: var(--color-success); }
.scan-log__item--rejected .scan-log__icon { color: var(--color-danger); }
.scan-log__item--error .scan-log__icon { color: var(--color-warning); }

.scan-log__body { min-width: 0; display: flex; flex-direction: column; }
.scan-log__code { font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.scan-log__msg { color: var(--color-text-muted); font-size: var(--text-xs); }
.scan-log__time { font-size: var(--text-xs); color: var(--color-text-subtle); white-space: nowrap; }

/* The manifest preview is the printed A4 sheet in an iframe, at a readable
   scale. It carries no styling of its own — the print stylesheets do that. */
.manifest-preview {
  width: 100%;
  height: min(62vh, 720px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
}

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 1100px) {
  .transfer-entry,
  .detail-grid,
  .receiving {
    grid-template-columns: minmax(0, 1fr);
  }

  /* On a tablet the scanner comes first: the rack is in the operator's hands
     and the manifest is the reference, not the task. */
  .receiving__scanner { order: -1; }
}

@media (max-width: 640px) {
  .picker-row {
    grid-template-columns: 24px 4px minmax(0, 1fr) auto;
    row-gap: var(--space-1);
  }

  .picker-row__meta { display: none; }

  .transfer-picker { max-height: 46vh; }

  .scan-card__facts { grid-template-columns: minmax(0, 1fr); }

  .scan-card__actions .btn { flex: 1; }

  /* The scanner input is the one control that must never be hard to reach. */
  .scanner .input { font-size: 18px; }

  .sticky-actions { border-radius: var(--radius-md); }
  .sticky-actions .row { flex-direction: column; align-items: stretch; }
}

/* ==========================================================================
   Result entry — Phase 9
   ==========================================================================

   The grid is the screen. A technician works down one column with the
   keyboard, so the result column is fixed-width and the flag sits beside it
   where the eye already is — never colour alone, always the word.
   ========================================================================== */

.worklist-filters {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.worklist-table tr.is-waiting td { opacity: 0.72; }

.worklist-reason {
  display: block;
  max-width: 34ch;
  white-space: normal;
  line-height: 1.35;
  color: var(--color-text-muted);
}

/* --- The parameter grid ---------------------------------------------- */

.result-grid td { vertical-align: top; }

.result-grid .result-input,
.result-grid .select,
.result-grid .textarea {
  width: 100%;
  max-width: 160px;
  font-family: var(--font-mono);
}

.result-grid .textarea { max-width: 100%; font-family: inherit; }

.result-grid .result-input[readonly] {
  background: var(--color-surface-sunk);
  color: var(--color-text-muted);
}

.result-row__param {
  font-weight: var(--weight-medium);
  color: var(--color-text-strong);
}

.result-row__subheading td {
  background: var(--color-surface-sunk);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.result-row__msg {
  display: none;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  line-height: 1.35;
  max-width: 22ch;
}

.result-row__msg.is-error { display: block; color: var(--color-danger); }
.result-row__msg.is-waiting { display: block; color: var(--color-text-muted); }

/* An abnormal row is marked by a bar as well as a badge, so the meaning does
   not depend on colour vision. */
.result-grid tr.is-abnormal td:first-child { box-shadow: inset 3px 0 0 var(--color-warning); }
.result-grid tr.is-critical td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); }

.result-ref { font-size: var(--text-sm); }
.result-ref__critical {
  display: block;
  color: var(--color-danger);
  margin-top: 2px;
}

.entry-summary__critical {
  color: var(--color-danger);
  font-weight: var(--weight-semibold);
}

/* --- Specimen card ---------------------------------------------------- */

.specimen-list { list-style: none; margin: 0; padding: 0; }

.specimen-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.specimen-row:last-child { border-bottom: 0; }
.specimen-row__status { margin-left: auto; }
.specimen-row__link { color: var(--color-text-subtle); display: inline-flex; }
.specimen-row.is-rejected .specimen-row__id { text-decoration: line-through; }

/* --- Responsive ------------------------------------------------------- */

@media (max-width: 1100px) {
  .worklist-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .worklist-filters { grid-template-columns: minmax(0, 1fr); }
  .worklist-table .hide-sm { display: none; }

  /* The parameter table scrolls rather than squeezing the value column until
     a result becomes unreadable. */
  .result-grid { min-width: 640px; }
  .result-grid .result-input,
  .result-grid .select { max-width: 120px; }
}

@media (max-width: 480px) {
  .result-row__msg { max-width: 100%; }
}

/* The flag written out, beside the compact mark. Colour reinforces the word;
   it never carries it. */
.flag-text {
  display: inline-block;
  margin-left: var(--space-1);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.flag-text--warning { color: var(--color-warning); }
.flag-text--danger,
.flag-text--critical { color: var(--color-danger); }
.flag-text--success { color: var(--color-success); }
.flag-text--neutral { color: var(--color-text-muted); }

/* ==========================================================================
   Report preview (Phase 10)

   An iframe, not a re-rendering. It loads the same two print stylesheets the
   print window loads and shows the same markup, so what is approved here is
   what comes out of the printer. Describing the A4 page a second time in
   application CSS would produce a preview that drifts from the paper, which
   is worse than no preview at all.
   ========================================================================== */

.report-preview {
  display: block;
  width: 100%;
  height: min(72vh, 900px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken, #f4f5f7);
}

@media (max-width: 720px) {
  /* A4 does not fit a phone at true width, so the frame scrolls rather than
     squeezing the report until the values become unreadable. */
  .report-preview { height: 60vh; }
}

/* ==========================================================================
   Signature manager (Phase 11)
   ========================================================================== */

.signature-manager__preview {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  /* White, always: a signature is printed on white paper, so previewing it on
     a dark surface would show the operator something the printer will not. */
  background: #fff;
}

.signature-manager__img {
  max-height: 80px;
  max-width: 100%;
  object-fit: contain;
}

.signature-manager__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: #6b7280;
  font-size: var(--text-sm);
  text-align: center;
}

.signature-manager__error {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-danger, #c0392b);
}

.signature-manager__error[hidden] { display: none; }

.signature-manager__note {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: var(--leading-normal);
}

/* ======================================================================
   Phase 13 — specialized result entry

   Three new panels beside the parameter grid: prose for descriptive
   reports, ordered sections for pathology, and the culture panel with its
   isolates and antibiogram.

   None of these introduces a new visual language. They reuse the
   application's fields, cards, tables and badges; what changes is the
   shape of the thing being typed into, because a microscopic description
   and a haemoglobin are not the same kind of answer.
   ====================================================================== */

/* ---------- Shared ----------------------------------------------------- */

.field__optional {
  margin-left: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--text-subtle);
  text-transform: none;
  letter-spacing: 0;
}

/* A required field is marked in words for a screen reader and with a mark
   for everybody else. Colour is never the only carrier. */
.field__req {
  margin-left: 2px;
  color: var(--danger);
  font-weight: 700;
}

.entry-doc__ro,
.entry-prose__ro {
  padding: var(--space-2) var(--space-3);
  background: var(--surface-sunk);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Descriptive ------------------------------------------------ */

.entry-prose__heading {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.entry-prose__field + .entry-prose__field { margin-top: var(--space-4); }

/* ---------- Pathology document ----------------------------------------- */

.entry-doc__section + .entry-doc__section { margin-top: var(--space-6); }

.entry-doc__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

/**
 * The diagnosis is the section the report is written for, so it is set
 * apart on screen exactly as it is on paper — and the operator can see at
 * a glance whether it has been filled in.
 */
.entry-doc__section.is-diagnosis {
  padding: var(--space-4);
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-muted);
  border-radius: var(--radius);
}

.entry-doc__section.is-diagnosis .entry-doc__title { color: var(--text); }

.entry-doc__input {
  font-family: inherit;
  line-height: 1.6;
  /* A pathologist types paragraphs. Let the box grow rather than making
     them scroll a five-line window. */
  resize: vertical;
  min-height: 5rem;
}

/* ---------- Culture ---------------------------------------------------- */

.entry-culture__state { max-width: 28rem; }

.isolate-card {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.isolate-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.isolate-card__num {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.isolate-card__sens { margin-top: var(--space-4); }

.section__title--sm {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.sens-grid td { vertical-align: middle; }
.sens-grid .input--sm { width: 100%; }

/* ======================================================================
   Responsive

   The susceptibility grid is six columns of inputs, which does not fit a
   phone however the columns are squeezed. Below the tablet breakpoint it
   becomes one labelled block per antimicrobial — the existing card-table
   strategy the rest of the application already uses for wide tables, so
   the page never scrolls sideways.
   ====================================================================== */

@media (max-width: 900px) {
  .entry-culture .form-grid--2 { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .isolate-card { padding: var(--space-3); }

  .sens-grid thead { display: none; }

  .sens-grid,
  .sens-grid tbody,
  .sens-grid tr,
  .sens-grid td { display: block; width: 100%; }

  .sens-grid tr {
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-sunk);
  }

  .sens-grid td {
    padding: var(--space-1) 0;
    border: 0;
  }

  /* Each cell announces what it is, since the header row is gone. */
  .sens-grid td::before {
    display: block;
    margin-bottom: 2px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-muted);
  }
  .sens-grid td:nth-of-type(1)::before { content: 'Antimicrobial'; }
  .sens-grid td:nth-of-type(2)::before { content: 'Interpretation'; }
  .sens-grid td:nth-of-type(3)::before { content: 'MIC'; }
  .sens-grid td:nth-of-type(4)::before { content: 'Zone (mm)'; }
  .sens-grid td:nth-of-type(5)::before { content: 'Note'; }
  .sens-grid td.col-actions::before { content: ''; }
  .sens-grid td.col-actions { text-align: right; }
}