/* "Extract results": status chip, review panel and dated lab lists
   (features/lab-extract.js). Theme tokens only, so dark mode follows; logical
   properties, so Arabic (RTL) mirrors. Out-of-range values use warn ink. */

.lx-warn { color: var(--warning); font-weight: 500; }

/* Chip + toast: same look as the prescription chips, own class so the
   prescription code never clears them. */
#lx-chips { display: contents; }
.lx-chip, .lx-toast {
  background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 8px 10px; font-size: 13px; max-width: 100%;
}
.lx-toast { display: flex; align-items: center; gap: 8px; }
.lx-chip--error { border-color: var(--danger); }

/* Review panel */
.lx-overlay, .lx-overlay * { box-sizing: border-box; }
.lx-overlay {
  position: fixed; inset: 0; z-index: 10002; background: rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.lx-box {
  background: var(--surface); color: var(--text); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  width: 100%; max-width: 880px; max-height: 88vh; overflow-y: auto; padding: 20px;
}
.lx-head { display: flex; align-items: baseline; gap: 10px; margin-block-end: 6px; }
.lx-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.lx-who { color: var(--text-secondary); font-size: 13px; }
.lx-head .btn-close { margin-inline-start: auto; }
.lx-sub { margin: 0 0 10px; font-size: 13px; color: var(--text-secondary); }
.lx-sources { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; color: var(--text-secondary); display: grid; gap: 4px; }
.lx-sources strong { color: var(--text); font-weight: 600; }
.lx-src-name { color: var(--text); }
.lx-hint { color: var(--ink-2); font-style: italic; }
.lx-skip { margin: 0 0 10px; font-size: 13px; color: var(--text-secondary); }

.lx-table-wrap { overflow-x: auto; }
.lx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lx-table th {
  text-align: start; font-size: 11px; font-weight: 600; color: var(--text-secondary);
  padding: 4px 4px 6px; border-block-end: 1px solid var(--border-light); white-space: nowrap;
}
.lx-table td { padding: 4px; vertical-align: middle; border-block-end: 1px solid var(--border-light); }
.lx-in {
  width: 100%; min-width: 0; height: 32px; padding: 0 8px; font: inherit; font-size: 13px;
  color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.lx-in:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.lx-in.lx-warn { color: var(--warning); }
.lx-c-date { width: 148px; }
.lx-c-test { min-width: 150px; }
.lx-c-value { width: 92px; }
.lx-c-unit { width: 84px; }
.lx-c-ref { width: 120px; }
.lx-c-flag { width: 96px; }
.lx-c-x { width: 32px; text-align: center; }
.lx-x {
  background: none; border: none; cursor: pointer; color: var(--text-secondary);
  font-size: 18px; line-height: 1; width: 28px; height: 28px; border-radius: var(--radius-sm);
}
.lx-x:hover { color: var(--danger); background: var(--hover-neutral); }
.lx-add { margin-block-start: 10px; padding: 4px 12px; font-size: 12px; }
.lx-err { min-height: 18px; margin-block-start: 8px; font-size: 13px; color: var(--danger); }
.lx-foot { display: flex; justify-content: flex-end; gap: 10px; margin-block-start: 8px; }

/* Written reports: title + date on one line, the text box grows with its content */
.lx-reps { display: grid; gap: 18px; margin-block-start: 12px; }
.lx-table-wrap + .lx-add + .lx-reps { padding-block-start: 14px; border-block-start: 1px solid var(--border-light); }
.lx-rep { display: grid; gap: 8px; }
.lx-rep-top { display: flex; align-items: flex-end; gap: 10px; }
.lx-rep-f { display: grid; gap: 3px; min-width: 0; }
.lx-rep-f > span { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.lx-rep-ft { flex: 1 1 auto; }
.lx-rep-fd { flex: 0 0 160px; }
.lx-rep-src { font-size: 12px; color: var(--text-secondary); }
.lx-rep-text {
  width: 100%; min-height: 140px; max-height: 50vh; resize: vertical; padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.5;
  color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow-y: auto;
}
.lx-rep-text:focus { outline: 2px solid var(--primary); outline-offset: -1px; }

/* Phones: each row becomes a small card with labelled fields. */
@media (max-width: 640px) {
  .lx-overlay { padding: 0; align-items: stretch; }
  .lx-box { max-height: none; height: 100%; border-radius: 0; padding: 16px; }
  .lx-table thead { display: none; }
  .lx-table-wrap { overflow: visible; }
  .lx-table, .lx-table tbody { display: block; width: 100%; min-width: 0; }
  .lx-row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 8px; position: relative;
    padding: 10px 0; border-block-end: 1px solid var(--border-light);
  }
  .lx-table td { display: block; width: auto; min-width: 0; padding: 0; border: 0; }
  .lx-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; color: var(--text-secondary); margin-block-end: 2px; }
  .lx-c-test { grid-column: 1 / -1; }
  .lx-rep-top { flex-wrap: wrap; }
  .lx-rep-ft { flex: 1 1 100%; }
  .lx-rep-fd { flex: 1 1 auto; }
  .lx-rep-text { max-height: none; }
  .lx-table td.lx-c-x { position: absolute; inset-inline-end: 0; top: 24px; }
  .lx-foot { position: sticky; bottom: -16px; background: var(--surface); padding-block: 10px; }
}

/* Dated lab lists (Summary, Insert panel, Results view) */
.lx-dated { display: grid; gap: 10px; }
.lx-day-h { font-size: 12px; font-weight: 600; color: var(--text); margin-block-end: 2px; }
.lx-day-src { font-weight: 400; color: var(--text-secondary); }
.lx-ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lx-li { font-size: 13px; line-height: 1.45; color: var(--text); }
.lx-li-name { color: var(--text-secondary); }
.lx-li-flag { font-size: 11px; }
.lx-more { color: var(--text-secondary); font-size: 12px; }
.lx-dated-compact { gap: 6px; }
.lx-dated-compact .lx-li, .lx-dated-compact .lx-day-h { font-size: 12px; }
.ip-prev-html { white-space: normal; }

.lx-grp-bar { display: flex; justify-content: flex-end; margin-block-start: 12px; }
.lx-from-photos { margin-block-end: 16px; padding-block-end: 14px; border-block-end: 1px solid var(--border-light); }
.lx-dated + .lx-dated { margin-block-start: 10px; }
.lx-rep-imp-txt { font-size: 13px; line-height: 1.45; color: var(--text); }
.lx-rep-full summary { cursor: pointer; font-size: 12px; color: var(--text-secondary); margin-block-start: 4px; }
.lx-rep-full-txt { white-space: pre-wrap; font-size: 13px; line-height: 1.5; color: var(--text); margin-block-start: 4px; }
.lx-from-photos .ch-sec-label { margin-block-end: 8px; }
.lx-saved { color: var(--ink-2); }

/* Upload window and visit editor */
.upw-done-extract[hidden] { display: none; }
.upw-done-extract:disabled { opacity: .7; cursor: progress; }
.inv-lx-btn, .inv-lx-all { padding: 3px 10px; font-size: 12px; }
.inv-extracting .inv-lx-btn { margin-block: 4px; }

/* Button feedback: spinner + "Reading photo…" in muted ink, message beside the button */
.lx-btn[aria-busy="true"] { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); cursor: progress; }
.lx-btn[aria-busy="true"] .spinner-sm { width: 12px; height: 12px; border-top-color: var(--text-secondary); }
.lx-inline { font-size: 12px; margin-inline-start: 8px; color: var(--text-secondary); }
.lx-inline--error { color: var(--warning); }
.lx-link {
  background: none; border: none; padding: 4px 6px; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--primary); text-decoration: underline; text-underline-offset: 2px; flex: 0 0 auto;
}
.lx-flash { animation: lx-flash 1.8s ease-out; }
@keyframes lx-flash { from { background: var(--hover-neutral); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .lx-btn .spinner-sm { animation-duration: 2s; } .lx-flash { animation: none; } }

/* Reference range after a value: muted, compact, truncated (full text in the title) */
.lx-li-ref { color: var(--text-secondary); font-size: 11px; }
.lx-dated-compact .lx-li-ref { font-size: 11px; }

/* Small confirm dialog */
.lx-ask { max-width: 420px; }
.lx-ask-msg { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--text); }
.lx-ask-foot { flex-wrap: wrap; }

