/* scales — extends styles.css, same tokens, same restraint.

   DELIBERATELY SELF-CONTAINED, like scales.js. The piano block below is a copy of
   the one in triads/triads.css so the two tools can diverge freely — the cost is
   that a change to the board has to be made twice. The numbers are traced from the
   scale picker in the VJ-XY app: change one, check the other. */

body.scales {
  --panel-bg: #000;
  --glyph-edge: #b2b2b2;
}

/* A single centred column. Narrower than the 65ch reading measure the guide uses,
   because everything here is a control or a short list — the width is set by how
   big the piano wants to be, not by how much text fits on a line. */
body.scales .scales-body {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--pad-x) clamp(48px, 7vw, 88px);
  font-weight: 200;
  box-sizing: border-box;
}
.scales-body h1 {
  font-size: clamp(26px, 4.4vw, 38px);
  font-weight: 200;
  line-height: 1.2;
  /* the picker is a control, not a subtitle — it needs air under the question */
  margin: 0 0 clamp(24px, 3.4vw, 36px);
}
/* — the picker —

   "or just tell me the scale", for when you have a hunch to check rather than
   notes to identify. No visible label: the page is titled "what scale am I
   playing?" and the empty options read "root" and "all scales", so a third
   "scale" beside them was the word three times in one screenful. The selects keep
   their aria-labels, so nothing is lost to a screen reader. */
.ctl-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 clamp(24px, 3vw, 32px);
}
.scales-body select {
  font: inherit;
  font-size: 14px;
  font-weight: 200;
  background-color: var(--bg);
  color: var(--fg);
  border: 1px solid var(--hair);
  cursor: pointer;
/* The native arrow sits hard against the right edge with no way to inset it, so
   the select draws its own: appearance:none, a chevron as a background image, and
   the gap set where a gap belongs. padding-right clears the arrow, not the border. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23b2b2b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding: 7px 34px 7px 10px;
}
.scales-body select:hover { border-color: var(--fg); }
#scale-root { flex: 0 0 auto; }
#scale-family { flex: 1 1 90px; min-width: 0; max-width: 200px; }

#scale-clear {
  font: inherit;
  font-size: 13px;
  font-weight: 200;
  background: none;
  border: none;
  border-bottom: 1px solid var(--hair);
  color: var(--muted);
  padding: 0;
  cursor: pointer;
}
#scale-clear:hover { color: var(--fg); border-bottom-color: var(--fg); }
/* reserved rather than removed, so the selects beside it do not resize the
   moment a scale is chosen */
#scale-clear.is-idle { visibility: hidden; }

/* — the board —

   Vertical inset only: the piano is the width of its surface, and horizontal
   padding costs key size, which is the one thing the board is for. */
.board-surface {
  background: var(--panel-bg);
  padding: clamp(10px, 1.4vw, 16px) 0;
}
#board { display: block; }

/* — the piano —

   One octave, because a note is a pitch class. Grey keys divided by black, five
   black keys centred on the seams at 63% of a white key's width and 64% of its
   height, and a filled dot low on the key for a note you have chosen. Colours are
   literal rather than token-derived, because matching the app is the point. */
.piano {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 733 / 328;
  background: #000;
  border: 2px solid #000;
  box-sizing: border-box;
}
.pk {
  position: absolute;
  top: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  box-sizing: border-box;
  border: 0;
}
.pk-w {
  height: 100%;
  background: #c8c8c8;
  border-left: 1px solid #000;   /* the divisions are gaps in the grey, as drawn */
}
.pk-w:first-child { border-left: 0; }
.pk-b {
  height: 64%;
  background: #000;
  z-index: 1;                    /* over the white keys it straddles */
}
.pk:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; z-index: 2; }

