/* TOUCH WOOD's page: the shared skin and stage are ../module.css (site/public/module.css); this is only what's its own. The page is gold like
   every module's; only the panel's own lights keep their colour, and the surface is what it is. */

/* 20 HP at the line's scale, a little smaller so the surface above it fits with it on a laptop's screen */
.stage { --panel-ratio: 101.3 / 128.5; --panel-max: 520px; --panel-max-narrow: 500px; overflow-x: clip; }
.stage:focus { outline: none; }

/* the surface: as wide as the panel, a strip of it from above, the pucks' leads running off its front edge onto the panel's top */
.desk, .desk-tools {
  width: min(100%, calc(80vh * var(--panel-ratio, 101.3 / 128.5)), var(--panel-max, 520px), calc(100cqw * 128.5 / 101.3 * var(--panel-ratio, 101.3 / 128.5)));
  margin: 0 auto; box-sizing: border-box;
}
.desk { position: relative; aspect-ratio: 4.2 / 1; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.desk:focus-visible { outline: 2px solid rgba(212, 175, 55, 0.8); outline-offset: 2px; }
.desk-view { display: block; width: 100%; height: 100%; }
@media (max-width: 900px) { .desk, .desk-tools { width: min(100%, calc(80vh * var(--panel-ratio, 101.3 / 128.5)), var(--panel-max-narrow, 500px)); } }

/* what you knock with, and what the pucks are on: small, in two rows, over the surface */
.desk-tools { display: grid; gap: 4px; margin: 0 auto 8px; }
.tool-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.tool-row button {
  font: 600 0.72rem/1 "Poppins", system-ui, sans-serif; color: var(--dim); background: rgba(12, 11, 9, 0.82);
  border: 1px solid var(--s-line); border-radius: 0; padding: 0.42rem 0.6rem; cursor: pointer; min-height: 30px;
}
.tool-row button:hover { border-color: var(--accent); color: var(--accent-hi); }
.tool-row button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

/* the panel: its row's lit cells screened over the face, under the parts */
.panel2d { overflow: visible; }
.tw-cell { position: absolute; pointer-events: none; z-index: 1; opacity: 0; mix-blend-mode: screen; background-repeat: no-repeat; }
.p2 { z-index: 2; }

/* beside the panel: the two arrivals and the line */
#scope { display: block; width: 100%; height: 190px; }
.status { min-height: 2.8em; }
.readout { min-height: 2.8em; font: 400 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink); }
#patch-note { min-height: 7.2em; }