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

#main .tv { max-width: var(--w-page); }

/* the list on the left: artist · genre under the title, two-line rows */
#list .trk { min-height: var(--row-2); padding-block: 0; align-content: center; }
#list .trk .a .g { color: var(--text-3); }
#list .trk .bpm { font: 500 15px/22px var(--font-ui); font-feature-settings: var(--ff-num); color: var(--text); }
#list .trk .key { font: var(--t-small); font-feature-settings: var(--ff-num); color: var(--text-2); }
#list .trk:active:not(.sel) { background: var(--fill-strong); }
.trk-none { padding: var(--s-3); color: var(--text-3); font: var(--t-small); }

/* hero: name left, three readouts and the play button right */
.tv-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-6); }
.tv-id { min-width: 0; }
.tv-id .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-artist { font: 400 20px/26px var(--font-ui); color: var(--text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-genre { display: flex; gap: var(--s-3); align-items: baseline; margin-top: var(--s-2); font: var(--t-small); color: var(--text-2); }
.tv-genre a { color: var(--text-3); }
.tv-genre a:hover { color: var(--text-2); }
.tv-readouts { display: flex; gap: var(--s-6); }
.tv-readouts > div { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); min-width: 56px; }
.tv-readouts .readout { color: var(--text); }
.tv-cap { font: var(--t-small); color: var(--text-2); }
.tv-player { display: flex; }

/* one short warning line, only when there is something */
.tv-warn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s-2); margin-top: var(--s-4); font: var(--t-small); color: var(--warn); }
.tv-warn .dot { margin-right: 2px; }
.tv-warn i { font-style: normal; color: var(--text-3); }
.tv-warn [title] { cursor: help; }

/* the timeline panel */
.tv-wave { position: relative; margin-top: var(--s-5); background: var(--raised); border-radius: var(--r-m); padding: var(--s-4) var(--s-4) var(--s-3); }
.tv-wave canvas { display: block; width: 100%; cursor: pointer; }
.tv-wave canvas.reveal { animation: tv-reveal 280ms var(--ease-out); }
@keyframes tv-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* another track opened: what changed cross-fades (theme.css swap / fade), nothing slides */
.tv .swap { animation: swap var(--d-2) var(--ease-out); }
.tv .xf { animation: fade var(--d-2) linear; }
.tv-tip { position: absolute; top: 6px; display: none; pointer-events: none; padding: 5px 10px; border-radius: var(--r-s); background: var(--fill-strong);
  color: var(--text); font: var(--t-small); font-feature-settings: var(--ff-num); white-space: nowrap; box-shadow: var(--shadow-float); }

