/* Search and Library: the search capsule and its browse tiles, the Library's collections,
   Practising and its shelves, song rows with their sleeves, setlists, the Songs, My Songs,
   Artists, Genres and catalogue pages, a song's page (levels, charts, gig), and the sheets
   (Song Editor, the song picker, Save as song, the gig). Sizes are the Mac's points
   (spec/library.md); macOS text styles: headline 13 bold, subheadline 11, footnote 10. */

:root {
  --lib-p6: rgba(0, 0, 0, 0.06);
  --lib-p7: rgba(0, 0, 0, 0.07);
  --lib-p15: rgba(0, 0, 0, 0.15);
  --lib-p25: rgba(0, 0, 0, 0.25);
  --lib-p35: rgba(0, 0, 0, 0.35);
  --lib-field: rgba(255, 255, 255, 0.62);
  --lib-field-edge: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --lib-field-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --lib-drag: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lib-p6: rgba(255, 255, 255, 0.06);
    --lib-p7: rgba(255, 255, 255, 0.07);
    --lib-p15: rgba(255, 255, 255, 0.15);
    --lib-p25: rgba(255, 255, 255, 0.25);
    --lib-p35: rgba(255, 255, 255, 0.35);
    --lib-field: rgba(44, 44, 46, 0.6);
    --lib-field-edge: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
    --lib-field-shadow: none;
    --lib-drag: #2C2C2E;
  }
}
:root[data-theme="dark"], :root.stage {
  --lib-p6: rgba(255, 255, 255, 0.06);
  --lib-p7: rgba(255, 255, 255, 0.07);
  --lib-p15: rgba(255, 255, 255, 0.15);
  --lib-p25: rgba(255, 255, 255, 0.25);
  --lib-p35: rgba(255, 255, 255, 0.35);
  --lib-field: rgba(44, 44, 46, 0.6);
  --lib-field-edge: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
  --lib-field-shadow: none;
  --lib-drag: #2C2C2E;
}

/* ---------------------------------------------------------------- page, bar, corner */

.lib-page { position: relative; padding-bottom: 24px; }
.lib-reading { width: 100%; max-width: var(--col); margin: 0 auto; }
.lib-error { padding: 24px 16px; color: var(--label-2); }

/* A page that opens on its artwork has its name under the artwork, not in the bar. */
.titlebar.lib-title-hidden .page-title { display: none; }

.lib-corner { display: flex; align-items: center; gap: 8px; }
.lib-corner-btn {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--glass); border: 0.5px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  color: var(--label);
  transition: background 0.12s;
}
.lib-corner-btn:hover { background: var(--pressed); }
.lib-corner-btn[aria-expanded="true"] { background: var(--pressed); }
.lib-corner-btn .icon { width: 15px; height: 15px; stroke-width: 2.1; }

