/* Sensorgram viewer — the BLI trace, its phase bands, its channel table.
   Shared by the projects page (an overlay over a results cell or a flow-view step) and the
   protocol detail page (a panel beside the plate). It lived inline in portal.html until the
   detail page needed the same renderer; one copy, so the two cannot drift apart. */

.raw-btn {
  display: inline-flex; align-items: center; gap: 3px;
  margin-top: 3px; padding: 1px 7px 1px 5px;
  font-family: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--pink); background: rgba(236, 72, 153, 0.07);
  border: 1px solid rgba(236, 72, 153, 0.35); border-radius: 10px;
  cursor: pointer; white-space: nowrap; line-height: 1.5;
}
.raw-btn:hover { background: rgba(236, 72, 153, 0.16); border-color: var(--pink); }
.raw-btn .material-icons { font-size: 12px; }

/* .raw-overlay / .raw-panel now live in base.html, shared with the Orders page. */
/* The renderer writes here. On the detail page this is a section of the page, not
   the body of a modal -- the padding belonged to the overlay that owned it. */
.raw-body { padding: 0; }
.raw-run + .raw-run { margin-top: 26px; border-top: 1px solid var(--border-light); padding-top: 20px; }
.raw-run-meta {
  font-size: 11.5px; color: var(--text-muted); margin-bottom: 10px;
  display: flex; flex-wrap: wrap; gap: 4px 16px;
}
.raw-chart-wrap { position: relative; height: 340px; }
/* A plate and its traces, side by side inside the plate's own section. Below 1080 they stack,
   which is also what the overlay gets. */
.raw-run-split { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start; }
@media (min-width: 1080px) { .raw-run-split { grid-template-columns: auto minmax(520px, 1fr); } }
.raw-run-plate { display: flex; flex-direction: column; align-items: center; min-width: 0; }
/* The channel table spans BOTH columns, below them. Beside the chart it left ~500px of white
   under a 335px plate; moved under the plate it left ~340px under the chart. Nine mostly-numeric
   columns are the one thing in this section that wants the full width. */
.raw-table-scroll { margin-top: 16px; }
.raw-run-traces { min-width: 0; }

.raw-run-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 2px;
  background: none; border: 0; border-bottom: 1px solid var(--border-light, #e5e7eb);
  cursor: pointer; text-align: left; }
