/* The Display: a flat offblack screen printed in poster inks (note-display.js draws the face).
   Flat by direction (BRIEF.md, revision 1): no bevel, inner shadow, sheen or glow. The window is
   spans, so its host may be a <button>; the canvas never takes the pointer. Height sets the
   dot pitch: 52px on desktop, 44px on phones; a host may set any height from 44 to 64px. */
.note-display {
  position: relative;
  display: block;
  width: 100%;
  height: 52px;
  min-width: 0;
  border-radius: 10px;
  background: #141414;
  overflow: hidden;
}
.note-display > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
@media (max-width: 700px) {
  .note-display { height: 44px; }
}
/* Icons (NoteDisplay.icon): a rail button drawn as one of the Display's flat caps, its words visually hidden. */
.note-icon {
  display: block;
  width: 36px;
  height: 38px;
  flex: none;
  pointer-events: none;
}
.note-icon > canvas { display: block; width: 100%; height: 100%; }
.note-icon-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .note-icon { width: 34px; height: 30px; }
}