/* ==========================================================================
   Archive lab: how well the Archivist archives the golden sites, run after run.
   The list: one panel, the chart over the runs. The chart is ink for all the sites together and --stroke for each
   site; its words are the one ink. The runs are a quiet table: meta headers, hairlines, figures in tabular nums.
   A run: its setup and figure, then one panel per site with what it got wrong; what waits for a person (the
   expectations still to check) takes the one attention treatment, once per site.
   ========================================================================== */
.view-lab .page { padding-bottom: 48px; }
.lab-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 36px; padding: 8px 2px 0; margin-bottom: 20px; }
.lab-wait { padding: 8px 2px; }
.lab-panel { padding: 22px 24px 12px; animation: rise var(--dur-3) var(--ease) both; }
.lab-panel > .empty { padding: 72px 24px; }
.lab-tocheck { flex: none; }
.lab-tocheck[aria-pressed="true"] { --attn-bg: var(--attn-fill-press); }

/* ---------- The chart ---------- */
.lab-chart { position: relative; min-height: 240px; margin: 0 0 8px; cursor: default; }
.lab-chart.is-hot { cursor: pointer; }
.lab-svg { display: block; overflow: visible; font-family: var(--font); }
.lab-tick { fill: var(--ink); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.lab-gridline { stroke: var(--line); stroke-width: 1; }
.lab-base { stroke: var(--line-strong); stroke-width: 1; }
.lab-line { fill: none; stroke: var(--stroke); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; transition: stroke var(--dur-2) var(--ease), stroke-width var(--dur-2) var(--ease); }
.lab-hit { fill: none; stroke: transparent; stroke-width: 12; stroke-linejoin: round; }
.lab-lone { fill: var(--stroke); }
.lab-series.is-total .lab-line { stroke: var(--ink); stroke-width: 2.25; }
.lab-fig { fill: var(--ink); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.lab-name { fill: var(--ink); font-size: var(--fs-meta); cursor: default; }
.lab-name.is-total { font-size: var(--fs-body); font-weight: 500; }
/* One site stands out under the pointer (its line or its name); the others step back to the faint stroke. */
.lab-svg[data-focus] .lab-series:not(.is-total):not(.is-focus) .lab-line { stroke: var(--stroke-faint); }
.lab-series.is-focus .lab-line { stroke: var(--ink); stroke-width: 1.75; }
.lab-guide { stroke: var(--line-strong); stroke-width: 1; }
.lab-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 1.5; }
/* A mark on the axis where the setup changed (instructions, model, samples): its words on hover. */
.lab-mark { cursor: default; }
.lab-mark path { fill: var(--ink); }
.lab-mark-hit { fill: transparent; }
.lab-mark:hover path { transform-box: fill-box; transform-origin: center; transform: scale(1.35); }
/* What the pointer is on: the tooltip's look, written beside the run. */
.lab-readout {
  position: absolute; z-index: 2; min-width: 180px; max-width: 320px; padding: 8px 12px 9px; border-radius: 9px; pointer-events: none;
  background: var(--ink); color: var(--on-ink); font-size: var(--fs-meta); line-height: 1.45;
  box-shadow: 0 8px 20px -8px rgba(28, 27, 31, .4); animation: fade-in var(--dur-1) var(--ease);
}
.lab-readout.is-wide { max-width: 380px; }
.lab-ro-head { font-weight: 500; margin-bottom: 4px; }
.lab-ro-when { font-weight: 400; margin-left: 4px; }
.lab-ro-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
.lab-ro-grid > :first-child { margin-bottom: 3px; }
.lab-ro-n { text-align: right; font-variant-numeric: tabular-nums; }
.lab-ro-line + .lab-ro-line { margin-top: 4px; }

/* ---------- The runs ---------- */
.lab-runs { padding-top: 18px; border-top: 1px solid var(--line); }
.lab-sec-title { font-size: var(--fs-heading); font-weight: 500; line-height: 1.4; margin: 0 0 6px; }
.lab-table-wrap { overflow-x: auto; margin: 0 -12px; }
.lab-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-body); line-height: 1.4; }
.lab-table th { padding: 8px 12px; text-align: left; vertical-align: bottom; font-size: var(--fs-meta); font-weight: 400; line-height: 1.35; border-bottom: 1px solid var(--line-strong); }
.lab-table th.is-num, .lab-table td.is-num { text-align: right; }
.lab-table th.is-site { min-width: 96px; max-width: 150px; }
.lab-table .lab-th-group th { padding-bottom: 2px; border-bottom: 0; }
.lab-table .lab-th-span > span { display: block; padding-bottom: 4px; border-bottom: 1px solid var(--line-strong); text-align: left; }
.lab-table td { padding: 11px 12px; border-top: 1px solid var(--line); vertical-align: baseline; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lab-table tbody tr:first-child td { border-top: 0; }
.lab-tr { cursor: pointer; transition: background var(--dur-1) var(--ease); }
.lab-tr:hover { background: var(--hover); }
.lab-tr td:first-child { border-radius: var(--r-2) 0 0 var(--r-2); }
.lab-tr td:last-child { border-radius: 0 var(--r-2) var(--r-2) 0; }
.lab-td-when a { text-decoration: none; }
.lab-td-when a:hover { text-decoration: underline; text-decoration-color: var(--stroke); text-underline-offset: 3px; }
.lab-td-label { font-weight: 500; }
.lab-also, .lab-minor { font-size: var(--fs-meta); margin-left: 6px; }
.lab-table td.is-all { padding-left: 20px; }
.lab-table td.is-all b { font-weight: 500; }

/* ---------- One run ---------- */
.lab-back { margin: 10px 2px 14px; }
.lab-back:hover .ic { transform: translateX(-2px); }
.lab-run-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 0 2px; margin-bottom: 24px; }
.lab-run-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: 860px; }
.lab-run-meta { font-size: var(--fs-body); }
.lab-run-note { margin-top: 6px; line-height: 1.5; }
.lab-run-fig { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: flex-end; column-gap: 2px; flex: none; }
.lab-run-minor { flex-basis: 100%; text-align: right; font-size: var(--fs-meta); }