/* AI verdict of a report: red flag is the one filled chip, the rest is text only */
.lx-rep-vd { display: grid; gap: 4px; justify-items: start; }
.lx-rep-fv { width: 200px; max-width: 100%; }
.lx-vd { font-size: 11px; font-weight: 600; white-space: nowrap; }
.lx-vd-red_flag { display: inline-block; padding: 1px 7px; border-radius: 3px; background: #b42318; color: #fff; }
.lx-vd-moderate { color: var(--warning); }
.lx-vd-mild, .lx-vd-none { color: var(--text-secondary); font-weight: 500; }
.lx-vd-reason { font-size: 12px; line-height: 1.4; color: var(--text-secondary); }
.lx-dated-as { font-size: 12px; font-weight: 500; color: var(--warning); white-space: nowrap; }

/* AI-marked significant passages: the note editor's marker pen, one channel (fill; bold adds urgency; mild is underline only). */
/* Theme colours from features/rich-note.css (dark also under "System" on a dark device). */
.lx-hl { background: var(--note-hl-bg, #fdf2b3); color: var(--note-hl-fg, inherit); border-radius: 2px; padding: 0 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lx-hl-red_flag { font-weight: 700; }
.lx-hl-mild { background: none; padding: 0; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; text-decoration-color: var(--text-secondary); }
.lx-hl-mild { color: inherit; }
.lx-rep-prev { white-space: pre-wrap; padding: 8px 10px; font-size: 13px; line-height: 1.5; color: var(--text); background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-sm); max-height: 50vh; overflow-y: auto; }
.lx-rep-prev[hidden] { display: none; }
.lx-rep-edit > summary { cursor: pointer; font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-block: 4px; }