/* Project pages and the CV. Everything here is plain CSS served from the site
   origin, because the content security policy blocks inline styles. */
.lab {
  max-width:760px;
  margin:0 auto 4rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
}
.lab-controls {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem 2.5rem;
  margin-bottom:2rem;
}
.lab-control {
  display:block;
  font-size:.875rem;
}
.lab-control-name {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  color:var(--muted);
  margin-bottom:.35rem;
}
.lab-control-value {
  color:var(--foreground);
  font-variant-numeric:tabular-nums;
}
.lab-control input[type=range] {
  width:100%;
  accent-color:var(--accent);
}
.lab-control select {
  width:100%;
  padding:.4rem;
  background:var(--background);
  color:var(--foreground);
  border:1px solid var(--line);
  border-radius:2px;
  font:inherit;
}
.lab-stats {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  margin:0 0 1.5rem;
  font-size:.875rem;
}
.lab-stats dt,.lab-stats dd {
  border-top:1px solid var(--line);
  padding-block:.5rem;
}
.lab-stats dt {
  color:var(--muted);
}
.lab-stats dd {
  margin:0;
  padding-left:1.5rem;
  text-align:right;
  font-size:1rem;
  font-variant-numeric:tabular-nums;
}
.lab-status,.lab-reading {
  font-size:.875rem;
  color:var(--muted);
  min-height:1.5rem;
}
.lab-heading {
  font-size:.75rem;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:2.5rem 0 1rem;
}
.chart-figure {
  margin:0;
}
.chart {
  display:block;
  width:100%;
  height:auto;
}
.chart-grid {
  stroke:var(--line);
  stroke-width:1;
}
.chart-tick,.chart-label {
  fill:var(--muted);
  font-size:12px;
}
.chart-line {
  fill:none;
  stroke:var(--accent);
  stroke-width:2;
}
.chart-line.series-muted {
  stroke:var(--muted);
  stroke-dasharray:5 4;
}
.chart-band {
  fill:var(--accent);
  fill-opacity:.14;
}
.chart-bar {
  fill:var(--accent);
  fill-opacity:.75;
}
.chart-dot {
  fill:var(--accent);
  fill-opacity:.35;
}
.chart-marker {
  stroke:var(--foreground);
  stroke-width:1;
  stroke-dasharray:3 3;
}
.heat-cell {
  fill:var(--accent);
}
.chart-legend {
  display:flex;
  flex-wrap:wrap;
  gap:.35rem 1.5rem;
  font-size:.8125rem;
  color:var(--muted);
  margin-top:.5rem;
}
.legend-swatch {
  display:inline-block;
  width:1.25rem;
  height:2px;
  margin-right:.5rem;
  vertical-align:middle;
  background:var(--accent);
}
.legend-swatch.series-muted {
  background:var(--muted);
}
.legend-swatch.legend-band {
  height:.6rem;
  opacity:.3;
}
.lab-picker {
  border:0;
  margin:0 0 1.5rem;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem 2.5rem;
  font-size:.875rem;
}
.lab-picker legend {
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1rem;
  padding:0;
}
.lab-picker-family {
  display:block;
  color:var(--muted);
  margin-bottom:.25rem;
}
.lab-picker-item {
  display:block;
  padding-block:.15rem;
}
.lab-picker-item input {
  accent-color:var(--accent);
}
.lab-table-wrap {
  overflow-x:auto;
}
.lab-table {
  border-collapse:collapse;
  width:100%;
  min-width:640px;
  font-size:.8125rem;
}
.lab-table th,.lab-table td {
  border-bottom:1px solid var(--line);
  padding:.35rem .4rem;
  font-weight:400;
  text-align:center;
}
.lab-table th:first-child {
  text-align:left;
}
.lab-table thead th {
  color:var(--muted);
}
.lab-row-button {
  background:none;
  border:0;
  padding:0;
  color:var(--foreground);
  text-align:left;
  cursor:pointer;
}
.lab-row-button:hover {
  color:var(--accent);
}
.is-open .lab-row-button {
  color:var(--accent);
}
.lab-cell {
  color:var(--muted);
}
.lab-cell-hit {
  color:var(--accent);
}
.lab-cell-off {
  opacity:.35;
}
.lab-verdict {
  color:var(--accent);
}
.lab-verdict-missed {
  color:#e0a08a;
}
.lab-key {
  margin:0;
  padding-left:1.5rem;
  font-size:.875rem;
  color:var(--muted);
}
.lab-detail {
  font-size:.9375rem;
  color:#b8b9b5;
}
.lab-detail-title {
  color:var(--foreground);
  font-size:1.0625rem;
  margin-bottom:.35rem;
}
.lab-diff {
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.8125rem;
  margin:0;
  overflow-wrap:anywhere;
}
.lab-diff-before {
  color:#e0a08a;
}
.lab-diff-after {
  color:var(--accent);
  margin-bottom:1rem;
}
.lab-failures {
  padding-left:1.25rem;
  font-size:.875rem;
  overflow-wrap:anywhere;
}
.project-links {
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-top:2.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
  font-size:.9375rem;
}
.project-note {
  margin-top:1.5rem;
  font-size:.8125rem;
}
.cv h3 {
  font-weight:400;
  font-size:1.125rem;
  margin-bottom:.1rem;
  color:var(--foreground);
}
.cv h3 + p {
  color:var(--muted);
  margin-bottom:.5rem;
  font-size:.9375rem;
}
@media(max-width:600px) {
  .lab-controls,.lab-picker {
    grid-template-columns:1fr;
  }
}