.lab-site { padding: 20px 24px 8px; margin-bottom: var(--gap); animation: rise var(--dur-3) var(--ease) both; }
.lab-site-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: 2px; padding-bottom: 12px; }
.lab-site-name { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lab-site-name .tile-title { overflow-wrap: anywhere; }
.lab-steps { font-size: var(--fs-meta); }
.lab-site-acts { display: flex; align-items: center; gap: 8px; grid-row: span 2; }
.lab-tally { grid-column: 1; font-size: var(--fs-body); }
.lab-none { padding: 14px 0 16px; border-top: 1px solid var(--line); }

/* ---------- An expectation ---------- */
.lab-exp { padding: 14px 0 16px; border-top: 1px solid var(--line); }
.lab-list.is-all .lab-exp { padding: 6px 0; }
.lab-list.is-all .lab-exp.is-open { padding-bottom: 16px; }
.lab-exp-head { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 32px; }
.lab-result { font-size: var(--fs-meta); }
.lab-result.is-fail { font-weight: 500; }
.lab-exp-what { display: flex; align-items: baseline; gap: 10px; min-width: 0; padding: 0; border: 0; background: none; text-align: left; }
button.lab-exp-what { cursor: pointer; align-items: center; min-height: 32px; margin-left: -20px; padding-left: 20px; position: relative; }
button.lab-exp-what > .ic { position: absolute; left: 0; top: 9px; transition: transform var(--dur-2) var(--ease); }
button.lab-exp-what[aria-expanded="true"] > .ic { transform: rotate(90deg); }
button.lab-exp-what:hover .lab-exp-item { text-decoration: underline; text-decoration-color: var(--stroke); text-underline-offset: 3px; }
.lab-exp-item { font-weight: 500; overflow-wrap: anywhere; }
.lab-exp-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-exp-end { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.lab-check { font-size: var(--fs-meta); margin-right: 4px; }
.lab-verdict { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.lab-by { font-size: var(--fs-meta); }
.lab-exp.is-rejected .lab-exp-item { text-decoration: line-through; text-decoration-color: var(--stroke); text-decoration-thickness: 1px; }

.lab-exp-body { --attr-label: 100px; margin: 8px 0 0 100px; }
.lab-exp-body .attr > dt, .lab-exp-body .attr > dd { padding: 8px 0; }
.lab-exp-body .attr > dt { flex-direction: row; align-items: center; gap: 6px; }
.lab-exp-body .attr > dt > .ic { width: 14px; height: 14px; }
.lab-exp-val { font-weight: 500; }
.lab-exp-meta { font-size: var(--fs-meta); margin-top: 2px; }
.lab-exp-rule { margin-top: 2px; }
.lab-ev { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lab-ev + .lab-ev { margin-top: 6px; }
.lab-ev-file { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; min-width: 0; }
.lab-file { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.lab-file svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.lab-file svg .fill { fill: currentColor; stroke: none; }
.lab-file.is-plain { font-weight: 400; }
.lab-ev-page { font-size: var(--fs-meta); white-space: nowrap; }
.lab-quote { margin: 0; padding-left: 14px; box-shadow: inset 2px 0 0 var(--line-strong); line-height: 1.5; overflow-wrap: anywhere; }
.lab-quote::before { content: "\201C"; }
.lab-quote::after { content: "\201D"; }
.lab-got { line-height: 1.5; overflow-wrap: anywhere; }
.lab-missing { font-weight: 500; }
.lab-note { max-width: 640px; }
.lab-why { margin: 2px 0 0 100px; }
.lab-why > summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-size: var(--fs-meta); list-style: none; cursor: pointer; }
.lab-why > summary::-webkit-details-marker { display: none; }
.lab-why > summary .ic { width: 12px; height: 12px; transition: transform var(--dur-2) var(--ease); }
.lab-why[open] > summary .ic { transform: rotate(90deg); }
.lab-why > summary:hover { text-decoration: underline; text-decoration-color: var(--stroke); text-underline-offset: 3px; }
.lab-why > p { max-width: 860px; padding: 2px 0 0 18px; font-size: var(--fs-meta); line-height: 1.5; overflow-wrap: anywhere; }

/* ---------- Smaller screens (1280×800): the same rhythm, a step tighter ---------- */
@media (max-width: 1100px) {
  .lab-exp-body, .lab-why { margin-left: 0; }
  .lab-exp-head { grid-template-columns: 76px minmax(0, 1fr); row-gap: 6px; }
  .lab-exp-end { grid-column: 1 / -1; justify-content: flex-start; }
}