/* sets: see docs/plans/2026-10-29-redesign.md; tokens in theme.css. Loaded after library.css and overrides it. */

#setPane { max-width: var(--w-mid); margin: 0 auto; padding: var(--s-6) var(--s-5) 120px; }
#setPane h4 { margin: var(--s-5) 0 var(--s-2); font: 500 13px/18px var(--font-ui); color: var(--text-2); text-transform: none; letter-spacing: 0; }
#setPane .dot { width: 6px; height: 6px; margin: 0; }
#setPane ul { margin: 0; padding-left: 18px; }
/* while another set loads, the open one dims (like «Что дальше» while it re-picks); the first one has a skeleton */
#setPane .sv-curve, #setPane .st-list, #setPane .sv-above { transition: opacity var(--d-2) linear; }
#setPane.busy .sv-curve, #setPane.busy .st-list, #setPane.busy .sv-above { opacity: .45; pointer-events: none; }
.sv-sk .sv-sk-sum { margin-top: var(--s-2); }
.sv-sk .sv-sk-b1 { width: 112px; height: 36px; } .sv-sk .sv-sk-b2 { width: 97px; height: 36px; } .sv-sk .sv-sk-b3 { width: 102px; height: 36px; }
.sv-sk .sv-sk-curve { height: auto; aspect-ratio: 1000 / 116; border-radius: var(--r-m); opacity: .5; }
.sv-sk .sv-sk-line { width: 220px; } .sv-sk .need-stick { min-height: 28px; }
.sv-sk .sv-sk-more { width: 36px; }
#setPane .sv-sk .st-row:hover { background: transparent; }
#setPane .sv-sk .st-row .n .skel { width: 8px; margin-left: auto; } #setPane .sv-sk .st-row .ts .skel { width: 28px; }
#setPane .sv-sk .st-row .bpm .skel { width: 28px; margin-left: auto; } #setPane .sv-sk .st-row .key .skel { width: 22px; }
#setPane .sv-sk .st-trh { cursor: default; }
#stSpin:not(.on) { display: none; }

/* header: the set's name (the picker sits invisibly over it), one summary line, the actions */
.sv-head { display: flex; gap: var(--s-5); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.sv-id { min-width: 0; flex: 1 1 320px; }
.sv-name { position: relative; display: inline-flex; max-width: 100%; }
.sv-name .title { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; overflow-wrap: anywhere; }
.sv-name .sv-chev { width: 22px; height: 22px; color: var(--text-3); transition: color 120ms linear; }
.sv-name.many:hover .sv-chev { color: var(--text); }
.sv-name .sv-pick { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font: var(--t-body); }
.sv-name:has(.sv-pick:focus-visible) { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 4px; border-radius: 6px; }
.sv-sum { margin: var(--s-2) 0 0; color: var(--text-2); font: var(--t-body); }
.sv-sum .spin { width: 12px; height: 12px; margin-left: 6px; }
button.sv-risk { height: auto; padding: 0; font: inherit; color: var(--text-2); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--bad) 70%, transparent); text-underline-offset: 4px; }
button.sv-risk:hover:not(:disabled) { color: var(--text); }
.sv-acts { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; padding-top: 2px; }
.sv-more { position: relative; }
.sv-more .menu { min-width: 160px; }
.sv-more .ic { width: 20px; height: 20px; }

/* the curve: energy in the accent, BPM quiet, a point per track */
.sv-curve { margin: var(--s-6) 0 var(--s-5); }
.sv-curve svg { display: block; width: 100%; height: auto; overflow: visible; }
.sv-curve text { font: 500 12px var(--font-ui); fill: var(--text-3); font-feature-settings: var(--ff-num); }
.sv-curve .sv-base { stroke: var(--hairline); }
.sv-curve .a0 { stop-color: var(--accent); stop-opacity: .16; } .sv-curve .a1 { stop-color: var(--accent); stop-opacity: 0; }
.sv-curve .sv-en { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.sv-curve .sv-bpm { fill: none; stroke: var(--text-3); stroke-width: 1.2; opacity: .8; stroke-linejoin: round; }
.sv-curve .sv-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sv-draw 700ms var(--ease-out) forwards; }
@keyframes sv-draw { to { stroke-dashoffset: 0; } }
.sv-curve .sv-lab { font: var(--t-caption); fill: var(--text-3); }
.sv-curve .sv-lab.en { fill: var(--accent); }
.sv-curve .sv-pt { cursor: pointer; }
.sv-curve .sv-pt circle { fill: var(--accent); stroke: var(--bg); stroke-width: 2; transition: r 120ms var(--ease-out); }
.sv-curve .sv-pt .hit { fill: transparent; stroke: none; }
.sv-curve .sv-pt:hover circle:not(.hit) { r: 5; }