.raw-run-head:hover { background: rgba(15,23,42,.03); }
.raw-run-caret { font-size: 20px; color: #6b7280; transition: transform .12s; }
.raw-run.collapsed .raw-run-caret { transform: rotate(-90deg); }
.raw-run-name { font-size: 13px; font-weight: 700; color: var(--dark-navy, #1f2937); }
.raw-run-count { font-size: 11.5px; color: #6b7280; margin-left: auto; }

.raw-missing {
  padding: 14px; border: 1px dashed var(--border-light); border-radius: 8px;
  font-size: 13px; color: var(--text-muted); background: #fafafa;
}
/* Seven columns of kinetics do not fit a phone and cannot usefully stack, so the table scrolls
   inside its own box rather than pushing the panel wider than the screen. */
.raw-table-scroll { margin-top: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.raw-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 12px; }
.raw-table th {
  text-align: left; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); padding: 5px 8px; border-bottom: 1px solid var(--border-light);
}
.raw-table td { padding: 5px 8px; border-bottom: 1px solid #f1f3f5; }
.raw-swatch { display: inline-block; width: 22px; height: 3px; border-radius: 2px; vertical-align: middle; }
.raw-ref td { color: var(--text-muted); font-style: italic; }
/* Two controls that wrap as WHOLE controls. The row wrapped between a label and its select
   before -- "Fitting" left on one line, its menu on the next -- because every child was a
   direct flex item. Each control is now one item, and each takes half the row on a panel too
   narrow for both, so they wrap into a tidy pair rather than a ragged three lines. */
.raw-mode-row { display: flex; align-items: center; gap: 10px 16px; margin: 2px 0 12px;
  flex-wrap: wrap; }
/* 210, not 260: the row this sits in is about 520px on a laptop, and two 260s plus the gap
   came to 536 -- six pixels over, which is why each control was taking a line of its own. */
.raw-mode-group { display: flex; align-items: center; gap: 7px; flex: 1 1 210px; min-width: 0; }
/* A select is as wide as its longest option unless told otherwise, and one option read
   "Processed — binding and dissociation, aligned". That single string was deciding the layout. */
.raw-mode-group .raw-mode { flex: 1 1 auto; min-width: 0; max-width: 250px;
  text-overflow: ellipsis; }
.raw-mode-label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.raw-mode { padding: 5px 9px; border: 1px solid var(--border-light); border-radius: 6px;
  font-family: inherit; font-size: 12px; background: #fff; cursor: pointer; }
.raw-mode:hover { border-color: var(--pink); }
.raw-mode-note { font-size: 11.5px; color: var(--text-muted); font-style: italic; }
.raw-mode:disabled { opacity: 0.5; cursor: not-allowed; background: #f6f7f9; }
.raw-mode:disabled:hover { border-color: var(--border-light); }

/* A global fit reports one set of numbers for the whole series. They sit directly above the
   per-curve table so the reader sees the answer before the diagnostics. */
.raw-fit-summary { margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(236,72,153,0.35);
  border-radius: 10px; background: rgba(236,72,153,0.05); }
.raw-fit-head { font-size: 12.5px; font-weight: 700; color: var(--dark-navy);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.raw-fit-head span { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.raw-fit-nums { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 8px; }
.raw-fit-nums div { display: flex; flex-direction: column; gap: 1px; }
.raw-fit-nums span { font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted); }
.raw-fit-nums strong { font-size: 15px; font-weight: 700; color: var(--pink);
  font-variant-numeric: tabular-nums; }
.raw-fit-why { margin-top: 8px; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
/* Per-curve kinetics recede under a global method: they are no longer the reported answer. */
.kinetics-muted .kd-val { opacity: 0.32; }
.raw-note { margin-top: 12px; font-size: 11.5px; color: var(--text-muted); line-height: 1.6; }
@media (max-width: 700px) {
  .raw-overlay { padding: 0; }
  .raw-panel { border-radius: 0; min-height: 100%; }
  .raw-chart-wrap { height: 260px; }
}

/* A loose fit, marked where the number it qualifies is: a KD read off an R2 of 0.4 is not a
   measurement, and the two have to be legible in one glance. */
.raw-table .r2-val.poor { color: #B91C1C; font-weight: 700; }
.raw-table .r2-val.poor::after { content: ' \26a0'; }
.raw-mode-note.has-warning { color: #B91C1C; font-weight: 600; }

/* The executed programme, under the plate whose columns it names. */
.raw-run-steps { width: 100%; margin-top: 12px; }
.raw-steps-head { font-size: 13px; font-weight: 700; color: var(--dark-navy, #1f2937);
  margin-bottom: 6px; }
.raw-steps-hint { font-size: 11px; font-weight: 500; color: var(--grey, #6b7280); margin-left: 8px; }

/* The reason a control is inert, beside the control. A title attribute is not an answer: nobody
   hovers a greyed-out select to find out why it is greyed out. */
/* Its own line under the controls, not a member of the row: sitting inside the Subtraction
   group it took the width the select needed and squeezed it to a sliver. */
.raw-mode-why { flex-basis: 100%; font-size: 11px; color: var(--grey, #6b7280); font-style: italic; }
/* Select all / none, in the checkbox column's own header -- same size and same accent as the
   row boxes it commands, or it reads as a different kind of control. */
.wells th.sel-h { text-align: center; padding: 0 2px 3px 0; }
.wells th.sel-h input { width: 14px; height: 14px; margin: 0; cursor: pointer;
  accent-color: #EC3A94; }