/* ?underthehood tools, below the modulation matrix, in the instrument grid:
   a full-width label, then Stress test (4 units), Vibes (4) and Patch (12),
   each under a header bar like the rest of the page. */
#under-the-hood,
.under-the-hood { display: contents; }
.under-the-hood > h2 {
  grid-column: span 20; border-top: 1px solid var(--ink);
  display: flex; justify-content: space-between; align-items: center;
}
.under-the-hood-close {
  color: var(--ink); text-decoration: none; line-height: 1; padding: 0 0.4rem;
}
.under-the-hood-close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.under-the-hood > .stress-row,
.under-the-hood > .vibes { grid-column: span 4; }
.under-the-hood > .patch-panel { grid-column: span 12; border-right: 0; }
.under-the-hood-body { padding: 0.6rem 0.4rem; }
.under-the-hood-switches { display: flex; flex-direction: column; gap: 0.5rem; }

.patch-panel textarea {
  display: block; width: 100%; box-sizing: border-box;
  font-family: var(--font-mono); font-size: 0.8rem;
}
.patch-panel-buttons { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.patch-panel-error { color: #b00020; margin: 0.5rem 0 0; }
.patch-panel-error:empty { display: none; }

/* Checkboxes: a plain box, filled --yellow-deep with a black check when on. */
.under-the-hood input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.1em; height: 1.1em;
  margin: 0 0.2em 0 0;
  vertical-align: -0.2em;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: var(--paper) center / 80% no-repeat;
  cursor: pointer;
}
.under-the-hood input[type="checkbox"]:checked {
  background-color: var(--yellow-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.under-the-hood input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }