/* GWJ·SG2 — the Segovia Scales pedal.
   -----------------------------------------------------------------------------
   Built to David's hifi design handoff (Guitar practice tool design.zip,
   2026-08-20). Every colour, radius and shadow here is quoted from that document's
   token table; where a number looks oddly specific — a 25.5% ring radius, a 0.82
   stave scale — it came from the design, so please do not "tidy" it.

   ACCENT SHADES. The handoff shades the accent with a shade(hex, amount) helper
   (+16% lightens toward white, -50% darkens toward black) and mixes alpha into
   several of them. Those are precomputed by segovia-scales.js into the custom
   properties below rather than written as color-mix(), which iPadOS only learned in
   16.2 — Jimmy teaches from an iPad. The defaults here are the #c1381f accent, so
   the pedal still looks right if the script never gets to set them.

   This file is deliberately SEPARATE from styles.css. That file has twice shipped
   with an unbalanced brace / unclosed @media (see GWJ-120), which silently turns
   everything appended after it into mobile-only rules. A mistake in one file cannot
   reach the other this way.

   The markup is generated by segovia-scales.js — there is no Segovia HTML left in
   tools.html or segovia-scales.html, only an empty mount. Two hand-maintained
   copies of it is exactly how GWJ-113 stayed broken for three weeks on the page
   students actually open. */

.sg2-chassis {
  --sg2-accent: #c1381f;
  --sg2-a-lt12: #c74e38;
  --sg2-a-lt16: #ca553f;
  --sg2-a-dk12: #aa311b;
  --sg2-a-dk24: #932a17;
  --sg2-a-dk34: #802514;
  --sg2-a-dk50: #611c10;
  --sg2-a-dk62: #49150c;
  --sg2-a-34a: rgba(193, 56, 31, .34);
  --sg2-a-dk62-82a: rgba(73, 21, 12, .82);
  --sg2-a-74a: rgba(193, 56, 31, .74);
  --sg2-a-24a: rgba(193, 56, 31, .24);
  --sg2-a-86a: rgba(193, 56, 31, .86);
  --sg2-a-18a: rgba(193, 56, 31, .18);
  --sg2-a-40a: rgba(193, 56, 31, .4);
  --sg2-ink: #241705;

  position: relative;
  width: 1160px;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 30px;
  border: 1px solid #423d34;
  background: linear-gradient(180deg, #35312a 0%, #26231d 34%, #201d17 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .10),
    inset 0 -3px 8px rgba(0, 0, 0, .55),
    0 40px 80px -24px rgba(0, 0, 0, .85),
    0 8px 24px rgba(0, 0, 0, .5);
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  color: #e8e0cf;
  -webkit-tap-highlight-color: transparent;
}
.sg2-chassis *,
.sg2-chassis *::before,
.sg2-chassis *::after { box-sizing: border-box; }

/* Four corner screws, 11px, inset 12px. */
.sg2-screw {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a453b, #1a1712);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25), inset 0 -1px 2px rgba(0, 0, 0, .7);
  z-index: 4;
  pointer-events: none;
}
.sg2-screw--tl { top: 12px; left: 12px; }
.sg2-screw--tr { top: 12px; right: 12px; }
.sg2-screw--bl { bottom: 12px; left: 12px; }
.sg2-screw--br { bottom: 12px; right: 12px; }

.sg2-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 14px 14px;
}
.sg2-model {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .14em;
  color: #d3ccbe;
}
.sg2-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #39c46a;
  box-shadow: 0 0 8px 1px #39c46a;
  animation: sg2-led-pulse 2.4s ease-in-out infinite;
}
/* Steady while it plays: the unit is in use, not idling. */
.sg2-chassis.is-playing .sg2-led { animation: none; opacity: 1; }
@keyframes sg2-led-pulse {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sg2-led { animation: none; opacity: 1; }
}
.sg2-unit {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .24em;
  color: #6f6a5f;
  white-space: nowrap;
}

.sg2-body { display: flex; gap: 18px; align-items: stretch; }

