/*
 * Scale & Chord Explorer (/tools/scales/) and the keyboard picture (piano-ui.js, .pk-* classes).
 * Loaded after site.css; uses its tokens. Mobile first: pickers, result and keyboard in one
 * column; the related-scales panels move beside it from 1100 px.
 */

/* ------------------------------------------------------------------ layout */
.sx { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .sx { grid-template-columns: minmax(0, 1.8fr) minmax(20rem, 1fr); gap: var(--s-6); } }
.sx-stage { text-align: left; padding: var(--s-4); }
@media (min-width: 640px) { .sx-stage { padding: var(--s-5) var(--s-6) var(--s-6); } }
.sx-side { display: grid; gap: var(--s-4); }
.sx-panel h2 { margin: 0 0 var(--s-2); font-size: var(--step-1); }
.sx-panel > p { margin: 0 0 var(--s-3); }

/* ------------------------------------------------------------------ pickers */
.sx-pickers { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
.sx-mode { margin: 0; justify-self: start; }
.sx-mode .seg span { min-width: 6.5rem; }
.sx-roots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.sx-roots legend { grid-column: 1 / -1; }
.sx-roots .chip { display: flex; }
.sx-roots .chip span { flex: 1; min-width: 0; flex-direction: column; min-height: 52px; padding: 4px 2px; line-height: 1.1; border-radius: var(--r-md); }
.sx-roots .chip b { font-size: 1.0625rem; font-weight: 750; }
.sx-roots .chip small { font-size: .75rem; font-weight: 600; }
.sx-roots .chip.is-black input:not(:checked) + span { background: var(--surface-2); }
@media (min-width: 760px) { .sx-roots { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.sx-type select { width: 100%; max-width: 30rem; }

/* ------------------------------------------------------------------ result */
.sx-result { margin-top: var(--s-5); border-top: 1px solid var(--line); padding-top: var(--s-4); }
.sx-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.sx-title { margin: 0; font-size: var(--step-3); overflow-wrap: anywhere; }
.sx-respell { min-height: 44px; padding: 6px 16px; font-size: var(--step--1); box-shadow: 0 3px 0 var(--line-strong); }
.sx-sub { margin: var(--s-1) 0 0; font-weight: 650; }
.sx-key { margin: var(--s-1) 0 0; }
.sx-legend { margin: var(--s-2) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-3); }
.sx-li { display: inline; }
.sx-li .sx-swatch { margin-right: 4px; vertical-align: -3px; }
.sx-swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--line-strong); vertical-align: middle; }
.sx-swatch.is-root { background: var(--pk-root); border-color: var(--pk-root-edge); }
.sx-swatch.is-note { background: var(--pk-scale); border-color: var(--pk-scale-edge); }
.sx-trad { margin: var(--s-4) 0 0; padding: var(--s-2) var(--s-3); border-left: 4px solid var(--saffron-edge); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.sx-steps { margin: var(--s-3) 0 0; font-variant-numeric: tabular-nums; }
.sx-desc { margin: var(--s-2) 0 0; color: var(--muted); max-width: 46em; }

/* Note list: one card per note, in order */
.sx-notes { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.25rem), 1fr)); }
.sx-note { display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); min-width: 0; }
.sx-note.is-root { border: 2px solid var(--saffron-edge); }
.sx-n { font-family: var(--font-num); font-size: 1.5rem; font-weight: 750; line-height: 1.1; }
.sx-deg { font-weight: 700; color: var(--indigo); font-variant-numeric: tabular-nums; }
.sx-iv { font-size: var(--step--1); color: var(--muted); line-height: 1.3; }
.sx-sw { font-size: var(--step--1); line-height: 1.35; border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 4px; }
.sx-deva { font-size: 1.05rem; }

