/* GWJ·SP1 — Scale Positions.
   -----------------------------------------------------------------------------
   This pedal wears the SAME chassis as the Segovia one, so it loads
   segovia-device.css and adds only the two controls it does not share: the key grid
   and the position grid. Deliberately not a copy of that file — two copies of a
   chassis is how the Segovia markup ended up out of step with itself for three
   weeks (GWJ-113), and a stylesheet rots the same way.

   The `.sg2-` prefix on the shared classes names the pedal that got there first
   rather than the family. When both tools have settled, the chassis is worth lifting
   into a gwj-pedal.css with a neutral prefix — one rename, both tools. Not while
   GWJ-203 is still in review.

   SP1 runs the design's BLUE alternate accent (#2f7fd1) instead of the red, so the
   two pedals are told apart at a glance. The shades are set by positions-tool.js
   into the same custom properties segovia-device.css reads. */

.sp1-field { display: grid; gap: 7px; }

/* ---- key grid -------------------------------------------------------------- */
.sp1-keys {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}
.sp1-key {
  min-height: 34px;
  padding: 6px 2px;
  font-size: 14px;
  border-radius: 10px;
}

/* ---- position grid --------------------------------------------------------- */
.sp1-positions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.sp1-position {
  min-height: 44px;
  padding: 5px 3px;
  border-radius: 11px;
  display: grid;
  gap: 1px;
  align-content: center;
  justify-items: center;
}
.sp1-position strong { font-weight: 900; font-size: 13px; line-height: 1; }
/* The fret each position starts on, under its number — this is the whole point of
   the numbering, so it should not need a hover to see. */
.sp1-position span {
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .02em;
  line-height: 1;
  opacity: .62;
}
.sp1-position.is-on span { opacity: .85; }

@media (max-width: 900px) {
  .sp1-keys { grid-template-columns: repeat(6, 1fr); }
  .sp1-positions { grid-template-columns: repeat(6, 1fr); }
}