/* ---- left control panel ---------------------------------------------------- */
.sg2-panel {
  width: 360px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid #2b271f;
  background: linear-gradient(180deg, #171510, #121009);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7), inset 0 -1px 0 rgba(255, 255, 255, .05);
}

.sg2-tabs {
  display: flex;
  gap: 5px;
  padding: 4px;
  border-radius: 11px;
  background: #0c0a06;
  border: 1px solid #2a251c;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8);
}
.sg2-tab {
  flex: 1;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  color: #9a9284;
  background: transparent;
  transition: all .12s;
}
.sg2-tab.is-on {
  color: #fbf3df;
  background: linear-gradient(180deg, var(--sg2-accent), var(--sg2-a-dk24));
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* ---- circle of fifths ------------------------------------------------------ */
.sg2-circle {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: linear-gradient(180deg, #f8efd4 0%, #f4d79a 55%, #efb457 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), inset 0 2px 10px rgba(0, 0, 0, .12);
}
.sg2-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}
.sg2-ring--outer { width: 66%; height: 66%; border: 1.5px solid rgba(36, 23, 5, .28); }
.sg2-ring--inner { width: 30%; height: 30%; border: 1.5px solid rgba(36, 23, 5, .2); }
.sg2-circle-caption {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.1;
  color: var(--sg2-ink);
  pointer-events: none;
}
.sg2-key {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 0;
  cursor: pointer;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  white-space: nowrap;
  transition: all .12s;
}
.sg2-key--major { padding: 4px 7px; font-weight: 800; font-size: 20px; color: var(--sg2-ink); }
.sg2-key--minor { padding: 3px 5px; font-weight: 600; font-size: 14.5px; color: rgba(36, 23, 5, .62); }
/* The four enharmonic slots print both spellings on two lines, so they run smaller
   and keep their own line-height — otherwise the taller box escapes the ring band. */
.sg2-key--dual { white-space: pre-line; line-height: 1.02; text-align: center; }
.sg2-key--major.sg2-key--dual { font-size: 15px; }
.sg2-key--minor.sg2-key--dual { font-size: 12px; }
.sg2-key.is-on {
  background: var(--sg2-accent);
  color: #fbf3df;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
/* Quiet mark for a scale this browser has already played all the way through. Not
   in the handoff — it is a feature the tool already had, kept at a whisper so it
   cannot be confused with the selection state. */
.sg2-key.is-done::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(36, 23, 5, .42);
}
.sg2-key.is-on.is-done::after { background: rgba(251, 243, 223, .85); }

/* ---- patterns picker ------------------------------------------------------- */
.sg2-patterns { display: grid; gap: 8px; }
.sg2-pattern-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sg2-pattern {
  min-height: 52px;
  padding: 8px 9px;
  text-align: left;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid rgba(255, 248, 224, .14);
  background: rgba(255, 255, 255, .035);
  transition: all .12s;
  display: grid;
  gap: 2px;
  align-content: start;
}
.sg2-pattern strong { font-weight: 900; font-size: 13.5px; color: #e8e0cf; }
.sg2-pattern span {
  font-weight: 800;
  font-size: 11px;
  color: rgba(255, 248, 224, .62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg2-pattern.is-on {
  border-color: var(--sg2-a-74a);
  background: linear-gradient(180deg, var(--sg2-a-34a), var(--sg2-a-dk62-82a));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px var(--sg2-a-24a);
}
.sg2-pattern.is-on strong,
.sg2-pattern.is-on span { color: #fff8e0; }

.sg2-seq {
  display: grid;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  background: rgba(0, 0, 0, .2);
}
.sg2-seq-group { display: grid; gap: 5px; }
.sg2-seq-head {
  font-weight: 900;
  font-size: 9.5px;
  letter-spacing: .2em;
  color: rgba(255, 248, 224, .42);
}
.sg2-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 6px; }
.sg2-chip {
  min-height: 42px;
  padding: 7px 8px;
  border-radius: 13px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid rgba(255, 248, 224, .16);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 248, 224, .76);
  transition: all .12s;
}
.sg2-chip.is-on {
  border-color: var(--sg2-a-86a);
  background: linear-gradient(180deg, var(--sg2-a-lt12), var(--sg2-a-dk34));
  color: #fff8e0;
}

.sg2-step-text {
  margin: 0;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
  color: #9a9284;
}

/* ---- segmented rows (VIEW, DOTS) ------------------------------------------- */
.sg2-row { display: flex; align-items: center; gap: 10px; }
.sg2-row-label {
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .18em;
  color: #8a8375;
  flex: none;
}
.sg2-seg {
  flex: 1;
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: #0c0a06;
  border: 1px solid #2a251c;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .85);
}
.sg2-seg-btn {
  flex: 1;
  padding: 9px 0;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .06em;
  color: #8a8375;
  background: linear-gradient(180deg, #211e18, #181510);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: all .12s;
}
.sg2-seg-btn.is-on {
  color: #231a08;
  background: linear-gradient(180deg, #f4e2ae, #d9bd77);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .5);
}

/* ---- transport ------------------------------------------------------------- */
.sg2-transport { display: flex; align-items: center; gap: 7px; }
.sg2-play {
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fff5ee;
  font-size: 12px;
  line-height: 1;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--sg2-a-lt16), var(--sg2-a-dk12));
  box-shadow:
    0 2px 0 var(--sg2-a-dk50),
    0 3px 7px rgba(0, 0, 0, .5),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .1s, box-shadow .1s;
}
/* A real key-press: the button drops and its edge collapses — but ONLY while the
   finger is down. Jimmy, 2026-08-20: "play button changes size with stop and start.
   It should not change size." It was wearing that pressed look for the whole time it
   played, and a button with its drop edge collapsed and its rim darkened reads as a
   smaller button. Playing is said by the glyph and by the power LED going steady;
   the geometry stays put. */
.sg2-play:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--sg2-a-dk50), inset 0 2px 4px rgba(0, 0, 0, .45);
}
/* A filled square carries far more ink than a triangle at the same size, so the
   stop glyph is set a shade smaller to weigh the same. */
.sg2-play.is-on { font-size: 11px; }
.sg2-stepper {
  width: 34px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  color: #cdc6b8;
  background: linear-gradient(180deg, #2a2620, #201d17);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .4);
}
/* The tempo readout is a real input — Jimmy asked to be able to type a number
   instead of tapping + eleven times — but it has to keep looking like the LCD
   window the design draws, not like a form field. */
.sg2-bpm {
  width: 52px;
  height: 36px;
  flex: none;
  padding: 0;
  text-align: center;
  border-radius: 8px;
  background: #f6e6b8;
  border: 1px solid #7a5a1e;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800;
  font-size: 16px;
  color: #3a2708;
  -webkit-appearance: none;
  appearance: none;
}
.sg2-bpm:focus {
  outline: none;
  border-color: #b98a2a;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 2px rgba(244, 226, 174, .5);
}
.sg2-bpm::selection { background: rgba(122, 90, 30, .3); }
.sg2-transport-gap { flex: 1; }
.sg2-toggle {
  width: 34px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #cdc6b8;
  background: linear-gradient(180deg, #2a2620, #201d17);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .4);
  transition: all .12s;
}
.sg2-toggle svg { width: 16px; height: 16px; display: block; }
.sg2-toggle.is-on {
  color: #4fe07f;
  background: linear-gradient(180deg, #16140f, #0d0b07);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(79, 224, 127, .28);
  filter: drop-shadow(0 0 5px rgba(79, 224, 127, .75));
}

.sg2-nav { display: flex; gap: 8px; }
.sg2-nav button {
  flex: 1;
  padding: 12px 0;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 14px;
  color: #e8e0cf;
  background: linear-gradient(180deg, #3a352c, #241f19);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 2px 4px rgba(0, 0, 0, .45);
}

.sg2-panel button:focus-visible,
.sg2-key:focus-visible {
  outline: 2px solid #f4e2ae;
  outline-offset: 2px;
}

/* ---- the LCD --------------------------------------------------------------- */
.sg2-lcd {
  flex: 1;
  min-width: 0;
  padding: 9px;
  border-radius: 16px;
  background: #0a0906;
  border: 1px solid #33302a;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .05);
}
.sg2-screen {
  position: relative;
  height: 100%;
  border-radius: 11px;
  overflow: hidden;
  background: linear-gradient(180deg, #f8efd4 0%, #f5e2ad 46%, #efb457 100%);
}
.sg2-gloss {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 16%);
}
.sg2-screen-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 24px 16px;
}
.sg2-title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding-right: 2px;
}
.sg2-title {
  min-width: 0;
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--sg2-ink);
}
.sg2-title-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sg2-accent);
  align-self: center;
}
.sg2-flourish {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 20px;
  color: rgba(36, 23, 5, .5);
}
.sg2-legend {
  margin: 6px 0 0;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(36, 23, 5, .66);
}
.sg2-section-label {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(36, 23, 5, .5);
  margin-top: 16px;
}
.sg2-section-label--desc { margin-top: 12px; }
.sg2-pane {
  margin-top: 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .28);
  box-shadow: inset 0 0 0 1px rgba(36, 23, 5, .1);
  padding: 16px 18px 6px;
}