/* under the panel: actions left, time and the metronome right */
.tv-actions { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.tv-gap { flex: 1 1 auto; }
.tv-msg { font: var(--t-small); color: var(--warn); }
.tv-actions .need-stick button { height: 32px; }
.tv-time { font: var(--t-small); color: var(--text-2); font-feature-settings: var(--ff-num); }
.tv-time:empty, .tv-msg:empty { display: none; }
#tvMetro { color: var(--text-3); }
#tvMetro .ic { width: 20px; height: 20px; }
#tvMetro:hover:not(:disabled) { color: var(--text); }
#tvMetro.on { color: var(--accent); background: var(--accent-soft); }

/* what goes well next */
.tv-next { margin-top: var(--s-7); max-width: var(--w-read); }
.tv-next h3 { font: var(--t-title); margin-bottom: var(--s-3); }
.tv-mrows { display: flex; flex-direction: column; margin: 0 calc(-1 * var(--s-3)); }
.tv-m { display: grid; grid-template-columns: minmax(0, 1fr) 44px 40px; min-height: var(--row-2); grid-template-rows: auto auto; column-gap: var(--s-3); align-items: center;
  padding: 10px var(--s-3); border-radius: var(--r-m); cursor: pointer; transition: background-color 120ms linear; }
.tv-m:hover { background: var(--fill); }
.tv-m:focus-visible { outline-offset: -2px; }
.tv-m-t { grid-column: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-m-name { font-weight: 500; }
.tv-m-by { color: var(--text-2); }
.tv-m-why { grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: var(--s-2); font: var(--t-small); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-m-bpm, .tv-m-key { grid-row: 1 / 3; text-align: right; }
.tv-m-bpm { grid-column: 2; font: 500 15px/22px var(--font-ui); font-feature-settings: var(--ff-num); color: var(--text); }
.tv-m-key { grid-column: 3; color: var(--text-2); font: var(--t-small); font-feature-settings: var(--ff-num); }
.tv-more { display: inline-block; margin-top: var(--s-3); font: var(--t-small); color: var(--text-2); }
.tv-more:hover { color: var(--text); }

/* «Подробнее» sheet: plain rows in groups */
#sheetBody .tv-grp + .tv-grp { margin-top: var(--s-6); }
#sheetBody .tv-grp h3 { font: 600 15px/22px var(--font-ui); margin-bottom: var(--s-1); }
#sheetBody .tv-cap-line { margin: 0 0 var(--s-2); font: var(--t-small); color: var(--text-3); }
#sheetBody .tv-folds details + details { margin-top: var(--s-3); }
#sheetBody .tv-fold { padding-top: var(--s-2); }
#sheetBody .tv-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: 5px 0; }
#sheetBody .tv-row > span:first-child { color: var(--text-2); flex: none; }
#sheetBody .tv-row > span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }
#sheetBody .tv-row[title] > span:first-child { cursor: help; }
#sheetBody .tv-fine { margin: var(--s-2) 0 0; font: var(--t-small); color: var(--text-3); }
#sheetBody .tv-map svg { display: block; width: 100%; height: auto; }
#sheetBody .tv-map circle { cursor: pointer; }
#sheetBody .tv-raw pre { margin: var(--s-3) 0 0; border: 0; border-radius: var(--r-s); background: var(--fill); padding: var(--s-3); overflow: auto; max-height: 360px; font-size: 12px; }

@media (max-width: 1180px) {
  .tv-hero { gap: var(--s-5); }
  .tv-readouts { gap: var(--s-5); }
}
@media (max-width: 900px) {
  .tv-hero { grid-template-columns: minmax(0, 1fr) auto; }
  .tv-readouts { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .tv-player { grid-column: 2; grid-row: 1; }
}

/* skeleton (index.html, until the library view arrives): the real boxes, grey blocks in them */
#list .sk .trk { cursor: default; }
#list .sk .skel { justify-self: start; }
#list .sk .bpm, .tv.sk .tv-m-bpm { justify-self: end; width: 26px; height: 14px; }
#list .sk .key, .tv.sk .tv-m-key { justify-self: end; width: 20px; height: 11px; }
.tv.sk .tv-sk-artist { margin-top: 2px; }
.tv.sk .tv-sk-genre { margin-top: var(--s-2); }
.tv.sk .readout { width: 76px; } .tv.sk .readout.tv-sk-mid { width: 56px; } .tv.sk .readout.tv-sk-short { width: 28px; }
.tv.sk .tv-sk-cap { width: 40px; }
.tv.sk .tv-sk-play { width: 56px; height: 56px; }
.tv-sk-wave { position: relative; height: 216px; }
.tv-sk-wave .skel { position: absolute; left: 0; right: 0; height: 10px; border-radius: 3px; opacity: .7; }
.tv-sk-wave .skel:nth-child(1) { top: 0; height: 4px; }
.tv-sk-wave .skel:nth-child(2) { top: 30px; height: 94px; border-radius: var(--r-s); opacity: .5; }
.tv-sk-wave .skel:nth-child(3) { top: 138px; } .tv-sk-wave .skel:nth-child(4) { top: 153px; }
.tv-sk-wave .skel:nth-child(5) { top: 168px; } .tv-sk-wave .skel:nth-child(6) { top: 183px; }
.tv.sk .tv-sk-btn { width: 128px; height: 36px; }
.tv.sk .tv-sk-more { width: 80px; margin-left: var(--s-3); }
.tv.sk .tv-sk-h { margin-bottom: var(--s-3); }
.tv.sk .tv-m { cursor: default; }
.tv.sk .tv-sk-link { width: 150px; margin-top: var(--s-3); }
.tv.sk .tv-m-t, .tv.sk .tv-m-why { justify-self: start; }