/* The song's identity in the bar of its page: the level ring, title and artist. */
.lib-bar-identity {
  display: flex; align-items: center; gap: 10px;
  flex: 0 1 auto; min-width: 140px; width: max(140px, calc(100% - 136px)); max-width: 100%;
  margin-inline-start: 6px;
}
.lib-bar-text { min-width: 0; display: flex; flex-direction: column; }
.lib-bar-title { font-size: calc(13px * var(--text-scale)); font-weight: 700; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-bar-artist { font-size: calc(11px * var(--text-scale)); color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Links in this area take their colour from their content, not the accent. */
.lib-song-main, .lib-tile, .lib-collection, .lib-search-row, .lib-artist-row, .lib-setlist-row,
.lib-practising-card, .lib-artist-tile, .lib-shelf-heading, .lib-card-button, .lib-browse-tile { color: inherit; }
.lib-song-main:focus-visible, .lib-collection:focus-visible, .lib-search-row:focus-visible,
.lib-artist-row:focus-visible, .lib-setlist-row:focus-visible { outline-offset: -2px; }

/* ---------------------------------------------------------------- search capsule */

.lib-search-top { padding: 4px 16px 0; }
.lib-search {
  display: flex; align-items: center; gap: 8px;
  height: 44px; padding-inline: 14px 8px;
  border-radius: 999px;
  background: var(--lib-field);
  box-shadow: var(--lib-field-shadow), var(--lib-field-edge);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  cursor: text;
}
.lib-search-glyph { width: 17px; height: 17px; color: var(--label-2); stroke-width: 2.1; }
.lib-search-input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; padding: 0; margin: 0; background: none;
  font-size: calc(17px * var(--text-scale)); color: var(--label);
  -webkit-appearance: none; appearance: none;
}
.lib-search-input::placeholder { color: var(--label-3); }
.lib-search-input:focus-visible { outline: none; }
.lib-search-clear { flex: none; width: 30px; height: 30px; display: grid; place-items: center; color: var(--label-2); }
.lib-search-clear .icon { width: 17px; height: 17px; }

/* ---------------------------------------------------------------- browse tiles (Search) */

.lib-browse { padding-bottom: 24px; }
.lib-browse-heading { margin: 0; padding: 16px 16px 12px; font-size: 22px; font-weight: 700; }
.lib-browse-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  column-gap: 16px; row-gap: 12px; padding: 0 16px;
}
.lib-browse-grid.compact { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); column-gap: 12px; }
.lib-browse-tile {
  position: relative; display: block; overflow: hidden;
  height: 132px; border-radius: 12px;
  transition: transform 0.15s var(--snappy), opacity 0.15s var(--snappy);
}
.lib-browse-symbol {
  position: absolute; top: 14px; inset-inline-end: 14px;
  width: 50px; height: 50px;
  color: rgba(255, 255, 255, 0.3); stroke-width: 1.1;
  transform: rotate(14deg);
}
.lib-browse-title {
  position: absolute; inset-inline: 12px; bottom: 12px;
  color: #fff; font-size: 18px; font-weight: 700; line-height: 1.15; text-align: start;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lib-browse-grid.small .lib-browse-tile { height: 104px; }
.lib-browse-grid.small .lib-browse-symbol { width: 40px; height: 40px; stroke-width: 1.25; }
.lib-browse-grid.small .lib-browse-title { font-size: calc(16px * var(--text-scale)); }
.lib-browse-tile:active, .lib-tile:active, .lib-artist-tile:active, .lib-practising-card:active { transform: scale(0.97); opacity: 0.85; }

/* ---------------------------------------------------------------- section titles, empty views */

.lib-section-title { margin: 0; padding: 20px 16px 4px; font-size: 20px; font-weight: 700; }
.lib-results { padding-bottom: 24px; }

.lib-unavailable {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 60px 24px 24px; text-align: center;
}
.lib-unavailable-glyph { width: 44px; height: 44px; color: var(--label-2); stroke-width: 1.5; margin-bottom: 8px; }
.lib-unavailable-title { font-size: calc(17px * var(--text-scale)); font-weight: 700; color: var(--label); }
.lib-unavailable-text { max-width: 360px; font-size: calc(13px * var(--text-scale)); color: var(--label-2); }
.lib-unavailable .lib-text-btn { margin-top: 8px; font-size: calc(13px * var(--text-scale)); }

.lib-text-btn { font-size: calc(11px * var(--text-scale)); font-weight: 600; color: var(--accent-text); padding: 2px 4px; border-radius: 6px; }
.lib-text-btn:hover { background: var(--hover); }

/* ---------------------------------------------------------------- rows */

.lib-list { display: flex; flex-direction: column; }

.lib-chev { flex: none; width: 13px; height: 13px; color: var(--label-3); stroke-width: 2.8; }
[dir="rtl"] .lib-chev, [dir="rtl"] .lib-shelf-chev, [dir="rtl"] .lib-page-btn .icon, [dir="rtl"] .lib-card-chev { transform: scaleX(-1); }

.lib-song-row { position: relative; display: flex; align-items: center; min-height: 58px; }
.lib-scroll-row { padding-block: 5px; padding-inline: 16px 22px; }
.lib-scroll-row::after {
  content: ""; position: absolute; bottom: 0; inset-inline-start: 76px; inset-inline-end: 0;
  border-bottom: 0.5px solid var(--hairline); pointer-events: none;
}
.lib-reading-row { padding: 4px 12px; }
.lib-reading-row::after {
  content: ""; position: absolute; bottom: 0; inset-inline-start: 72px; inset-inline-end: 12px;
  border-bottom: 0.5px solid var(--hairline); pointer-events: none;
}
.lib-song-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px;
  text-align: start; padding: 0;
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.lib-song-main:active { opacity: 0.7; }
.lib-cover { position: relative; flex: none; width: 48px; height: 48px; }
.lib-song-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lib-song-title { font-size: calc(16px * var(--text-scale)); color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-song-row.current .lib-song-title { color: var(--accent); }
.lib-sub {
  display: flex; min-width: 0; overflow: hidden; white-space: nowrap;
  font-size: calc(14px * var(--text-scale)); color: var(--label-2); font-variant-numeric: tabular-nums;
}
.lib-sub.plain { display: block; text-overflow: ellipsis; }
.lib-sub-lead { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lib-sub-rest { flex: none; white-space: pre; }
.lib-star, .lib-more { flex: none; width: 36px; height: 44px; display: grid; place-items: center; }
.lib-star .icon { width: 16px; height: 16px; color: var(--label-3); stroke-width: 1.6; }
.lib-star[data-on="true"] .icon { color: var(--accent); }
.lib-star.bounce .icon { animation: lib-bounce 0.3s var(--snappy); }
.lib-more .icon { width: 16px; height: 16px; color: var(--label); }
.lib-more[aria-expanded="true"] .icon { opacity: 0.6; }
@keyframes lib-bounce { 0% { transform: scale(1); } 45% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* What is loaded: a dark veil over its sleeve and a waveform that moves while the click plays. */
.lib-now { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.4); overflow: hidden; }
.lib-wave { display: flex; align-items: center; gap: 2px; }
.lib-wave i { display: block; width: 2.4px; border-radius: 2px; background: #fff; }
.lib-is-playing .lib-wave i { animation: lib-wave 0.8s ease-in-out infinite; }
@keyframes lib-wave { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Search's setlist and artist rows; the Artists page's rows. */
.lib-search-row {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 58px; padding-block: 5px; padding-inline: 16px 28px;
}
.lib-search-row::after, .lib-artist-row::after, .lib-collection::after, .lib-setlist-row::after {
  content: ""; position: absolute; bottom: 0; inset-inline-end: 0;
  border-bottom: 0.5px solid var(--hairline); pointer-events: none;
}
.lib-search-row::after { inset-inline-start: 76px; }
.lib-search-row:active, .lib-artist-row:active, .lib-collection:active, .lib-setlist-row:active { background: var(--pressed); }
.lib-search-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lib-search-row-name { font-size: calc(16px * var(--text-scale)); color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-search-row-sub { font-size: calc(14px * var(--text-scale)); color: var(--label-2); }

.lib-artists { padding-bottom: 24px; }
.lib-artist-row {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding-block: 6px; padding-inline: 16px 28px;
}
.lib-artist-row::after { inset-inline-start: 72px; }
.lib-artist-name { flex: 1; min-width: 0; font-size: calc(17px * var(--text-scale)); color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lib-avatar {
  flex: none; display: grid; place-items: center; border-radius: 50%;
  color: rgba(255, 255, 255, 0.85); font-family: var(--font-serif); font-weight: 400; line-height: 1;
  user-select: none; -webkit-user-select: none;
}
.lib-avatar.hero { box-shadow: 0 6px 32px rgba(0, 0, 0, 0.2); }

/* The letters down the right-hand edge of Songs and Artists. */
.lib-index {
  position: fixed; z-index: 6; top: 50%; inset-inline-end: 2px; transform: translateY(-50%);
  display: flex; flex-direction: column; padding: 6px 0;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: default;
}
.lib-index span { width: 20px; height: 17px; display: grid; place-items: center; font-size: calc(11px * var(--text-scale)); font-weight: 600; color: var(--accent); }

/* Dragging a row into a new order. */
.lib-reordering > [data-reorder] { will-change: transform; }
.lib-dragging {
  position: relative; z-index: 3;
  background: var(--lib-drag); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
  transition: none !important;
}
.lib-reordering .lib-dragging::after { display: none; }

/* ---------------------------------------------------------------- Library home */

.lib-collections { display: flex; flex-direction: column; }
.lib-collection {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 50px; padding: 0 16px;
}
.lib-collection::after { inset-inline-start: 60px; }
.lib-collection-icon { flex: none; width: 30px; display: grid; place-items: center; color: var(--accent); }
.lib-collection-icon .icon { width: 21px; height: 21px; stroke-width: 1.5; }
.lib-collection-icon .icon.filled { stroke: none; }
.lib-collection-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 20px; color: var(--label); }
.lib-collection.roomy .lib-collection-name { flex: 0 1 auto; }

/* Practising: the songs being practised, as rings. */
.lib-practising { display: flex; flex-direction: column; gap: 12px; padding-top: 26px; }
.lib-practising-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 16px; }
.lib-practising-head h2 { margin: 0; font-size: calc(17px * var(--text-scale)); font-weight: 700; }
.lib-see-all { font-size: calc(13px * var(--text-scale)); font-weight: 500; color: var(--accent); }
.lib-practising-empty {
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 32px); margin: 0 16px; padding: 14px;
  border-radius: var(--radius-card); background: var(--row); text-align: start;
}
.lib-plus-well { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.lib-plus-well .icon { width: 17px; height: 17px; stroke-width: 2.4; }
.lib-practising-empty-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lib-headline { font-size: calc(13px * var(--text-scale)); font-weight: 700; color: var(--label); }
.lib-subheadline { font-size: calc(11px * var(--text-scale)); color: var(--label-2); }
.lib-practising-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 4px 16px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
}
.lib-practising-row::-webkit-scrollbar { display: none; }
.lib-practising-card {
  flex: none; width: 118px; display: flex; flex-direction: column; gap: 6px;
  scroll-snap-align: start; transition: transform 0.15s var(--snappy), opacity 0.15s;
}
.lib-practising-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lib-practising-title { font-size: calc(11px * var(--text-scale)); font-weight: 600; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-practising-level { display: flex; align-items: center; gap: 5px; font-size: calc(10px * var(--text-scale)); color: var(--label-2); }
.lib-practising-goal { font-size: calc(10px * var(--text-scale)); font-weight: 600; color: var(--accent);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Shelves: a row of tiles to scroll sideways, with its heading and paging buttons. */
.lib-shelf { padding-top: 16px; }
.lib-shelf.last { padding-bottom: 24px; }
.lib-shelf-head { display: flex; align-items: center; gap: 12px; min-height: 28px; padding: 0 16px; }
.lib-shelf-heading { margin: 0; min-width: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 22px; font-weight: 700; color: var(--label); }
.lib-shelf-heading span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-shelf-chev { flex: none; width: 15px; height: 15px; color: var(--label-2); stroke-width: 3; }
.lib-shelf-buttons { display: flex; gap: 8px; margin-inline-start: auto; }
.lib-page-btn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--lib-p6); color: var(--label); }
.lib-page-btn .icon { width: 13px; height: 13px; stroke-width: 2.6; }
.lib-page-btn:disabled { color: var(--lib-p25); cursor: default; }
.lib-shelf-row {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 14px 16px; overflow-x: auto; scrollbar-width: none;
}
.lib-shelf-row::-webkit-scrollbar { display: none; }
.lib-shelf-row > .lib-tile { flex: none; width: 170px; }
.lib-artist-tile { flex: none; width: 150px; display: flex; flex-direction: column; gap: 8px; transition: transform 0.15s var(--snappy), opacity 0.15s; }
.lib-artist-tile-name { font-size: calc(14px * var(--text-scale)); font-weight: 500; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A tile: art over a title and a subtitle. */
.lib-tile { display: flex; flex-direction: column; min-width: 0; transition: transform 0.15s var(--snappy), opacity 0.15s; -webkit-user-drag: none; }
.lib-tile-art { margin-bottom: 7px; }
.lib-tile-title { font-size: calc(14px * var(--text-scale)); font-weight: 500; color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-tile-sub { font-size: calc(14px * var(--text-scale)); color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-fill { width: 100%; aspect-ratio: 1; }

.lib-grid-heading { margin: 0; padding: 30px 16px 12px; font-size: 22px; font-weight: 700; }
.lib-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  column-gap: 16px; row-gap: 22px; align-items: start;
  padding: 0 16px 24px;
}
.lib-grid.genres { padding-top: 8px; }

/* ---------------------------------------------------------------- Load in Metronome and Shuffle */

.lib-play-row { padding: 6px 16px 8px; }
.lib-play-row.my-songs { padding: 6px 16px 10px; }
.lib-play-shuffle { display: flex; gap: 14px; width: 100%; max-width: 480px; margin: 0 auto; }
.lib-capsule {
  flex: 1; min-width: 0; min-height: 50px; padding: 0 12px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; background: var(--lib-p7); color: var(--accent);
  font-size: calc(17px * var(--text-scale)); font-weight: 600; white-space: nowrap; overflow: hidden;
  transition: background 0.12s;
}
.lib-capsule span { overflow: hidden; text-overflow: ellipsis; }
.lib-capsule .icon { width: 19px; height: 19px; stroke-width: 1.9; }
.lib-capsule:active:not(:disabled), .lib-round:active:not(:disabled) { background: var(--lib-p15); }
.lib-capsule:disabled, .lib-round:disabled { color: color-mix(in srgb, var(--accent) 40%, transparent); cursor: default; }
.lib-capsule.narrow { width: 100%; max-width: 240px; margin: 18px auto 0; flex: none; }
.lib-round {
  flex: none; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center; background: var(--lib-p7); color: var(--accent);
}
.lib-round .icon { width: 18px; height: 18px; stroke-width: 2.2; }

/* ---------------------------------------------------------------- Setlists */

.lib-setlists-search { padding: 4px 16px 8px; animation: lib-drop 0.3s var(--snappy); }
.lib-setlists-search.hiding { animation: lib-lift 0.3s var(--snappy) forwards; }
@keyframes lib-drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes lib-lift { to { opacity: 0; transform: translateY(-16px); } }
.lib-setlist-row {
  position: relative; display: flex; align-items: center; gap: 14px;
  min-height: 68px; padding-block: 6px; padding-inline: 16px 22px;
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.lib-setlist-row::after { inset-inline-start: 86px; }
.lib-setlist-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lib-setlist-name { font-size: calc(17px * var(--text-scale)); color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-setlist-sub { font-size: calc(15px * var(--text-scale)); color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-setlist-sub.accent { color: var(--accent); }
.lib-setlists-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; text-align: center; }
.lib-setlists-empty p { margin: 0; font-size: calc(11px * var(--text-scale)); color: var(--label-2); }

/* A setlist's page and the catalogue pages: artwork, name, the way in, rows. */
.lib-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 16px 18px; }
.lib-catalogue-page .lib-hero { padding-bottom: 16px; }
.lib-hero-art { margin-bottom: 18px; display: grid; place-items: center; }
.lib-hero-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--label); overflow-wrap: anywhere; }
.lib-hero-sub { margin-top: 2px; font-size: calc(17px * var(--text-scale)); color: var(--label-2); }
.lib-hero-sub.accent { color: var(--accent); }
.lib-hero .lib-play-shuffle { margin-top: 18px; }
.lib-catalogue-page { padding-bottom: 24px; }
.lib-setlist-foot { padding: 12px 16px; text-align: center; font-size: calc(14px * var(--text-scale)); color: var(--label-2); }
.lib-setlist-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 16px; text-align: center; }
.lib-setlist-empty-title { font-size: calc(17px * var(--text-scale)); font-weight: 600; color: var(--label); }
.lib-setlist-empty p { margin: 0; max-width: 440px; font-size: calc(15px * var(--text-scale)); color: var(--label-2); }
.lib-setlist-empty-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lib-add-songs { width: 100%; max-width: 280px; margin-top: 4px; }
.lib-tinted {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 4px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent-text);
  font-size: calc(11px * var(--text-scale)); font-weight: 600;
}
.lib-tinted .icon { width: 13px; height: 13px; stroke-width: 2; }
.lib-tinted:active { background: color-mix(in srgb, var(--accent) 25%, transparent); }

/* The prominent amber capsule (borderedProminent). */
.lib-prominent {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 6px 16px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-size: calc(13px * var(--text-scale)); font-weight: 700;
  transition: filter 0.12s, transform 0.12s;
}
.lib-prominent .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.lib-prominent:hover { filter: brightness(1.04); }
.lib-prominent:active { transform: scale(0.98); }

/* ---------------------------------------------------------------- Songs: filters and footnote */

.lib-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 4px; }
.lib-filter-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-size: calc(13px * var(--text-scale)); font-weight: 600;
}
.lib-filter-chip .icon { width: 9px; height: 9px; stroke-width: 3.2; }
.lib-disclaimer { margin: 0; padding-block: 20px 30px; padding-inline: 16px 36px; font-size: calc(10px * var(--text-scale)); color: var(--label-2); }

/* ---------------------------------------------------------------- a song's page */

.lib-song-col { width: 100%; max-width: var(--col); margin: 0 auto; padding: 4px 16px 24px; display: flex; flex-direction: column; gap: 14px; }
.lib-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; padding: 0 4px; }
.lib-status-level { display: flex; align-items: center; gap: 8px; font-size: calc(11px * var(--text-scale)); font-weight: 600; color: var(--label-2); }
.lib-practising-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
  font-size: calc(11px * var(--text-scale)); font-weight: 600;
  animation: lib-pop 0.3s var(--snappy);
}
.lib-practising-pill .icon { width: 11px; height: 11px; }
@keyframes lib-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }

