/* «Что дальше» (js/library/next.js): the title, the search and filters, «Сет в работе» on the left, the list on the right.
   Text on the canvas, no borders, spacing by tokens (docs/plans/2026-10-29-redesign.md). Loaded after library.css. */
#nextPane { max-width: var(--w-page); padding: var(--s-6) var(--s-5) var(--s-8); }
#nextPane .empty-state { margin: 8vh auto 0; max-width: 820px; }
#nextPane .empty-state h2 { font: var(--t-display); letter-spacing: -.02em; }
.nxt-top { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.nxt-pick { position: relative; }
.nxt-sugg { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 6px); padding: 6px; background: var(--raised); border-radius: var(--r-m); box-shadow: var(--shadow-float); }
.nxt-sugg:empty, .nxt-sugg.shut { display: none; }
.nxt-sg { display: flex; align-items: baseline; gap: var(--s-4); width: 100%; height: auto; padding: 10px var(--s-3); border-radius: var(--r-s); background: transparent; font: var(--t-body); text-align: left; }
.nxt-sg:hover:not(:disabled) { background: var(--fill); }
.nxt-sg .nxt-t { flex: 1; }
.nxt-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nxt-t b, .nxt-d b { font-weight: 500; } .nxt-t span { color: var(--text-2); }
/* BPM and key: their own columns, in the rows, the draft and the search */
.nxt-bpm { flex: none; width: 36px; text-align: right; font: 500 15px/22px var(--font-ui); font-feature-settings: var(--ff-num); color: var(--text); }
.nxt-key { flex: none; width: 36px; text-align: right; font: var(--t-small); font-feature-settings: var(--ff-num); color: var(--text-2); }
.nxt-none { color: var(--text-3); font: var(--t-small); padding: var(--s-3) 0; }
.nxt-sugg .nxt-none { padding: var(--s-3); }
.nxt-filters { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.nxt-fl { display: flex; align-items: center; gap: var(--s-3); }
.nxt-cap { color: var(--text-3); font: var(--t-small); }
.nxt-fr { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.nxt-fr select { max-width: 220px; }
.nxt-fr label.switch { gap: var(--s-2); color: var(--text-2); font: var(--t-small); }
.nxt-pick input[type=search]::-webkit-search-cancel-button { opacity: .5; }

.nxt-cols { display: grid; grid-template-columns: var(--w-side) minmax(0, 1fr); gap: var(--s-7); margin-top: var(--s-7); align-items: start; }
.nxt-cols.solo { grid-template-columns: minmax(0, 1fr); }
.nxt-cols.solo .nxt-draft { display: none; }

/* the draft; hovers bleed to the left only, never past the column's right edge */
.nxt-draft { position: sticky; top: calc(var(--bar-h) + var(--s-4)); max-height: calc(100vh - var(--bar-h) - var(--s-6)); overflow-y: auto; min-width: 0; }
.nxt-dh { display: flex; align-items: center; gap: var(--s-3); }
.nxt-dtitle, .nxt-after { font: var(--t-title); letter-spacing: -.01em; }
.nxt-sub { color: var(--text-2); font: var(--t-small); margin-top: var(--s-1); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nxt-dl { margin: var(--s-4) 0 0; }
.nxt-d { display: flex; align-items: baseline; gap: var(--s-2); min-height: 36px; padding: 6px 0 6px var(--s-2); border-radius: var(--r-m); cursor: grab; position: relative; transition: background-color 120ms linear; }
.nxt-d:hover, .nxt-d:focus-within { background: var(--fill); }
.nxt-d .n { flex: none; width: 18px; color: var(--text-3); font: var(--t-small); font-feature-settings: var(--ff-num); }
.nxt-d .nxt-dt { flex: 1; height: auto; padding: 0; justify-content: flex-start; text-align: left; color: var(--text); font: var(--t-body); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.nxt-d .nxt-dt:hover:not(:disabled) { text-decoration: none; }
.nxt-d .nxt-dt span { color: var(--text-2); }
.nxt-d.anchor .n, .nxt-d.anchor .nxt-dt { color: var(--accent); }
.nxt-d .ops { display: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding-left: 24px; background: linear-gradient(90deg, transparent, var(--fill) 20px); border-radius: 0 var(--r-m) var(--r-m) 0; }
.nxt-d:hover .ops, .nxt-d:focus-within .ops { display: flex; }
.nxt-d:hover .nxt-bpm, .nxt-d:hover .nxt-key, .nxt-d:focus-within .nxt-bpm, .nxt-d:focus-within .nxt-key { visibility: hidden; }
.nxt-d .ops button, .nxt-s .play-btn { width: 28px; height: 28px; }
.nxt-d .ops .ic { width: 16px; height: 16px; }
.nxt-d.drag { opacity: .4; } .nxt-d.over { box-shadow: 0 -2px 0 var(--accent); }
.nxt-s { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: 0 0 0 calc(var(--s-2) + 18px + var(--s-2)); min-height: 24px; color: var(--text-3); font: var(--t-small); border-radius: var(--r-s); }
.nxt-st { min-width: 0; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nxt-s .play-btn { opacity: 0; transition: opacity 120ms linear, background-color 120ms linear, color 120ms linear; }
.nxt-s:hover .play-btn, .nxt-s .play-btn:focus-visible, .nxt-s .play-btn.on { opacity: 1; }
/* a change flashes once: the tint fades out (500 ms); a new row enters like a page */
.nxt-d.chg, .nxt-s.chg { animation: nxt-flash 500ms var(--ease-out); }
@keyframes nxt-flash { from { background-color: var(--accent-soft); } to { background-color: transparent; } }
.nxt-d.new { animation: enter 200ms var(--ease-out); }
.nxt-btns { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.nxt-btns .primary { flex: 1; height: 40px; padding: 0 var(--s-3); }
.nxt-btns .secondary { height: 40px; padding: 0 var(--s-3); }
.nxt-btns .ic { width: 16px; height: 16px; margin-right: -2px; }
.nxt-set { margin-top: var(--s-4); font: var(--t-small); }
.nxt-sets { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.nxt-sets select { width: 100%; }
.nxt-sets .danger { justify-self: start; padding: 0; height: 28px; }
.nxt-sets .danger:hover:not(:disabled) { background: transparent; text-decoration: underline; }

/* the list */
.nxt-list { min-width: 0; }
.nxt-lh { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.nxt-after { overflow-wrap: anywhere; }
.nxt-lb { display: flex; align-items: center; gap: var(--s-2); }
.nxt-rows { margin: var(--s-4) 0 0; transition: opacity 160ms linear; }
.nxt-rows.loading { opacity: .45; pointer-events: none; }
.nxt-rows.sk .nxt-r { cursor: default; }
.nxt-rows.sk .nxt-r:hover { background: transparent; }
.nxt-rows.sk .nxt-l1 { align-items: center; min-height: 22px; }
.nxt-rows.sk .nxt-l1 .nxt-t { flex: none; margin-right: auto; }
.nxt-rows.sk .nxt-l1 .nxt-bpm { width: 26px; margin-left: 10px; } .nxt-rows.sk .nxt-l1 .nxt-key { width: 22px; margin-left: 14px; }
.nxt-rows.sk .nxt-l2 { justify-content: flex-start; }
.nxt-rows.sk .nxt-act { width: 68px; }
.nxt-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s-3); min-height: var(--row-2); padding: 8px 0 8px var(--s-4); margin-left: calc(var(--s-4) * -1); border-radius: var(--r-m); cursor: pointer; transition: background-color 120ms linear; }
.nxt-r:hover, .nxt-r:focus-within { background: var(--fill); }
.nxt-r:focus-visible { outline-offset: -2px; }
.nxt-r.down .nxt-l1, .nxt-r.down .nxt-l2 > span:first-child { opacity: .5; }
.nxt-main { min-width: 0; padding: 2px 0; }
.nxt-l1 { display: flex; align-items: baseline; gap: var(--s-2); }
.nxt-l1 .nxt-t { flex: 1; }
.nxt-l1 .verdict { margin-right: var(--s-3); }
.nxt-en { flex: none; width: 16px; text-align: center; color: var(--text-2); }
.nxt-l2 { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 28px; margin-top: 0; color: var(--text-3); font: var(--t-small); }
/* 👍 👎 sit at the right end of the second line, on hover / focus (or while the pair is rated) */
.nxt-fb { display: flex; margin: -4px 0; opacity: 0; transition: opacity 120ms linear; }
.nxt-r:hover .nxt-fb, .nxt-r:focus-within .nxt-fb, .nxt-fb:has(.on) { opacity: 1; }
.nxt-fb button { width: 28px; height: 28px; padding: 0; }
.nxt-fb .ic { width: 16px; height: 16px; }
.nxt-fb .flip { display: inline-flex; transform: rotate(180deg); }
.nxt-fb .on { color: var(--text); background: var(--fill-strong); }
.nxt-why { margin: var(--s-2) 0 0; padding: 0 0 0 18px; color: var(--text-3); font: var(--t-small); }
.nxt-why li { margin: 3px 0; }
.nxt-why li.warn { color: var(--warn); }
/* «Что не так?» after a 👎: a caption and quiet text buttons (the sets screen uses the same classes) */
.nxt-fbx { display: flex; gap: 2px var(--s-1); flex-wrap: wrap; align-items: center; margin-top: var(--s-2); color: var(--text-3); font: var(--t-small); }
.nxt-fbx > span { margin-right: var(--s-2); }
.nxt-fbx button { height: 28px; padding: 0 8px; font-size: 13px; }
/* the actions show on hover / focus (or while a pair is rated or played) */
.nxt-act { display: flex; align-items: center; gap: 0; padding-right: var(--s-1); opacity: 0; transition: opacity 120ms linear; }
.nxt-r:hover .nxt-act, .nxt-r:focus-within .nxt-act, .nxt-act:has(.on) { opacity: 1; }
.nxt-act button { width: 32px; height: 32px; padding: 0; }
.nxt-act .ic { width: 16px; height: 16px; }
.nxt-act .play-btn.on { color: var(--text); background: var(--fill-strong); }

@media (max-width: 1000px) {
  .nxt-cols { gap: var(--s-6); }
}
@media (max-width: 800px) {
  #nextPane { padding: var(--s-5) var(--s-4) var(--s-7); }
  .nxt-cols { grid-template-columns: 1fr; }
  .nxt-draft { position: static; max-height: none; }
  .nxt-act, .nxt-fb { opacity: 1; }
}