/* ==========================================================================
   app-sound.css — the music library.

   A NeXT browser over a table. The three columns are the index; the table is
   the thing itself. The transport is a strip of chrome that does what the
   chrome on a real player does and then admits it has nothing to play.
   ========================================================================== */

/* ------------------------------------------------------------- the columns */
.browser.snd-cols {
  flex: 0 0 36%;
  min-height: 84px;
  border-bottom: 1px solid var(--lo);
  box-shadow: inset 0 -1px 0 var(--hi);
}
.browser.snd-cols .col { flex: 1 1 0; }
.browser.snd-cols .col:last-child { border-right: 0; box-shadow: none; }

/* ------------------------------------------------------------- the table */
.snd-body {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  overflow: auto; direction: rtl;
  background: var(--gray);
  outline-offset: -2px;
  scrollbar-width: thin; scrollbar-color: var(--gray-dk) var(--gray-lt);
}
.snd-body > * { direction: ltr; }
.snd-body::-webkit-scrollbar { width: 13px; }
.snd-body::-webkit-scrollbar-track { background: var(--gray-lt); }
.snd-body::-webkit-scrollbar-thumb {
  background: var(--gray);
  border: 1px solid var(--lo);
  border-top-color: var(--hi); border-left-color: var(--hi);
}

.snd-head, .snd-row {
  display: grid;
  grid-template-columns:
    minmax(0, 2.4fr) 52px minmax(0, 1.55fr) minmax(0, 1.75fr) 54px 86px;
  align-items: center;
}

.snd-head {
  position: sticky; top: 0; z-index: 2;
  background: var(--gray);
  border-bottom: 1px solid var(--lo);
  box-shadow: inset 0 -1px 0 var(--hi);
}
.snd-head .h {
  font-family: var(--ui); font-size: 10.5px; line-height: 1;
  text-transform: uppercase; letter-spacing: .06em;
  text-align: left;
  padding: 5px 6px;
  background: var(--gray); color: var(--lo);
  border: 0;
  border-right: 1px solid var(--lo);
  box-shadow: inset -1px 0 0 var(--hi), inset 0 1px 0 var(--hi);
  cursor: pointer;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.snd-head .h:last-child { border-right: 0; box-shadow: inset 0 1px 0 var(--hi); }
.snd-head .h:hover { color: var(--ink); }
.snd-head .h.on { color: var(--ink); background: var(--gray-dk); }
.snd-head .h.on[data-dir="up"]::after   { content: " \25B4"; }
.snd-head .h.on[data-dir="down"]::after { content: " \25BE"; }
.snd-head .h:active { box-shadow: inset 1px 1px 0 var(--lo); }
.snd-head .h:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

.snd-row {
  font-size: 11.5px; line-height: 1.3;
  padding: 2px 0;
  cursor: default; user-select: none;
  border-bottom: 1px solid rgba(87,78,68,.14);
}
.snd-row > span {
  padding: 0 6px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.snd-row .c-time, .snd-row .c-plays { text-align: right; font-family: var(--mono); font-size: 10.5px; }
.snd-row .c-last { font-family: var(--mono); font-size: 10px; opacity: .72; }
.snd-row .c-artist, .snd-row .c-album { color: #2b2b2b; }
/* a track nobody ever opened reads lighter than one that was worn out */
.snd-row .c-plays:empty::before { content: "—"; opacity: .35; }
.snd-row .c-last:empty::before  { content: "never"; opacity: .45; font-style: italic; }
.snd-row:nth-child(even) { background: rgba(0,0,0,.025); }
.snd-row:hover { background: rgba(0,0,0,.07); }
.snd-row.sel, .snd-row.sel:hover { background: var(--ink); color: var(--paper); }
.snd-row.sel .c-artist, .snd-row.sel .c-album { color: rgba(255,255,255,.8); }
.snd-row.sel .c-last, .snd-row.sel .c-plays { color: rgba(255,255,255,.75); }
/* the one file that is actually there */
.snd-row.here .c-name::before {
  content: "\25CF"; font-size: 7px; vertical-align: 2px;
  margin-right: 5px; color: var(--rust);
}
.snd-row.here.sel .c-name::before { color: var(--amber); }

/* ------------------------------------------------------------ the transport */
.snd-transport {
  flex: 0 0 auto;
  background: var(--gray);
  border-top: 1px solid var(--lo);
  box-shadow: inset 0 1px 0 var(--hi);
  padding: 7px 9px 9px;
}
.snd-bar { display: flex; align-items: center; gap: 9px; }
.snd-play {
  flex: 0 0 auto;
  width: 30px; height: 26px; padding: 0;
  font-size: 12px; line-height: 1;
}
.snd-play:disabled { color: var(--gray-dk); cursor: default; box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo); }
.snd-mid { flex: 1 1 auto; min-width: 0; }
.snd-title {
  font-size: 11.5px; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 4px;
}
.snd-pos { flex: 0 0 auto; font-family: var(--mono); font-size: 10.5px; color: var(--lo); }

.snd-scrub {
  position: relative;
  height: 11px;
  background: var(--gray-lt);
  border-top: 1px solid var(--lo); border-left: 1px solid var(--lo);
  border-right: 1px solid var(--hi); border-bottom: 1px solid var(--hi);
}
.snd-scrub[aria-disabled="true"] { opacity: .62; }
.snd-knob {
  position: absolute; top: -2px; left: 0;
  width: 11px; height: 13px;
  background: var(--gray);
  border-top: 1px solid var(--hi); border-left: 1px solid var(--hi);
  border-right: 1px solid var(--lo); border-bottom: 1px solid var(--lo);
}

/* ------------------------------------------------- where a waveform would be */
.snd-face { margin-top: 8px; }

.snd-missing {
  padding: 12px 12px 11px;
  background: var(--gray-dk); color: var(--paper);
  border-top: 1px solid var(--lo); border-left: 1px solid var(--lo);
  border-right: 1px solid var(--hi); border-bottom: 1px solid var(--hi);
}
.snd-missing .m-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12px; letter-spacing: .03em;
}
.snd-missing .m-head .meta { color: rgba(255,255,255,.66); font-family: var(--mono); font-size: 10.5px; }
.snd-missing .m-path {
  display: block; margin: 7px 0 6px;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.5;
  color: var(--paper);
  word-break: break-all;
  opacity: .88;
}
.snd-missing .meta { color: rgba(255,255,255,.62); font-size: 11px; margin: 0; }

.snd-wavebox {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px;
  background: #14161a;
  border-top: 1px solid var(--lo); border-left: 1px solid var(--lo);
  border-right: 1px solid var(--hi); border-bottom: 1px solid var(--hi);
}
.snd-wavebox .meta { font-family: var(--mono); font-size: 10px; color: var(--amber-dim); }
svg.snd-wave { display: block; flex: 1 1 auto; width: 100%; height: 34px; }
svg.snd-wave polygon { fill: var(--amber-dim); }
.snd-here { font-family: var(--mono); font-size: 10px; margin: 6px 0 0; word-break: break-all; }

/* ------------------------------------------------------------------ narrow */
@media (max-width: 860px) {
  .browser.snd-cols { flex: 0 0 30%; }
  .snd-head, .snd-row {
    grid-template-columns: minmax(0, 1fr) 46px 48px;
  }
  .snd-head .c-artist, .snd-head .c-album, .snd-head .c-last,
  .snd-row .c-artist, .snd-row .c-album, .snd-row .c-last { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .snd-knob, .snd-row, .snd-head .h { transition: none !important; }
}