.lib-card { background: var(--row); border-radius: var(--radius-card); padding: 14px; }
.lib-practise { display: flex; flex-direction: column; gap: 12px; }
.lib-divider { height: 0.5px; background: var(--hairline); }
.lib-practise-row { display: flex; gap: 10px; }
.lib-practise-row .lib-prominent { flex: 1; }
.lib-card-button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; text-align: start; transition: background 0.12s; }
.lib-card-button:active { background: color-mix(in srgb, var(--row) 90%, var(--label)); }
.lib-well { flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.lib-well .icon { width: 18px; height: 18px; stroke-width: 2; }
.lib-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lib-card-title { font-size: calc(13px * var(--text-scale)); font-weight: 700; color: var(--label); }
.lib-card-detail { font-size: calc(10px * var(--text-scale)); color: var(--label-2); }
.lib-card-count { font-size: calc(11px * var(--text-scale)); font-weight: 600; color: var(--label-2); font-variant-numeric: tabular-nums; }
.lib-card-chev { flex: none; width: 10px; height: 10px; color: var(--label-3); stroke-width: 3.2; }
.lib-song-foot { margin: 0; padding: 0 4px; font-size: calc(10px * var(--text-scale)); color: var(--label-2); }

/* Level pieces: the ring around a sleeve, and the five pips. */
.lib-ring { position: relative; flex: none; }
.lib-ring-svg { position: absolute; inset: 0; }
.lib-ring-track { stroke: color-mix(in srgb, var(--accent) 18%, transparent); }
.lib-ring-fill { stroke: var(--accent); transition: stroke-dasharray 0.3s var(--snappy); }
.lib-ring-cover { position: absolute; inset: 0; display: grid; place-items: center; }
.lib-pips { display: inline-flex; align-items: center; flex: none; }
.lib-pips span { display: block; border-radius: 50%; background: var(--lib-p15); }
.lib-pips span.on { background: var(--accent); }

/* Charts. */
.lib-charts { display: flex; flex-direction: column; gap: 10px; }
.lib-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lib-chart-title { font-size: calc(13px * var(--text-scale)); font-weight: 700; }
.lib-chart-range { font-size: calc(11px * var(--text-scale)); font-weight: 600; color: var(--label-2); font-variant-numeric: tabular-nums; }
.lib-seg-fill .segmented { width: 100%; }
.lib-chart-body { display: flex; flex-direction: column; gap: 10px; min-height: 236px; }
.lib-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lib-stat:nth-child(2) { text-align: center; }
.lib-stat:nth-child(3) { text-align: end; }
.lib-stat-value { font-family: var(--font-rounded); font-size: calc(15px * var(--text-scale)); font-weight: 700; font-variant-numeric: tabular-nums; }
.lib-stat-label { font-size: calc(10px * var(--text-scale)); color: var(--label-2); }
.lib-chart { position: relative; width: 100%; }
.lib-chart-svg { display: block; overflow: visible; }
.lib-chart-empty { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.lib-chart-empty span { padding: 6px 12px; border-radius: 999px; background: var(--row); font-size: calc(11px * var(--text-scale)); color: var(--label-2); box-shadow: 0 0 0 0.5px var(--hairline); }
.lib-axis-text { font-size: 10px; fill: var(--label-2); font-family: var(--font); font-variant-numeric: tabular-nums; }
.lib-chart-grid { stroke: var(--hairline); stroke-width: 0.5; }
.lib-tempo-area { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.lib-tempo-line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.lib-tempo-dot { fill: var(--accent); }
.lib-rule-strong { stroke: color-mix(in srgb, var(--accent) 70%, transparent); stroke-width: 1.2; stroke-dasharray: 4 4; }
.lib-rule-quiet { stroke: var(--lib-p35); stroke-width: 1; stroke-dasharray: 2 3; }
.lib-rule-label { font-size: 10px; fill: var(--label-2); font-family: var(--font); }
.lib-rule-label.strong { fill: var(--accent-text); }

/* The level road, Mastered at the top. */
.lib-road { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.lib-road-track { position: absolute; top: 30px; bottom: 30px; inset-inline-start: 29px; width: 2px; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.lib-stop { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.lib-stop-marker { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.lib-stop.done .lib-stop-marker { background: var(--accent); color: var(--on-accent); }
.lib-stop.done .lib-stop-marker .icon { width: 12px; height: 12px; stroke-width: 3.4; }
.lib-stop.now .lib-stop-marker { background: var(--row); box-shadow: inset 0 0 0 3px var(--accent); }
.lib-stop.next .lib-stop-marker { background: color-mix(in srgb, var(--accent) 18%, var(--row)); color: var(--accent); }
.lib-stop.next .lib-stop-marker .icon { width: 11px; height: 11px; }
.lib-stop.later .lib-stop-marker { background: color-mix(in srgb, var(--label) 8%, var(--row)); color: var(--label-2); }
.lib-stop.later .lib-stop-marker .icon { width: 10px; height: 10px; }
.lib-stop-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.lib-stop-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lib-stop-name { font-size: calc(13px * var(--text-scale)); font-weight: 600; color: var(--label); }
.lib-stop.now .lib-stop-name, .lib-stop.next .lib-stop-name { font-weight: 700; }
.lib-stop.next .lib-stop-name { color: var(--accent); }
.lib-stop.later .lib-stop-name { color: var(--label-2); }
.lib-stop-caption { font-size: calc(10px * var(--text-scale)); color: var(--label-2); text-align: end; }
.lib-progress { height: 4px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.lib-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.lib-next-box { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 12px; background: var(--page); }
.lib-next-title { font-size: calc(11px * var(--text-scale)); font-weight: 600; }
.lib-next-detail { font-size: calc(10px * var(--text-scale)); color: var(--label-2); }

/* The gig ahead. */
.lib-gig { background: var(--row); border-radius: var(--radius-card); overflow: hidden; }
.lib-gig-band {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px; background: var(--accent); color: var(--on-accent); text-align: start;
}
.lib-gig-band:active { filter: brightness(0.96); }
.lib-gig-when { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lib-gig-label { font-size: calc(10px * var(--text-scale)); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.lib-gig-date { font-size: calc(13px * var(--text-scale)); font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-gig-today { font-size: calc(17px * var(--text-scale)); font-weight: 800; }
.lib-gig-tomorrow { font-size: calc(15px * var(--text-scale)); font-weight: 800; }
.lib-gig-days { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.lib-gig-number { margin-bottom: -2px; font-family: var(--font-rounded); font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lib-gig-unit { font-size: calc(10px * var(--text-scale)); font-weight: 700; }
.lib-gig-body { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.lib-gig-ready { display: flex; align-items: center; gap: 16px; }
.lib-readiness { position: relative; flex: none; width: 84px; height: 84px; }
.lib-readiness-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lib-readiness-pct { font-family: var(--font-rounded); font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.lib-readiness-label { font-size: calc(10px * var(--text-scale)); font-weight: 500; color: var(--label-2); }
.lib-factors { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.lib-factor-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.lib-factor-name { font-size: calc(11px * var(--text-scale)); font-weight: 600; }
.lib-factor-value { font-size: calc(10px * var(--text-scale)); color: var(--label-2); font-variant-numeric: tabular-nums; }
.lib-plan { display: flex; flex-direction: column; gap: 2px; }
.lib-plan-title { font-size: calc(13px * var(--text-scale)); font-weight: 700; }
.lib-plan-detail { font-size: calc(10px * var(--text-scale)); color: var(--label-2); }

/* ---------------------------------------------------------------- sheets */

.lib-sheet-text { font-size: calc(13px * var(--text-scale)); color: var(--accent-text); }
.lib-sheet-text.bold { font-weight: 700; }
.lib-sheet-text:disabled { color: var(--label-3); opacity: 1; }
.lib-save-sheet .sheet-body, .lib-gig-sheet .sheet-body { background: var(--page); }
.lib-form-sheet { display: flex; flex-direction: column; }
.lib-form-gap { margin-top: 18px; }
.lib-form-field { width: 100%; border: 0; background: none; box-shadow: none; padding: 4px 0; font-size: calc(13px * var(--text-scale)); }
.lib-form-field:focus-visible { outline: none; }
.lib-form-select { width: auto; min-width: 150px; max-width: 60%; }
.lib-form-date { width: auto; }
.lib-form-destructive { width: 100%; min-height: 36px; font-size: calc(13px * var(--text-scale)); color: var(--red); text-align: center; }
.lib-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); width: 100%; gap: 4px; padding: 4px 0; }
.lib-weekday-cell { display: grid; place-items: center; }
.lib-weekday { width: 38px; height: 38px; border-radius: 50%; background: var(--lib-p7); color: var(--label); font-size: calc(11px * var(--text-scale)); font-weight: 700; }
.lib-weekday.on { background: var(--accent); color: var(--on-accent); }

/* The saved line, at the top. */
.lib-notice {
  position: fixed; z-index: 95; top: 56px; left: 50%;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: #fff; font-size: calc(11px * var(--text-scale)); font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translate(-50%, -24px); pointer-events: none;
  transition: transform 0.3s var(--snappy), opacity 0.3s var(--snappy);
}
.lib-notice.shown { opacity: 1; transform: translate(-50%, 0); }
.lib-notice .icon { width: 15px; height: 15px; }

/* The Song Editor: the Mac's columns, labels on the left, controls on the right. */
/* The xmark and checkmark sit at the physical right (core's .trail), in RTL too. */
.lib-editor .sheet-head { justify-content: flex-start; padding-left: 20px; padding-right: 96px; }
.lib-editor .sheet-head h2 { font-size: calc(15px * var(--text-scale)); text-align: start; }
.lib-editor .sheet-body { padding: 18px 20px; }
.lib-sheet-trail { display: flex; gap: 8px; }
.lib-sheet-btn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--chip); color: var(--label); }
.lib-sheet-btn:hover { background: var(--pressed); }
.lib-sheet-btn.accent { background: var(--accent); color: var(--on-accent); }
.lib-sheet-btn.accent:hover { filter: brightness(1.04); }
.lib-sheet-btn .icon { width: 14px; height: 14px; stroke-width: 2.4; }
.lib-ed { display: flex; flex-direction: column; gap: 18px; }
.lib-ed-section { display: flex; flex-direction: column; gap: 8px; }
.lib-ed-header { font-size: calc(13px * var(--text-scale)); font-weight: 700; padding-bottom: 2px; border-bottom: 0.5px solid var(--hairline); }
.lib-ed-row { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 12px; min-height: 28px; }
.lib-ed-label { font-size: calc(13px * var(--text-scale)); text-align: end; color: var(--label); }
.lib-ed-control { min-width: 0; display: flex; align-items: center; }
.lib-ed-control > * { flex: 1; min-width: 0; }
.lib-ed-control > .lib-ed-select { flex: 0 1 auto; min-width: 170px; }
.lib-ed-tempo { display: flex; align-items: center; gap: 8px; }
.lib-ed-bpm { font-size: calc(17px * var(--text-scale)); font-weight: 600; font-variant-numeric: tabular-nums; }
.lib-ed-marking { font-size: calc(13px * var(--text-scale)); color: var(--label-2); }
.lib-ed-spacer { flex: 1; }
.lib-ed-checkrow { display: inline-flex; align-items: center; gap: 8px; font-size: calc(13px * var(--text-scale)); cursor: pointer; }
.lib-ed-check { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.lib-ed-footer { font-size: calc(11px * var(--text-scale)); color: var(--label-2); padding-inline-start: 124px; }
.lib-stepper {
  flex: none !important; display: inline-flex; flex-direction: column;
  width: 15px; height: 24px; border-radius: 5px; overflow: hidden;
  background: var(--row); box-shadow: 0 0 0 0.5px var(--hairline), 0 0.5px 1.5px rgba(0, 0, 0, 0.12);
}
.lib-stepper:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lib-stepper-half { flex: 1; display: grid; place-items: center; touch-action: none; }
.lib-stepper-half:active { background: var(--pressed); }
.lib-stepper-up, .lib-stepper-down { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; }
.lib-stepper-up { border-bottom: 4px solid var(--label); }
.lib-stepper-down { border-top: 4px solid var(--label); }

/* The song picker: My songs and the catalogue, each with its plus. */
.lib-picker-sheet .sheet-body { padding: 0; }
.lib-picker { padding-bottom: 12px; }
.lib-picker-search-wrap { position: sticky; top: 0; z-index: 1; padding: 10px 16px; background: var(--sheet); border-bottom: 0.5px solid var(--hairline); }
.lib-picker-search { border-radius: 8px; }
.lib-picker-heading { margin: 0; padding: 14px 16px 4px; font-size: calc(11px * var(--text-scale)); font-weight: 600; color: var(--label-2); }
.lib-picker-list { display: flex; flex-direction: column; padding: 0 8px; }
.lib-picker-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 7px 8px; border-radius: 8px; text-align: start;
  content-visibility: auto; contain-intrinsic-size: auto 44px;
}
.lib-picker-row:hover { background: var(--hover); }
.lib-picker-row:active { background: var(--pressed); }
.lib-picker-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lib-picker-title { font-size: calc(13px * var(--text-scale)); color: var(--label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-picker-detail { font-size: calc(10px * var(--text-scale)); color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.lib-picker-mark { flex: none; color: var(--accent); display: grid; place-items: center; }
.lib-picker-mark .icon { width: 20px; height: 20px; stroke-width: 1.6; }

/* ---------------------------------------------------------------- narrow windows (the phone layout) */

@media (max-width: 639px) {
  .lib-index { top: calc(50% - 40px); }
  .lib-ed-row { grid-template-columns: 1fr; gap: 4px; }
  .lib-ed-label { text-align: start; color: var(--label-2); font-size: calc(11px * var(--text-scale)); }
  .lib-ed-footer { padding-inline-start: 0; }
  .lib-editor .sheet-head { padding-left: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .lib-is-playing .lib-wave i { animation: none; }
}