/* Shared density settings. Keep these last so every view uses the same scale. */
:root {
  --slop-gutter: 24px;
  --ui-text: 14px;
  --ui-title: 30px;
  --ui-heading: 18px;
  --ui-control: 36px;
}
body {font-size:var(--ui-text);line-height:1.45}
button,input,select,textarea {font-size:var(--ui-text)}
button {min-height:var(--ui-control);padding:6px 10px}
input,select {padding:8px 10px}
p {margin:8px 0}
main {padding:20px var(--slop-gutter) calc(var(--slop-player) + 24px)}
h1,.handbook h1,#genres h1 {font-size:var(--ui-title);line-height:1.2;letter-spacing:-.5px}
h2,.sectionHeading h2,.heading h2,.handbook h2 {font-size:var(--ui-heading);line-height:1.35}

/* Keep search, status and filters together instead of stacking empty bands. */
.search,#genres .contextualSearch {height:40px;padding:0 10px;gap:10px}
.search input {height:34px;min-height:30px;font-size:14px}
.search .searchScope,.search .localScope {font-size:13px}
.search button img {width:20px;height:20px}
.contextualSearch {margin-bottom:14px}
#discover>.personalPanel {margin-top:4px}
#discover>.personalPanel summary {font-size:12px}
#discover>.personalPanel[open] {padding:12px}
#searchResults {margin-top:14px;padding-top:0}
.heading {gap:12px;margin-bottom:8px;flex-wrap:wrap}
#resultCount {font-size:10px;letter-spacing:.04em}
#status {min-height:0;margin:0 0 8px;font-size:13px}
#status:empty {display:none}
#relatedNote {margin:6px 0}
#resetShelf {min-height:32px;margin:0 0 8px;padding:4px 8px;font-size:13px}
.activeFilters {display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.activeFilters h3 {font-size:12px;font-weight:400;margin:0 4px 0 0;color:var(--muted)}
.activeFilters button {min-height:30px;margin:0;padding:4px 8px;font-size:12px;gap:6px}
.activeFilters img {width:14px;height:14px}
#results:not(:empty) {padding:12px}
.grid {grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px 12px}
.card h3 {font-size:14px;line-height:1.35;margin:8px 0 3px}
.card p,.cardTags {font-size:12px;line-height:1.4}
.card .meta {font-size:10px;margin-top:6px}
.cardTags {margin:5px 0;min-height:0}
.relatedButton {min-height:30px;padding:4px 8px;font-size:12px}

/* Discovery and the saved library use compact cards and rows. */
.discoverIntro {padding:12px 0 0}
.discoverIntro h1 {margin:0}
.discoverSection {padding-top:18px}
.sectionHeading {margin-bottom:0;gap:10px}
.sectionHeading>button {font-size:13px;min-height:30px}
.trails {gap:6px;margin-top:8px}
.trails button {min-height:32px;font-size:13px;padding:5px 8px}
.pathGrid,.clapGrid {gap:12px;margin-top:10px}
.pathCard {min-height:0;padding:12px;gap:8px}
.pathCard:has(.collectionArt) {grid-template-columns:80px minmax(0,1fr);gap:4px 12px}
.pathCard h3 {font-size:18px;line-height:1.3}
.pathCard>p:not(.pathMeta),.pathIdentity p {font-size:13px}
.pathCard button,.clapCopy .relatedButton {min-height:30px;padding:4px 8px;font-size:12px}
.pathIdentity {grid-template-columns:80px minmax(0,1fr);gap:12px}
.clapCard {display:grid;grid-template-columns:80px minmax(0,1fr);gap:10px;align-items:start}
.clapCover {width:80px}
.clapCopy {padding:0}
.clapCopy h3 {font-size:16px;line-height:1.3}
.clapCopy>p:not(.cardKicker) {font-size:13px;margin:4px 0 8px}
.clapSection {padding-bottom:16px}
.discoverFooter {padding-top:12px}
.libraryTools {margin:12px 0 8px;gap:6px}
.personalPanel,.playlistEditor {margin:12px 0;padding:10px 12px}
.personalPanel summary {font-size:14px}
.personalPanel form {margin:10px 0}
.personalPanel label {margin:6px 0}
.libraryHint {margin:8px 0 14px}
.libraryOrder {margin-bottom:12px;gap:8px;font-size:13px}
.libraryOrder select {min-height:34px;padding:5px 8px;font-size:13px}
.likedAlbum {margin-bottom:12px}
.likedAlbumHeader {padding:12px;gap:12px}
.likedAlbumHeader>img {width:60px;height:60px}
.likedAlbumHeader h2 {font-size:17px}
.likedAlbumHeader p {font-size:13px;margin:4px 0}
.likedTrack {padding:8px 12px;gap:8px}
.likedTrack .trackCopy {font-size:13px}
.track {padding:8px 0;gap:8px}
.track span,.track small {font-size:13px}
.queueHeader {margin-bottom:12px;gap:10px}
#queueList>h2 {margin:16px 0 8px}
.queueOptionsTrigger {min-height:34px;font-size:13px}
.notice {padding:14px}

/* Genre controls remain pinned, with more room for the scrollable directory. */
.genreView main {padding:20px var(--slop-gutter)}
.genreView #genres {gap:8px}
#genres h1 {margin-bottom:8px}
#genres .contextualSearch {margin-bottom:8px}
#genres .atlasToolbar {gap:6px;margin-bottom:6px}
#genres .atlasToolbar button,#genres .atlasToolbar select {min-height:34px;padding:5px 12px;font-size:13px}
#genres #genreOptions.genreAtlas {gap:18px 16px}
#genres .atlasFamily h2,#genres .atlasFamily h2>button:first-child {font-size:17px}
#genres .atlasRow {gap:4px;padding:0 4px}
#genres .atlasRow .genreName {font-size:13px}
#genres .genreAdd>span {width:26px;height:26px;font-size:18px}
#genres .atlasSelection {padding:6px;gap:4px 8px}
#genres #searchGenres {min-width:140px;font-size:13px}
#genres #closeGenreFocus {margin-bottom:8px;min-height:36px;font-size:13px}
#genres .genreDetail {padding:14px}
#genres .genreDetail h2 {font-size:24px}
#genres .genreDetail p {font-size:13px}
#genres .sourceTagPanel,#genres .atlasMethod {margin-top:16px;padding-top:10px}

/* Information pages and overlays follow the same scale. */
.handbook {padding:0 0 24px;margin:0;max-width:none}
.handbookHero {padding-bottom:14px}
.handbookLead {font-size:15px;line-height:1.45;margin-top:8px}
.handbookMeta {margin-top:14px;gap:10px}
.logLegend {margin:12px 0 0;padding:10px 0}
.logEntry {padding:18px 0;gap:16px}
.logEntry article>p:not(.entryKicker) {font-size:14px;line-height:1.45;margin-bottom:8px}
.handbook summary {padding-block:12px}
.handbook summary::after {top:10px}
.docsBody {font-size:14px;padding-bottom:14px}
.docsSection summary {font-size:17px}
.docsBody>p,.docsBody li,.docsBody dd {font-size:14px;line-height:1.45}
.docsSection:first-of-type {margin-top:14px}
.about h1 {margin-bottom:12px}
.about h2 {margin-top:16px}
.sullyDialog,#shareDialog {padding:18px}
#shareDialog h2 {font-size:20px;line-height:1.3}
#shareDialog .shareActions {gap:6px;margin:12px 0 8px}
#shareDialog .shareActions button {font-size:14px}
.detailtop {gap:14px;margin:10px 0}
.detailtop img {width:100px;height:100px}
.uiPopover {padding:10px 12px}

@media(min-width:721px) {
  aside {gap:12px;padding-right:12px}
  .sidebarBrand {font-size:28px;line-height:34px;flex-basis:34px}
  nav button,#navGenres,.genreView #navGenres {height:36px;min-height:36px;padding:6px 10px;font-size:14px}
}
@media(min-width:1181px) {
  :root {--slop-player:76px}
  .player {padding:10px var(--slop-gutter);gap:10px}
}
@media(max-width:720px) {
  :root {--slop-gutter:14px;--ui-title:28px}
  main {padding-top:12px}
  aside {padding:6px var(--slop-gutter)}
  #navigationToggle {min-height:44px;padding:6px 12px}
  .sidebarBrand {font-size:25px}
  #searchResults {margin-top:10px}
  .heading {gap:4px 10px}
  .genreView main {padding:12px 14px}
  .search,#genres .contextualSearch {height:44px}
  .search input {font-size:16px}
  .search .searchScope {flex-basis:145px;width:145px}
  .search .localScope {flex-basis:52px;width:52px}
  .grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 10px}
  .pathCard:has(.collectionArt) {grid-template-columns:72px minmax(0,1fr)}
  .handbook {padding:0 0 16px}
  .handbookMeta {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .logEntry {gap:10px}
  .sullyDialog,#shareDialog {padding:14px}
}
@media(max-width:720px) and (max-height:540px) {
  .genreView main {padding:8px}
  #genres h1 {font-size:24px;margin-bottom:4px}
}
@media(pointer:coarse) {
  button,.relatedButton,.pathCard button,.trails button,.queueOptionsTrigger {min-height:44px}
  .activeFilters button {min-height:40px}
}

@media(min-width:721px) and (pointer:fine) {
  #genres .atlasRow,#genres .atlasRow .genreName {min-height:34px}
  #genres .genreAdd {flex-basis:34px;width:34px;height:34px;min-width:34px;min-height:34px}
}
@media(min-width:721px) and (max-height:420px) {
  aside {gap:4px;padding-block:4px}
  .sidebarBrand {font-size:24px;line-height:26px;flex-basis:26px}
  nav button,#navGenres,.genreView #navGenres {height:28px;min-height:28px;padding-block:3px}
}