/* what repeats over the set, once */
.sv-above { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); }
.sv-above:not(:has(> :not([hidden]))) { display: none; }
.sv-line { margin: 0; color: var(--text-3); font: var(--t-small); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.sv-line select { height: 36px; }
#setPane .need-stick button { height: 28px; font-size: 13px; }

/* the tracklist: rows without separators, a thin transition line between them */
#setPane .st-list { margin-top: 0; }
#setPane .st-row { display: grid; grid-template-columns: 22px 48px minmax(0, 1fr) 10px 76px 36px 48px 36px; gap: var(--s-3); align-items: center;
  min-height: 48px; padding: 4px 4px 4px 8px; border: 0; border-radius: var(--r-m); background: transparent; box-shadow: none; font: var(--t-body); transition: background-color 120ms linear; }
#setPane .st-row:hover { background: var(--fill); }
#setPane .st-row.playing { background: var(--fill-strong); border: 0; box-shadow: none; }
#setPane .st-row.playing .n { color: var(--accent); }
#setPane .st-row .n { color: var(--text-3); text-align: right; font: var(--t-small); font-feature-settings: var(--ff-num); }
#setPane .st-row .ts { color: var(--text-3); font: var(--t-small); font-feature-settings: var(--ff-num); }
#setPane .st-row .tt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#setPane .st-row .tt b { font-weight: 500; }
#setPane .st-row .tt span { color: var(--text-2); }
#setPane .st-row .fl { display: flex; justify-content: center; }
#setPane .st-row .bpm { text-align: right; font-weight: 500; font-feature-settings: var(--ff-num); white-space: nowrap; }
#setPane .st-row .bpm i { font: var(--t-caption); font-style: normal; color: var(--text-3); margin-left: 4px; }
#setPane .st-row .key { color: var(--text-2); font: var(--t-small); font-feature-settings: var(--ff-num); }
#setPane .st-row .en { height: 3px; background: var(--fill-strong); border-radius: 2px; overflow: hidden; }
#setPane .st-row .en i { display: block; height: 100%; background: var(--text-3); border-radius: 2px; }
#setPane .st-row:hover .en i, #setPane .st-row.playing .en i { background: var(--accent); }
#setPane .play-btn.sm { opacity: 0; transition: opacity 120ms linear, background-color 120ms linear, color 120ms linear; }
#setPane .st-row:hover .play-btn.sm, #setPane .st-trh:hover .play-btn.sm, #setPane .play-btn.sm:focus-visible, #setPane .play-btn.sm.on { opacity: 1; }
#setPane .play-btn.sm.on { color: var(--accent); }
#setPane .st-row.hl, #setPane .st-tr.hl > .st-trh { animation: sv-hl 700ms var(--ease-out); }
@keyframes sv-hl { from { background: var(--fill-strong); } }

#setPane .st-tr { margin: 0 0 0 102px; padding: 0; border: 0; scroll-margin-top: 72px; }   /* its text under the titles */
#setPane .st-row { scroll-margin-top: 72px; }
#setPane .st-trh { display: flex; align-items: center; gap: var(--s-2); min-height: 32px; padding: 0 4px 0 8px; margin-left: -8px; border: 0; border-radius: var(--r-s); background: transparent;
  color: var(--text-3); font: var(--t-small); cursor: pointer; flex-wrap: nowrap; transition: color 120ms linear, background-color 120ms linear; }
#setPane .st-trh:hover { color: var(--text-2); background: transparent; border: 0; }
#setPane .st-trh .sv-txt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#setPane .st-trh .sv-chev { width: 14px; height: 14px; opacity: 0; transition: opacity 120ms linear, transform 160ms var(--ease-out); }
#setPane .st-trh:hover .sv-chev, #setPane .st-tr.open .sv-chev { opacity: 1; }
#setPane .st-tr.open .sv-chev { transform: rotate(180deg); }
#setPane .st-trh .sp { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
#setPane .sv-expl { margin: -4px 0 6px; color: var(--text-2); font: var(--t-small); }
#setPane .st-trh .play-btn.sm { width: 28px; height: 28px; }

