/* User Scales shares the application palette, with a compact, dedicated editing surface. */
body[data-page="userscales"] #activeSetBar{display:none}
#userscalesPage{--scale-gold:#d6b268;--scale-line:#333237;max-width:1520px;margin-inline:auto;padding-bottom:24px}
.scales-heading,.scales-heading-actions,.scales-card-heading,.scales-controls,.scales-actions,.scales-meter,.scales-switches{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.scales-heading,.scales-card-heading,.scales-meter{justify-content:space-between}
.scales-heading{margin:0 0 22px;gap:18px}.scales-heading h1{display:flex;align-items:center;gap:12px;margin:0 0 7px;font-size:34px;letter-spacing:-1px}.scales-heading p{margin:0;color:#aaa8b2;font-size:13px}
#userscalesPage .scales-unit{color:#b8a37b;background:#252117;border:1px solid #3a3223;padding:5px 7px;border-radius:3px;font-size:10px;letter-spacing:1.5px;font-weight:600}
.scales-chip{color:#c5b18a;font-size:12px;padding:0 6px}
#userscalesPage input,#userscalesPage select{max-width:100%;min-width:0;min-height:44px;font-size:13px}
#userscalesPage select{width:100%}
#userscalesPage button{min-height:40px;touch-action:manipulation;border-radius:5px;font-size:13px}
#userscalesPage button:focus-visible,#userscalesPage input:focus-visible,#userscalesPage select:focus-visible,#userscalesPage summary:focus-visible{outline:2px solid #edd096;outline-offset:3px}
.scales-surface{container-type:inline-size;background:linear-gradient(130deg,#242016 0,#161617 38%,#121214 100%);border:1px solid #3b3529;border-radius:8px;padding:20px}
.scales-controls{align-items:end;gap:12px;margin-bottom:18px}.scales-controls label{display:grid;gap:6px;color:#aaa6af;font-size:12px}
.scale-name-label{flex:1;min-width:200px}.scales-controls label:nth-child(2){width:98px}
#userscalesPage .scale-name-label input{font-size:21px;font-weight:750;letter-spacing:-.25px}
.scales-switches{gap:8px}.scales-switches button{height:44px}
#userscalesPage .scales-master{font-weight:800;min-width:132px;border:1px solid #424047;background:#202023}
#userscalesPage .scales-master[aria-pressed="true"]{color:#1a160e;background:var(--scale-gold);border:1px solid var(--scale-gold)}
.scales-meter{font-size:12px;color:#a7a2ad;margin-bottom:12px}.scales-meter strong{font-size:12px;color:#dbbd82;font-weight:600}
/* A single octave: seven natural keys and five overlapping accidentals. */
.scale-keyboard-scroll{overflow-x:auto;overscroll-behavior-x:contain;padding:6px 5px 12px;scrollbar-width:thin}
.scale-notes{position:relative;min-width:560px;max-width:1120px;height:372px;margin:0 auto}
#userscalesPage .scale-note{position:absolute;left:calc(var(--key-center)*100%/7);top:0;width:calc(100%/7);height:100%;transform:translateX(-50%);pointer-events:none}
.scale-key-tuning{position:absolute;top:80px;left:50%;width:60px;transform:translateX(-50%);pointer-events:auto;text-align:center;z-index:4}
.scale-key-tuning::after{content:'';position:absolute;top:67px;left:50%;height:19px;border-left:1px solid #665b43;pointer-events:none}
.scale-cents-label{display:block;color:#b6b1a8;font-size:11px;font-weight:650;margin-bottom:4px}
#userscalesPage .scale-note input{width:60px;min-height:44px;height:44px;font-size:20px;font-weight:750;font-variant-numeric:tabular-nums;text-align:center;padding:4px 0;border:1px solid #49433a;border-radius:5px;background:#171718;margin:0;color:#ddd6c8;appearance:textfield;-moz-appearance:textfield}
.scale-note input::-webkit-inner-spin-button,.scale-note input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#userscalesPage .scale-note .scale-note-toggle{position:absolute;top:166px;bottom:0;left:2px;width:calc(100% - 4px);padding:0 0 29px;display:flex;align-items:end;justify-content:center;font-size:21px;font-weight:800;background:linear-gradient(90deg,#dfdcd4,#f6f4ed 18%,#f0ede4 85%,#c6c3bb);border:1px solid #a9a69e;border-bottom:6px solid #aaa69c;border-radius:0 0 7px 7px;color:#353330;pointer-events:auto;box-shadow:0 5px 7px #0008;touch-action:manipulation;z-index:1}
.scale-note .scale-note-toggle::before{content:'';position:absolute;bottom:66px;left:calc(50% - 3px);height:6px;width:6px;border:1px solid #999186;border-radius:50%}
#userscalesPage .scale-note.accidental{width:calc(62%/7);z-index:2}
.scale-note.accidental .scale-key-tuning{top:0}
.scale-note.accidental .scale-key-tuning::after{height:99px}
#userscalesPage .scale-note.accidental .scale-note-toggle{bottom:78px;background:linear-gradient(90deg,#101012,#323235 23%,#1e1e21 83%,#080809);border-color:#050506;border-bottom:6px solid #09090a;box-shadow:0 6px 7px #000b;color:#d5d3cd;z-index:3;font-size:17px;padding-bottom:25px}
#userscalesPage .scale-note[data-enabled="true"][data-on="true"] .scale-note-toggle{background:linear-gradient(90deg,#b08c42,#e4c27b 20%,#d9b266 85%,#997633);border-color:#9e7d41;color:#251c0c;border-bottom-color:#8c6a2b}
#userscalesPage .scale-note.accidental[data-enabled="true"][data-on="true"] .scale-note-toggle{background:linear-gradient(90deg,#55401b,#9c7837 22%,#876226 85%,#3b2b0f);color:#fff0cc;border-bottom-color:#44300f}
.scale-note .scale-note-toggle[aria-pressed="true"]::before{background:currentColor;border-color:currentColor}
#userscalesPage .scale-note[data-selected="true"] input{border-color:#e9c982;color:#fbe7b9}
.scale-note output{position:absolute;bottom:12px;left:0;right:0;z-index:4;text-align:center;font-size:11px;font-weight:650;color:#696359;pointer-events:none;font-variant-numeric:tabular-nums}
.scale-note.accidental output{bottom:89px;color:#9e9b95}
.scale-note[data-enabled="true"][data-on="true"] output{color:#493713}.scale-note.accidental[data-enabled="true"][data-on="true"] output{color:#f7dfac}
.scale-keyboard-footer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 5px 0}
#scalesSelected{min-width:126px;font-size:15px;font-weight:650;color:#e6c68b;font-variant-numeric:tabular-nums}
.scale-stepper{display:flex;gap:6px}
#userscalesPage .scale-stepper button{width:48px;min-width:48px;min-height:44px;padding:0;font-size:20px;background:#242322;border:1px solid #464136}
.scale-keyboard-help{margin-left:auto;font-size:12px;color:#a7a096}
.scales-draft-line{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;font-size:11px;color:#96929c;line-height:1.5}
#scalesDraft{display:flex;align-items:center;gap:6px;color:#c4b391}#scalesDraft::before{content:'';width:5px;height:5px;border-radius:50%;background:#d6b268}#scalesDraft[data-saved="true"]{color:#9bbda3}#scalesDraft[data-saved="true"]::before{background:#8ab393}
.scales-status{margin:8px 0;min-height:0;font-size:13px;color:#95c9a5;line-height:1.5}.scales-status:not(:empty){padding:10px 14px;background:#132019;border:1px solid #294232;border-radius:5px}.scales-status.error{color:#ffb4b9;background:#29191c;border-color:#654047}
.scales-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start;gap:16px;margin-top:16px}
.scales-bottom>article{min-width:0;border:1px solid var(--scale-line);background:#141416;border-radius:7px;padding:18px}
.scales-card-heading{margin-bottom:16px;min-height:32px}.scales-card-heading h2{font-size:18px;margin:0;letter-spacing:-.3px}.scales-card-heading>span{font-size:11px;color:#aaa6af}
#userscalesPage .scales-card-heading button{background:transparent;padding:6px 10px;min-height:32px;color:#bdb8c5;font-size:12px}
.scales-bottom p{font-size:12px;color:#a7a3ae;line-height:1.55;margin:8px 0}
.scale-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
#userscalesPage .scale-preset{display:flex;align-items:center;gap:9px;text-align:left;padding:10px;min-width:0;min-height:44px;border:1px solid #303035;background:#1b1b1e}
.scale-preset small{font-size:10px;color:#9b929f;font-variant-numeric:tabular-nums}.scale-preset strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:600}
#userscalesPage .scale-preset[aria-pressed="true"]{border:1px solid #b19760;background:#30291c;color:#f1dfb8}
.scales-preset-footer{margin-top:14px}.scales-preset-footer>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#bcb5a7}
.scales-actions{margin-top:12px;gap:7px}.scales-actions button{padding:9px 11px}
.scales-file-actions{border-top:1px solid #29292d;margin-top:16px;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.scales-file-actions>span{font-size:11px;color:#9a96a1}.scales-file-actions>div{display:flex;gap:6px;flex-wrap:wrap}#userscalesPage .scales-file-actions button{font-size:11px;padding:7px 9px;min-height:34px;background:transparent}
.scales-set-summary{border-left:2px solid #8b7549;padding-left:11px;margin-bottom:14px}.scales-set-summary strong{font-size:16px;overflow-wrap:anywhere}.scales-set-summary p{margin:5px 0 0!important}
.scales-assignment{display:grid;grid-template-columns:1fr 1.2fr;gap:10px}.scales-assignment label,.scales-target-fields label,.scales-midi>label{display:grid;gap:6px;font-size:12px;color:#aaa6b1}
.scales-target-fields{display:grid;grid-template-columns:68px minmax(0,1fr) 78px;gap:8px;margin-top:12px}
#scalesReferences{margin:12px 0;color:#a39ca7;font-size:11px}
#scalesCombiRow{display:flex;align-items:center;gap:7px;line-height:1.5;margin-top:12px;font-size:12px;color:#c0bbc7}#scalesCombiRow input{min-height:0;width:auto}
.scales-apply-actions{padding-top:4px}
.scales-midi{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:16px;padding:16px 18px;border:1px solid #333237;border-radius:7px;background:#131315}
.scales-midi-copy{flex:1;min-width:210px;display:grid;gap:5px}.scales-midi-copy strong{font-size:13px}.scales-midi-copy span{font-size:12px;color:#b8b2bf}.scales-midi-copy small{font-size:11px;color:#9b96a1}.scales-midi>label{min-width:155px}.scales-midi .scales-actions{margin-top:0}
.scales-help{margin-top:16px;padding:12px 0;font-size:12px;color:#ada8b5}.scales-help summary{cursor:pointer;font-weight:600;min-height:30px;align-content:center}.scales-help p{max-width:950px;line-height:1.7;color:#aaa7b1}
#userscalesPage [hidden]{display:none!important}
@media(max-width:1250px){.scales-bottom{grid-template-columns:1fr 1fr;gap:12px}.scales-bottom>article{padding:15px}.scale-presets{grid-template-columns:repeat(2,minmax(0,1fr))}.scales-assignment{grid-template-columns:1fr}.scales-heading h1{font-size:30px}}
@media(max-width:900px){.scales-bottom{grid-template-columns:1fr}.scale-presets{grid-template-columns:repeat(3,minmax(0,1fr))}.scales-assignment{grid-template-columns:1fr 1.2fr}.scales-controls{gap:10px}.scale-name-label{flex-basis:100%}.scales-heading{gap:12px}.scales-surface{padding:16px}.scales-heading-actions{justify-content:space-between;width:100%}}
@media(max-width:480px){.scale-presets{grid-template-columns:repeat(2,minmax(0,1fr))}.scales-heading h1{font-size:29px}.scales-heading-actions{gap:6px}.scales-chip{font-size:11px;padding:0}.scales-surface{padding:12px}.scales-controls label:nth-child(2){width:84px}.scales-switches{flex:1}.scales-switches .scales-master{flex:1;min-width:100px!important}.scales-switches button{padding:8px 10px}.scales-target-fields{grid-template-columns:60px minmax(0,1fr) 66px}.scales-assignment{grid-template-columns:1fr}.scales-midi{gap:14px}.scales-midi-copy{flex-basis:100%}.scales-midi>label{flex:1}.scales-midi .scales-actions{width:100%}.scales-draft-line{gap:5px}}
@media(any-pointer:coarse),(max-width:1024px){#userscalesPage button,#userscalesPage .scales-file-actions button,#userscalesPage .scales-card-heading button{min-height:44px}#userscalesPage .scale-stepper button{min-height:44px}#userscalesPage .scale-note .scale-note-toggle{min-height:44px}.scales-help summary{min-height:44px}}
@media(prefers-reduced-motion:reduce){#userscalesPage .scale-note{transition:none}}

#userscalesPage button[aria-pressed="true"]{box-shadow:none}


/* Verified temporary MIDI tuning, kept separate from the file editor. */
.scales-live{border:1px solid #38383f;border-radius:12px;background:#141418;padding:20px;margin:20px 0}
.scales-live[data-active="true"]{border-color:#51b894;background:linear-gradient(110deg,#142823,#141418 70%)}
.scales-live-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.scales-live h2{font-size:20px;margin:0 0 8px}.scales-live p{margin:8px 0;line-height:1.5}
.scales-live .scales-chip{font-size:12px;vertical-align:middle;margin-left:8px}
.scales-live details{font-size:13px;color:#aaaebc;line-height:1.55}.scales-live summary{cursor:pointer;padding:8px 0}
#scalesLiveApplied:empty{display:none}#scalesLiveStatus.error{color:#ff9eab}
#userscalesPage .scales-bottom{grid-template-columns:minmax(0,1fr)}
.scales-file-tools{border-top:1px solid #303037;margin:24px 0;padding-top:16px}
.scales-file-tools>summary{cursor:pointer;font-weight:600;padding:10px 0}
.scales-file-tools .scales-destination{margin-top:16px}
.scales-live .scales-actions button{min-height:44px}
@media(max-width:600px){.scales-live{padding:16px}.scales-live-heading,.scales-live-heading>.scales-actions{width:100%}.scales-live-heading>.scales-actions{display:grid;grid-template-columns:1fr 1fr}.scales-live-heading>.scales-actions button:first-child{grid-column:1/-1}.scales-live h2 .scales-chip{display:inline-block}.scales-live p{font-size:14px}}