/* Song-list table styling shared by two places that show the *same*
   content (see buildPlaylistListNodes() in app.js): the hidden
   .playlist-print-area on the main page (printPlaylist(), style.css hides
   everything else when printing), and the standalone tab openPlaylistList()
   opens to just view it first. Kept in its own file, separate from
   style.css's app-shell rules, so linking it into that standalone tab never
   also pulls in style.css's @media print rule -- which hides anything that
   isn't .playlist-print-area, a wrapper that tab doesn't use. */

.pp-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid #000;
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.pp-choir {
  font-size: 0.85rem;
  color: #444;
}

.pp-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
}

.pp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}

.pp-table th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #444;
  border-bottom: 1px solid #000;
  padding: 6px 8px;
}

.pp-table td {
  padding: 8px;
  border-bottom: 1px solid #ccc;
  vertical-align: top;
}

.pp-table td.pp-num {
  width: 2.5em;
  font-variant-numeric: tabular-nums;
  color: #444;
}

.pp-table td.pp-tags {
  color: #444;
  font-size: 0.85rem;
}

.pp-table td.pp-composer {
  color: #444;
}