/* 👍 👎: quiet icons, shown on hover; the one given stays */
#setPane .st-fbb { display: inline-flex; gap: 2px; margin: 0; }
#setPane .st-trh button.fb { width: 28px; height: 28px; padding: 0; color: var(--text-3); background: transparent; border: 0; filter: none; opacity: 0; font-size: 0; }
#setPane .st-trh button.fb .ic { width: 16px; height: 16px; }
#setPane .st-trh button.fb:hover:not(:disabled) { color: var(--text); background: var(--fill); }
#setPane .st-tr:hover button.fb, #setPane .st-trh button.fb:focus-visible, #setPane .st-tr.rated button.fb.up, #setPane .st-tr.rated button.fb.down { opacity: 1; }
#setPane .st-trh button.fb.up, #setPane .st-trh button.fb.down { color: var(--text); background: transparent; border: 0; }
#setPane .st-trh button.fb.up .ic, #setPane .st-trh button.fb.down .ic { fill: var(--fill-strong); }
#setPane .st-trh button.link { height: auto; font: var(--t-small); }

#setPane .st-fbx { margin: 4px 0 var(--s-3); padding: var(--s-3) var(--s-4); background: var(--fill); border: 0; border-radius: var(--r-m); display: grid; gap: var(--s-3); }
#setPane .st-fbx .fbl { color: var(--text-2); font: var(--t-small); }
#setPane .st-fbx .fbrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#setPane .st-fbx .fbrow .sp { flex: 1; }
#setPane .st-fbx .fbc { height: 36px; background: var(--fill-strong); border: 0; font: var(--t-small); padding: 0 12px; }
.sv-togs { display: flex; flex-wrap: wrap; gap: 6px; }
button.sv-tog { height: 30px; padding: 0 12px; font: 400 13px/1 var(--font-ui); color: var(--text-2); background: transparent; }
button.sv-tog:hover:not(:disabled) { color: var(--text); background: var(--fill-strong); }
button.sv-tog.on, button.sv-tog.on:hover:not(:disabled) { color: var(--text); background: var(--fill-strong); }

/* a transition folded out */
#setPane .st-card { margin: 4px 0 var(--s-5); padding: var(--s-2) 0 0; background: transparent; border: 0; border-radius: 0; animation: enter 200ms var(--ease-out); }
#setPane .sv-qt { margin: 0 0 6px; color: var(--text-2); font: var(--t-small); display: flex; gap: 8px; align-items: baseline; }
#setPane .sv-qt .dot { transform: translateY(-1px); }
#setPane .st-tl { margin: var(--s-3) 0; padding: 0; background: transparent; border: 0; }
#setPane .st-tl svg { display: block; width: 100%; height: auto; }
#setPane .st-tl text { font: 500 12px var(--font-ui); fill: var(--text-3); font-feature-settings: var(--ff-num); }
#setPane .st-tl text.on { fill: var(--on-light); font-weight: 600; }
#setPane .st-tl .ov { fill: var(--text); opacity: .05; }
#setPane .st-tl .edge { stroke: var(--text-3); stroke-dasharray: 3 3; opacity: .7; }
#setPane .st-tl .axis { stroke: var(--hairline); }
#setPane .st-tl .ramp { fill: var(--text-3); opacity: .6; }
#setPane .st-tl .st { stroke: var(--bg); stroke-width: 1.5; }
#setPane .st-tl .st.a { fill: var(--text-2); } #setPane .st-tl .st.b { fill: var(--accent); }
#setPane .st-tl .st.rl { stroke-width: 3; opacity: .45; }
#setPane .st-tl .st.rl.a { stroke: var(--text-2); } #setPane .st-tl .st.rl.b { stroke: var(--accent); }
#setPane .st-tl .ph { stroke: var(--text); stroke-width: 1.5; }
#setPane .st-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-2) var(--s-5); margin: 0; font: var(--t-small); }
#setPane .st-facts dt { color: var(--text-3); }
#setPane .st-facts dd { margin: 0; color: var(--text); }
#setPane .cues { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-2) var(--s-6); margin: 0; }
#setPane .cue-deck { background: transparent; border: 0; padding: 0; }
#setPane .cue-h { color: var(--text-2); font: var(--t-small); margin-bottom: 4px; }
#setPane .cue { grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--s-2); font: var(--t-small); padding: 4px 0; }
#setPane .cue-slot { width: 20px; height: 20px; border-radius: 5px; background: var(--fill-strong); font: 700 11px/1 var(--font-ui); }
#setPane .cue-k { color: var(--text); font: var(--t-small); letter-spacing: 0; font-weight: 400; }
#setPane .cue-pos { color: var(--text-2); font-weight: 400; }
#setPane .cue-notes { color: var(--text-3); font: var(--t-small); margin-top: 4px; display: grid; gap: 2px; }
.sv-scroll { overflow-x: auto; }
#setPane table.st-steps { border-collapse: collapse; width: 100%; font: var(--t-small); }
#setPane .st-steps th { text-align: left; color: var(--text-3); font: var(--t-caption); text-transform: none; letter-spacing: 0; padding: 4px 8px 6px 0; border: 0; cursor: help; }
#setPane .st-steps td { padding: 4px 12px 4px 0; border: 0; vertical-align: top; color: var(--text); }
#setPane .st-steps td:first-child, #setPane .st-steps td.pos { color: var(--text-2); white-space: nowrap; }
#setPane .st-steps tr.past td { color: var(--text-3); } #setPane .st-steps tr.past td:last-child { color: var(--text); opacity: .7; }
#setPane .sv-why { margin: 0; padding-left: 18px; color: var(--text-2); font: var(--t-small); display: grid; gap: 4px; }