/* Link chips (modes, relations, chords of the scale) */
.sx-links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sx-link {
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 48px; min-width: 48px; padding: 6px 14px; /* min-width: round 5, the smaller type made one-letter chord chips 43 px wide */
  border-radius: var(--r-md); border: 2px solid var(--line-strong); background: var(--surface); color: var(--text); text-align: left; line-height: 1.2;
  transition: background-color var(--t-fast), border-color var(--t-fast);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.sx-link:hover { background: var(--surface-2); }
.sx-link[aria-current="true"] { background: var(--indigo); border-color: var(--indigo); color: var(--indigo-ink); }
.sx-link[aria-current="true"] .sx-link-sub { color: var(--indigo-ink); }
.sx-link.is-plain { border-style: dashed; }
.sx-link-main { font-weight: 700; }
.sx-link-sub { font-size: .8125rem; color: var(--muted); font-weight: 500; }
.sx-rel { flex-direction: column; }
.sx-rel .sx-link { width: 100%; }
.sx-inv { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sx-inv .chip span { flex-direction: column; align-items: flex-start; border-radius: var(--r-md); line-height: 1.2; padding: 6px 14px; }
.sx-inv .chip small { font-size: .8125rem; font-weight: 500; }

/* ------------------------------------------------------------------ keyboard picture (piano-ui.js) */
:root {
  --pk-white: #FFFFFF; --pk-white-edge: #8C7D68; --pk-black: #26211D; --pk-text: #1F1A17;
  --pk-scale: #CFE3D2; --pk-scale-edge: #1F4A35; --pk-scale-black: #2F7050;
  --pk-root: #E8862A; --pk-root-edge: #A14A0A; --pk-badge: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pk-white: #E9E2D6; --pk-white-edge: #84A088; --pk-black: #0B0C14; --pk-text: #12131F;
    --pk-scale: #8CCB9E; --pk-scale-edge: #1E5B3B; --pk-scale-black: #3F7F5B;
    --pk-root: #F5A04F; --pk-root-edge: #F5A04F; --pk-badge: #F4EDE1;
  }
}
:root[data-theme="dark"] {
  --pk-white: #E9E2D6; --pk-white-edge: #84A088; --pk-black: #0B0C14; --pk-text: #12131F;
  --pk-scale: #8CCB9E; --pk-scale-edge: #1E5B3B; --pk-scale-black: #3F7F5B;
  --pk-root: #F5A04F; --pk-root-edge: #F5A04F; --pk-badge: #F4EDE1;
}
.sx-piano { margin-top: var(--s-4); }
.piano { position: relative; }
/* The box behind the keys has the white-key colour: key labels are dark text on light keys in both themes,
   and the site's contrast checker (tests/layout.test.js) measures SVG text against this box. */
.piano-scroll { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; border-radius: var(--r-sm); padding: 4px 4px 6px; background: var(--pk-white); border: 1px solid var(--pk-white-edge); }
.piano-svg { display: block; margin: 0 auto; max-width: none; touch-action: pan-x; user-select: none; -webkit-user-select: none; }
.pk { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.pk-white .pk-body { fill: var(--pk-white); stroke: var(--pk-white-edge); stroke-width: 1.5; }
.pk-black .pk-body { fill: var(--pk-black); stroke: var(--pk-black); stroke-width: 1; }
.pk-white:hover .pk-body { fill: var(--surface-2); }
.pk-black:hover .pk-body { fill: #4A423B; }
.pk-white.is-scale .pk-body, .pk-white.is-chord .pk-body { fill: var(--pk-scale); stroke: var(--pk-scale-edge); stroke-width: 2; }
.pk-black.is-scale .pk-body, .pk-black.is-chord .pk-body { fill: var(--pk-scale-black); stroke: var(--pk-scale-edge); }
.pk-white.is-root .pk-body { fill: var(--pk-root); stroke: var(--pk-root-edge); stroke-width: 2.5; }
.pk-black.is-root .pk-body { fill: var(--pk-root); stroke: var(--pk-root-edge); stroke-width: 2; }
.pk-white.is-dim .pk-body { fill: var(--surface-2); }
.pk.is-active .pk-body { filter: brightness(.88); }
.pk:focus-visible .pk-body { stroke: var(--focus); stroke-width: 4; }
.pk-white:focus-visible .pk-body { stroke-width: 4; }

.pk-label { font: 700 15px var(--font-body); fill: var(--pk-text); pointer-events: none; }
.pk-label.is-muted { font-weight: 600; font-size: 12px; fill: #5E554D; }
.pk-sub { font: 700 12px var(--font-body); fill: var(--pk-text); pointer-events: none; }
.pk-black .pk-label { font-size: 12px; }
.pk-badge { fill: var(--pk-badge); stroke: var(--pk-white-edge); stroke-width: 1; display: none; pointer-events: none; }
.pk-black.has-label .pk-badge { display: inline; }
.pk-dot { fill: var(--pk-text); display: none; pointer-events: none; }
.pk-dot.on { display: inline; }
.pk-black .pk-dot.on { fill: var(--pk-badge); }
.pk-mark { stroke: var(--pk-text); stroke-width: 2; display: none; }
.pk-mark.on { display: inline; }

@media (max-width: 420px) {
  .pk-label { font-size: 13px; }
  .pk-black .pk-label { font-size: 11px; }
}
@media (forced-colors: active) {
  .pk-body { stroke: CanvasText !important; }
  .pk.is-root .pk-body, .pk.is-scale .pk-body, .pk.is-chord .pk-body { fill: Highlight !important; }
}