.panel {
  padding: 12px 14px 11px;
  background: none;
  background-color: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

#runs-empty { font: 500 11.5px/1.55 var(--sans); color: var(--muted); }

.panel h2 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 10px;
  font: 600 11px var(--sans);
  letter-spacing: 0.02em;
  color: var(--ink);
}

.panel h3 { }

.panel h2 .of { font: var(--note); letter-spacing: 0; color: var(--muted); }

.panel .tools {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.panel .tools label {display: inline-flex; align-items: center; gap: 6px; padding: 0}

.panel .tools label > span { font: var(--note); color: var(--ink-3); }
.panel .tools button { padding: 3px 9px; font: var(--note); background: transparent; }
.panel .tools input[type="range"] { width: 96px; }

canvas {
  display: block;
  width: 100%;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

#residual,
#cutline { height: 200px; }

#curve,
#profile { height: 220px }

#cutline-panel {
  margin-top: .75rem;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

#drawing-view {
  height: 180px;
  margin: 4px 0 8px;
  background: var(--rail);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: crosshair;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 9px;
  padding-left: var(--axis-gutter);
  font: var(--note);
  color: var(--ink-3);
}

.legend > span { display: inline-flex; align-items: center; gap: 6px; }

.swatch { display: block; flex: none; width: 10px; height: 2px; }

.swatch.psi { background: var(--signal); }
.swatch.n { background: var(--warn); }
.swatch.p { background: var(--hot); }
.swatch.gummel { background: var(--violet); }

#curve-note,
#profile-note,
#residual-note,
#cutline-note {
  margin-left: auto;
  color: var(--dim);
}

#runs-note {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  font: 500 11px/1.5 var(--sans);
}

#runs-note > span {
  padding: 8px 10px 6px;
  color: var(--ink-2);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

#runs-note > span.current { background: var(--raised); border-color: var(--signal); }

#runs-note > span > b { display: block; font-weight: 500; color: var(--ink-2); }
#runs-note > span.current > b { color: var(--ink); }

#runs-note svg {
  display: block;
  width: 100%;
  height: 26px;
  margin-top: 7px;
}

#runs-note .swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  vertical-align: 0;
  border-radius: 50%;
}

#rail:has(#runs-note > span) #runs-empty { display: none; }

#rail .row { margin-top: 12px; }
main > section#rail > div.row button:not(.explain) { flex: 1; }

.legend { gap: 1rem; }