/* the build form (side sheet) */
.sv-form { display: grid; gap: var(--s-5); padding-top: var(--s-2); }
.sv-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-2); }
.sv-form legend { padding: 0; margin-bottom: var(--s-2); color: var(--text-2); font: var(--t-small); }
.sv-checks { display: grid; gap: 2px; max-height: 248px; overflow-y: auto; margin: 0 -8px; }
.sv-checks label.check { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--s-3); padding: 7px 8px; border-radius: var(--r-s); font: var(--t-body); transition: background-color 120ms linear; }
.sv-checks label.check:hover { background: var(--fill); }
.sv-checks .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-checks .faint { font: var(--t-small); font-feature-settings: var(--ff-num); }
.sv-f { display: grid; gap: var(--s-2); }
.sv-k { color: var(--text-2); font: var(--t-small); }
.sv-f .seg { justify-self: start; max-width: 100%; }
.sv-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.sv-extra > summary { font: var(--t-body); }
.sv-extra-b { display: grid; gap: var(--s-5); padding-top: var(--s-4); }
.sv-ends { display: flex; justify-content: space-between; color: var(--text-3); font: var(--t-caption); }
.sv-form input[type=range] { width: 100%; margin: 6px 0 0; }
.sv-form select { width: 100%; }
.sv-form label.switch { font: var(--t-body); color: var(--text); }
.sv-form label.switch:has(input:disabled) { opacity: .4; cursor: default; }
.sv-cnt { margin: 0; color: var(--text-2); font: var(--t-small); }
.sv-go { display: flex; gap: var(--s-2); align-items: center; }
.sv-go .primary { flex: 1; height: 44px; font-size: 15px; }
.sv-go .secondary { height: 44px; }
.sv-form .err { margin: 0; }

/* the export (side sheet) */
.rbx { display: grid; gap: var(--s-4); padding-top: var(--s-2); }
.rbx p { margin: 0; }
.rbx > .faint.small:empty { display: none; }
.rbx .notice { margin: 0; }
.rbx .notice b { font-weight: 600; }
.rbx #rbxHint { margin-top: calc(-1 * var(--s-3)); }
.rbx details > summary { font: var(--t-body); }
.rbx-why[open] > summary, .rbx-how[open] > summary, .rbx-other[open] > summary { margin-bottom: var(--s-3); }
.rbx-reasons { margin: 0 0 var(--s-3); padding: 0; list-style: none; display: grid; gap: 4px; font: var(--t-small); color: var(--text-2); }
.rbx-reasons .num { color: var(--text); margin-right: 6px; }
.rbx-tracks { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); font: var(--t-small); max-height: 360px; overflow-y: auto; }
.rbx-tracks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-2); }
.rbx-tracks .n { color: var(--text-3); text-align: right; }
.rbx-tracks b { font-weight: 500; overflow-wrap: anywhere; }
.rbx-steps { margin: 0 0 var(--s-3); padding-left: 20px; display: grid; gap: 6px; font: var(--t-small); color: var(--text-2); }
.rbx-steps b { color: var(--text); font-weight: 500; }
.rbx-how .faint.small { margin-top: var(--s-2); }
.rbx-other .f { margin-bottom: var(--s-2); }
.rbx input[type=file] { height: auto; padding: 8px 0; background: transparent; font: var(--t-small); color: var(--text-2); }
.rbx input[type=file]::file-selector-button { margin-right: 12px; height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: var(--fill-strong); color: var(--text); font: 500 13px var(--font-ui); cursor: pointer; }
.rbx .quiet { justify-self: start; }

@media (max-width: 760px) {
  #setPane { padding: var(--s-5) var(--s-4) 120px; }
  .sv-acts { width: 100%; }
  #setPane .st-row { grid-template-columns: 20px minmax(0, 1fr) 10px 56px 32px 32px; gap: var(--s-2); }
  #setPane .st-row .ts, #setPane .st-row .en { display: none; }
  #setPane .st-row .play-btn.sm { opacity: 1; }
  #setPane .st-tr { margin-left: 36px; }
  #setPane .st-trh button.fb { opacity: 1; }
}