/* the dot is the whole of the state: present means chosen */
.pk::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
}
.pk-w::after { width: 25%; background: #000; }
.pk-b::after { width: 40%; background: #c8c8c8; }
.pk.is-pinned::after { opacity: 1; }

/* A chosen scale fills in the notes it needs that you did not play, in grey — the
   scale completing itself in front of you. Declared before .is-pinned so the notes
   you actually played stay solid. The keys never change colour: an earlier version
   tinted the out-of-scale ones and a piano with several shades stops reading as
   one. */
body.has-scale .pk:not(.is-off-scale)::after { opacity: 1; background: #808080; }
body.has-scale .pk.is-pinned.pk-w::after { background: #000; }
body.has-scale .pk.is-pinned.pk-b::after { background: #c8c8c8; }

/* — the notes you have chosen — */

.pins {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  min-height: 32px;
  align-items: center;
}
.pins-empty { font-size: 13px; color: var(--muted); margin: 0; }
.chip {
  font: inherit;
  font-size: 14px;
  font-weight: 200;
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  color: var(--fg);
  border: 1px solid var(--fg);
  cursor: pointer;
}
.chip span { color: var(--muted); }
.chip:hover { background: var(--fg); color: var(--bg); }
.chip:hover span { color: var(--bg); }
/* a box around "clear" made it read as one more note chip */
.chip-clear {
  border: none;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  padding: 5px 2px;
  font-size: 13px;
  color: var(--muted);
}
.chip-clear:hover { background: none; color: var(--fg); border-bottom-color: var(--fg); }
.chip:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }

/* — the answers — */

.readout { margin-top: clamp(24px, 3vw, 32px); }
.readout h2 {
  font-size: 13px;
  font-weight: 200;
  color: var(--muted);
  margin: 0 0 10px;
}
.hint { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }

.scale-list { list-style: none; margin: 0; padding: 0; }
.scale-list li { margin: 0; }
.scale-pick {
  font: inherit;
  font-weight: 200;
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  background: none;
  color: var(--fg);
  border: none;
  border-bottom: 0.5px solid var(--hair);
  text-align: left;
  cursor: pointer;
}
.scale-pick:hover .scale-name { border-bottom: 1px solid var(--fg); }
.scale-name { font-size: 15px; }
.scale-fit {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.scale-pick:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
/* No visual mark for the chosen one: the picker above names it and the notes sit
   right under it, so an underline here was a third place saying the same thing —
   and it read as a stuck hover state. aria-pressed stays for screen readers. */

/* — the scale you picked — */

/* Under the picker, which already names the scale — so this carries only what the
   picker cannot: the notes spelled in this key, and the way onward. */
.chosen {
  margin: 0 0 clamp(24px, 3vw, 32px);
}
.chosen[hidden] { display: none; }
.chosen-notes {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.chosen-links { margin: 8px 0 0; }
.chosen-links a { font-size: 15px; }
.chosen-links a::after {
  content: " \2192";
  display: inline-block;
  transition: transform 140ms ease;
}
.chosen-links a:hover::after { transform: translateX(3px); }
/* — the VJ-XY card —

   Same card as the triads sidebar, at the foot of the column here. It is the only
   promotional block on any sub-page; keep it this size — a thumb, a line, a link.
   No badge, no price, no second call to action. */
.promo {
  position: relative;
  margin-top: clamp(40px, 5vw, 64px);
  padding: 12px;
  border: 0.5px solid var(--hair);
}
.promo[hidden] { display: none; }

.promo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: none;
  color: var(--muted);
}
.promo-link:hover { border-bottom: none; }
.promo-link img { display: block; width: 92px; height: auto; flex: none; }
.promo-text { display: block; min-width: 0; }
.promo-copy {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  padding-right: 14px;   /* room for the dismiss */
}
.promo-more {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--fg);
  border-bottom: 1px solid var(--hair);
  transition: border-color 120ms ease;
}
.promo-link:hover .promo-more { border-bottom-color: var(--fg); }
.promo-link:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

.promo-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 120ms ease;
}
.promo-close svg { width: 13px; height: 13px; display: block; }
.promo-close:hover { color: var(--fg); }
.promo-close:focus-visible { outline: 1px solid var(--fg); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  .chosen-links a::after { transition: none; }
}