/* A lab's file on a tests' page (lab-upload.js; pages/sap.js and pages/soil.js): where it's picked or
   dropped, what's said about it, QuorumAI's offer to read it, sending it to us, and the panel that
   shows what was read, to check and fix before it's kept. */

.lab-file { display: grid; gap: 0.5rem; }
.lab-file[hidden], .lab-read[hidden] { display: none; }
.lab-drop { position: relative; display: grid; gap: 0.25rem; justify-items: start; padding: 1rem 1.1rem; border: 2px dashed var(--canopy); border-radius: var(--radius); background: rgba(31, 77, 46, 0.05); cursor: pointer; }
.lab-drop:hover, .lab-drop.is-over { background: rgba(31, 77, 46, 0.11); }
.lab-drop:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.lab-drop__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
/* the drop zone's ring shows the focus: the hidden input's own would sit on it, unseen */
.lab-drop__input:focus-visible { outline: none; }
.lab-drop__big { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.1rem; color: var(--canopy); }
.lab-drop__big svg { flex: none; width: 1.35rem; height: 1.35rem; }
.lab-drop__small { max-width: 40rem; font-size: 0.94rem; color: var(--ink-2); }
.lab-file__said { margin: 0; font-weight: 600; color: var(--ink-2); max-width: 46rem; }
.lab-file__said:empty { display: none; }
.lab-file__said.is-bad { color: var(--earth); }
.lab-help, .lab-ai { display: grid; gap: 0.6rem; padding: 0.8rem 0.9rem; border-radius: 12px; background: rgba(242, 182, 50, 0.16); max-width: 46rem; }
.lab-ai { background: rgba(31, 77, 46, 0.08); }
.lab-help[hidden], .lab-ai[hidden] { display: none; }
.lab-help > *, .lab-ai > * { margin: 0; }
.lab-help__note textarea { width: 100%; }
.lab-help__said { margin: 0; font-weight: 600; color: var(--canopy); max-width: 46rem; }
.lab-help__said:empty { display: none; }
.lab-help__said.is-bad { color: var(--earth); }
/* where QuorumAI's read is off: the way onto its waitlist (qag-34mn) */
.lab-soon { margin: 0; max-width: 46rem; color: var(--ink-2); }

/* what was read, to check before it's kept */
.lab-read { display: grid; gap: 0.9rem; }
.lab-read > * { margin: 0; }
.lab-read__title { font-size: 1.2rem; }
.lab-read__title:focus { outline: none; }
.lab-read__from { display: flex; align-items: flex-start; gap: 0.45rem; color: var(--ink-2); overflow-wrap: anywhere; }
.lab-read__from svg, .lab-read__state svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; }
.lab-read__sheet { max-width: 22rem; }
.lab-read__other { padding: 0.6rem 0.8rem; border-radius: 10px; background: rgba(242, 182, 50, 0.16); max-width: 46rem; }
.lab-read__tests { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.lab-read__test { display: grid; gap: 0.6rem; padding-top: 0.9rem; border-top: 1px dashed rgba(30, 43, 34, 0.28); }
.lab-read__test > * { margin: 0; }
.lab-read__test.is-off > :not(.lab-read__top) { opacity: 0.45; }
.lab-read__top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.lab-read__top h4 { margin: 0; font-size: 1.05rem; }
.lab-read__on { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 700; }
.lab-read__when { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.8rem 1.4rem; }
.lab-read__clash { font-size: 0.92rem; color: var(--ink-2); max-width: 46rem; }
.lab-read__state { display: flex; align-items: flex-start; gap: 0.45rem; font-weight: 600; color: var(--canopy); }
.lab-read__state.is-look { color: var(--earth); }
.lab-read__in td.is-look input { border-color: var(--earth); background: rgba(242, 182, 50, 0.22); }
.lab-read__why td { padding: 0 0 0.45rem; font-size: 0.86rem; color: var(--earth); }
.lab-read__nums summary { cursor: pointer; font-weight: 700; }
.lab-read__nums .sap-in-wrap, .lab-read__nums .lab-in-wrap { margin-top: 0.5rem; }
.lab-read__unread { font-size: 0.92rem; color: var(--ink-2); }
.lab-read__unread summary { cursor: pointer; font-weight: 600; }
.lab-read__unread p { margin: 0.4rem 0 0; max-width: 46rem; }
.lab-read__bad { margin: 0; font-weight: 700; color: var(--earth); }
.lab-read__go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
.lab-read__top h4:focus { outline: none; }
.lab-read__top h4:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

/* a round of many samples at a glance, at the panel's top (lab-upload.js glanceHtml) */
.lab-glance { display: grid; gap: 0.5rem; padding: 0.8rem 0.9rem; border-radius: 10px; background: rgba(31, 77, 46, 0.05); }
.lab-glance__title { margin: 0; font-size: 1.05rem; }
.lab-glance__table { border-collapse: collapse; width: 100%; }
.lab-glance__table th, .lab-glance__table td { padding: 0.35rem 0.7rem 0.35rem 0; text-align: left; vertical-align: top; overflow-wrap: break-word; }
.lab-glance__table thead th { font-size: 0.82rem; }
.lab-glance__table tbody tr + tr > * { border-top: 1px solid rgba(30, 43, 34, 0.12); }
.lab-glance__table tbody th { font-weight: 600; }
.lab-glance__table tbody th .walk-link { text-align: left; }
.lab-glance__look { display: inline-flex; align-items: flex-start; gap: 0.35rem; color: var(--canopy); }
.lab-glance__look svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.2rem; }
.lab-glance__table tr.is-look .lab-glance__look { color: var(--earth); font-weight: 600; }

/* a field for each number */
.lab-in-wrap { overflow-x: auto; }
.lab-in { border-collapse: collapse; width: 100%; max-width: 40rem; }
.lab-in th, .lab-in td { padding: 0.28rem 0.4rem 0.28rem 0; text-align: left; vertical-align: middle; }
.lab-in thead th { font-size: 0.82rem; }
.lab-in tbody th { font-weight: 600; font-size: 0.95rem; }
.lab-in input { width: 5.5rem; padding: 0.38rem 0.5rem; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--paper); font: inherit; font-variant-numeric: tabular-nums; }
.lab-in input[aria-invalid="true"] { border-color: var(--earth); box-shadow: 0 0 0 2px rgba(160, 63, 36, 0.25); }
.lab-in select { max-width: 14rem; padding: 0.36rem 0.3rem; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--paper); font: inherit; font-size: 0.88rem; }

@media (max-width: 420px) {
  .lab-in input { width: 4.4rem; }
  .lab-in tbody th { font-size: 0.88rem; }
  .lab-glance { padding: 0.7rem; }
  .lab-glance__table { font-size: 0.9rem; }
  .lab-glance__table th, .lab-glance__table td { padding-right: 0.45rem; }
}