/* Room libraries share the clubhouse's paper, ink and compact controls. */
.room-playlists { margin-top: 12px; }
.room-library { border: 1px solid var(--rule); border-radius: 3px; padding: 12px; margin-top: 12px; }
.room-library > summary { cursor: pointer; font: 600 17px/1.4 var(--f-cond); }
.room-library > summary span { float: right; margin-left: 8px; font: 12px/2 var(--f-body); color: var(--ink2); }
.room-library > summary:focus-visible, .playlist-holes > summary:focus-visible { outline: 2px solid var(--g500); outline-offset: 3px; }
.playlist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.playlist-card { min-width: 0; overflow: hidden; border: 1px solid var(--rule); border-radius: 3px; background: var(--paper); }
.playlist-card.on { border-color: var(--g500); box-shadow: inset 0 0 0 1px var(--g500); }
.playlist-images { display: flex; gap: 2px; height: 66px; background: var(--paper2); }
.playlist-images img { width: 33.333%; min-width: 0; height: 100%; object-fit: cover; }
.playlist-body { padding: 10px; }
.playlist-body > b { display: block; font: 600 19px/1.2 var(--f-cond); }
.playlist-body p { margin: 5px 0; font-size: 12px; line-height: 1.4; color: var(--ink2); }
.playlist-body > small { font-size: 12px; }
.playlist-body > button { width: 100%; margin-top: 8px; }
.playlist-holes { margin: 8px 0 4px; font-size: 12px; }
.playlist-holes > summary { cursor: pointer; color: var(--g500); font-weight: 600; }
.playlist-holes ol { list-style: none; padding: 0; margin: 8px 0; }
.playlist-holes li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid var(--rule2); }
.playlist-holes li span { overflow-wrap: anywhere; }
.playlist-holes li small { flex-shrink: 0; color: var(--ink2); }
.mini-route-preview { display: grid; gap: 3px; padding: 12px; background: var(--paper2); border-left: 3px solid var(--g500); }
.mini-route-preview > b { font: 600 20px/1.2 var(--f-cond); }
.mini-route-preview > span { font-size: 14px; }
.mini-route-preview > small { font-size: 12px; color: var(--ink2); }
.room-save-form { display: flex; align-items: end; gap: 8px; margin: 12px 0; }
.room-save-form label { flex: 1 1 140px; min-width: 0; font-size: 12px; font-weight: 600; }
.room-save-form input { display: block; width: 100%; min-width: 0; margin-top: 4px; padding: 9px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: 14px var(--f-body); }
.room-save-form button { flex-shrink: 0; min-height: 37px; }
.room-saved-row { display: flex; align-items: center; gap: 7px; padding: 10px 0; border-top: 1px solid var(--rule); }
.room-saved-row > div { flex: 1; min-width: 0; }
.room-saved-row b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.room-saved-row small { display: block; font-size: 12px; color: var(--ink2); }
.room-saved-row > button { flex-shrink: 0; padding-inline: 10px; }
.room-library button:disabled { opacity: .45; cursor: default; }
@media (max-width: 480px) {
  .playlist-grid { grid-template-columns: minmax(0, 1fr); }
  .playlist-images { height: 90px; }
  .room-library { padding: 10px; }
  .room-save-form { flex-wrap: wrap; }
  .room-saved-row { flex-wrap: wrap; }
  .room-saved-row > div { flex-basis: 100%; }
}