/* ---- fretboard ------------------------------------------------------------- */
.sg2-board { position: relative; width: 100%; height: 150px; }
.sg2-string { position: absolute; left: 0; right: 0; height: 2px; transform: translateY(-1px); background: rgba(36, 23, 5, .55); }
.sg2-fret { position: absolute; top: 0; bottom: 0; width: 2px; transform: translateX(-1px); background: rgba(36, 23, 5, .45); }
.sg2-fret--nut { width: 3px; background: rgba(36, 23, 5, .8); }
.sg2-inlay { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); background: rgba(36, 23, 5, .16); }
.sg2-fretnums { position: relative; height: 20px; margin-top: 2px; }
.sg2-fretnum {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 12px;
  color: rgba(36, 23, 5, .55);
}
.sg2-dot {
  position: absolute;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800;
  font-size: 13px;
  color: #fbf3df;
  background: #1a1006;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.sg2-dot--wide { font-size: 11px; }
.sg2-dot--root { background: var(--sg2-accent); }
/* A position shift is a triangle, not a circle — it is the one thing on the board a
   student has to see coming. */
.sg2-dot--shift {
  border-radius: 0;
  clip-path: polygon(50% 4%, 96% 96%, 4% 96%);
  transform: translate(-50%, -44%);
}
.sg2-dot.is-active {
  box-shadow: 0 0 0 3px #f8efd4, 0 0 0 6px var(--sg2-accent), 0 0 14px 2px var(--sg2-accent);
}

/* ---- engraved staff (alphaTab) --------------------------------------------- */
.sg2-staff {
  position: relative;
  margin: -8px -6px 10px;
  padding: 6px 10px;
  border-radius: 9px;
  background: #faf2dd;
  box-shadow: inset 0 0 0 1px rgba(36, 23, 5, .12);
  min-height: 150px;
}
.sg2-cursor {
  position: absolute;
  pointer-events: none;
  z-index: 4;
  border-radius: 4px;
  display: none;
  background: var(--sg2-a-18a);
  box-shadow: 0 0 0 1.5px var(--sg2-accent), 0 0 12px 1px var(--sg2-a-40a);
}
.sg2-staff-note {
  margin: 0;
  padding: 22px 4px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  color: rgba(36, 23, 5, .6);
}

/* The screen stretches to whatever the taller column is, so the notes readout sits
   on the bottom edge rather than leaving a pool of empty amber under it. */
.sg2-notes-row { display: flex; align-items: center; gap: 20px; margin-top: auto; padding-top: 14px; }
.sg2-notes-row .sg2-section-label { margin-top: 0; flex: none; }
.sg2-notes {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .05em;
  color: var(--sg2-ink);
}

.sg2-hidden { display: none !important; }
.sg2-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- narrow screens -------------------------------------------------------- */
@media (max-width: 900px) {
  .sg2-chassis { padding: 14px; border-radius: 22px; }
  .sg2-body { flex-direction: column; }
  .sg2-panel { width: auto; }
  /* The circle is the one control that must not shrink to nothing on a phone. */
  .sg2-circle { width: 100%; max-width: 360px; margin: 0 auto; }
  .sg2-screen-inner { padding: 16px 14px 14px; }
  .sg2-title { font-size: 24px; }
  .sg2-board { height: 128px; }
  .sg2-dot { width: 22px; height: 22px; font-size: 11px; }
  .sg2-dot--wide { font-size: 9px; }
}

/* ---- the standalone page's stage ------------------------------------------- */
/* /segovia-scales.html is nothing but the pedal, so the page itself is the stage
   the handoff describes. Loaded after styles.css, so these win on equal weight. */
.segovia-tool-body {
  background: radial-gradient(120% 120% at 50% 0%, #201c16 0%, #16130f 55%, #100e0b 100%);
  background-attachment: fixed;
}
.segovia-tool-main { width: 100%; max-width: none; padding: 40px 24px; }
.segovia-tool-wrap { display: block; }