[hidden] {
  display: none !important;
}

.app {
  display: grid;
  grid-template-columns: var(--w-sidebar) 1fr;
  min-height: calc(100vh - var(--h-toolbar));
}

.results {
  position: relative;
  min-width: 0;
  padding: 16px 18px 40px;
  background: var(--content);
  overflow-y: auto;
}

.results.over::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 2px dashed var(--accent);
  border-radius: var(--r-card);
  pointer-events: none;
}

.results .drop {
  margin: 40px auto;
  max-width: 520px;
  padding: 34px 24px;
}

.working {
  max-width: 520px;
  margin: 40px auto;
}

.working .bar {
  height: 5px;
  border-radius: 3px;
  background: var(--well);
  overflow: hidden;
}

.working .bar span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 160ms var(--ease);
}

.workline {
  margin: 9px 0 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--label-2);
}

.listhead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.listcount {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06px;
  text-transform: uppercase;
  color: var(--label-2);
}

.listhead .spacer {
  flex: 1;
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card {
  border: 1px solid var(--separator);
  border-radius: var(--r-card);
  background: var(--sunken);
  padding: 12px 14px 13px;
  transition: border-color var(--dur-fast) var(--ease);
}

.card:hover {
  border-color: var(--separator-strong);
}

.card.playing {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.card > header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 9px;
}

.cardtitle {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.08px;
  flex: none;
}

.cardmeta {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06px;
  color: var(--label-3);
}

.cardmeta .seam {
  font-weight: 500;
}

.seam.excellent {
  color: var(--ok);
}

.seam.very-good {
  color: var(--ok);
  opacity: 0.82;
}

.seam.good {
  color: var(--label-2);
}

.seam.fair,
.seam.rough {
  color: var(--danger);
}

.wavewell {
  position: relative;
}

.wave {
  display: block;
  width: 100%;
  height: 56px;
  background: transparent;
}

.playhead {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--label);
  box-shadow: 0 0 0 1px var(--sunken);
  pointer-events: none;
}

.playhead[hidden] {
  display: none;
}

.cardsaved {
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 0.12px;
  color: var(--ok);
  font-weight: 500;
}

.transport {
  position: sticky;
  bottom: 12px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 9px 12px;
  border: 1px solid var(--separator);
  border-radius: var(--r-card);
  background: var(--chrome);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: var(--shadow-card);
}

.tname {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  flex: none;
}

.tbar {
  position: relative;
  flex: 1;
  min-width: 60px;
  height: 4px;
  border-radius: 2px;
  background: var(--well);
  overflow: hidden;
}

.tbar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--accent);
}

.ttime {
  font-size: 11px;
  letter-spacing: 0.06px;
  color: var(--label-2);
  white-space: nowrap;
  flex: none;
  font-variant-numeric: tabular-nums;
}

.transport .btn {
  flex: none;
  height: 24px;
  padding: 0 12px;
}

.tvol {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  color: var(--label-3);
}

.tvol svg {
  width: 14px;
  height: 14px;
  flex: none;
}

.tvol input[type='range'] {
  width: 78px;
}

.results.hastransport {
  padding-bottom: 88px;
}

.cardactions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
}

.cardactions .btn {
  height: var(--h-control-lg);
}

.cardsize {
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 0.12px;
  color: var(--label-3);
}

.cardactions .cardsize:first-of-type {
  margin-left: auto;
}

.kv {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kv div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06px;
}

.kv b {
  font-weight: 400;
  color: var(--label-3);
  flex: none;
}

.kv span {
  color: var(--label);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.footnote {
  padding: 14px 2px 0;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.12px;
  color: var(--label-3);
}

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
  }

  .inspector {
    border-right: none;
    border-bottom: 1px solid var(--separator);
  }
}

.tbuttons {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.tbtn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--label-2);
  cursor: default;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.tbtn:hover {
  background: var(--label-4);
  color: var(--label);
}

.tbtn svg {
  width: 13px;
  height: 13px;
}

.tbtn.big {
  width: 30px;
  height: 30px;
  background: var(--accent);
  color: var(--accent-ink);
}

.tbtn.big:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
}

.tbtn.big svg {
  width: 15px;
  height: 15px;
}

.tbar {
  cursor: pointer;
  padding: 6px 0;
  background: transparent;
  height: auto;
  overflow: visible;
}

.tbar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: var(--well);
}

.tbar span {
  top: 50%;
  bottom: auto;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
}

.tbar i {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--knob);
  box-shadow: var(--shadow-knob);
  pointer-events: none;
}

.bars {
  color: var(--accent);
  font-weight: 500;
}