/* Browse pages (/maps…): server-rendered lists in the maps page's look.
   Everything sits on solid panels (the navbar's surface) over the cover wall; cards,
   buttons and the shell come from shell.css and style.css. Star colours
   (.sr-62 = 6.2★) are appended by the server. */
.ld-page { --ld-panel: hsl(var(--hue) 14% 8%); padding-bottom: 72px; }
.ld-page > * + * { margin-top: 16px; }

/* Panels: one solid surface for every block of content */
.ld-panel {
  padding: 22px 24px 24px;
  border-radius: 16px;
  background: var(--ld-panel);
  box-shadow: 0 2px 6px hsl(var(--hue) 40% 2% / 0.4), 0 14px 36px -14px hsl(var(--hue) 40% 2% / 0.8);
}
.ld-panel-head { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 18px; }
.ld-panel-head h2 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--content1); }
.ld-total { font-size: 15px; font-weight: 500; color: var(--content2); font-variant-numeric: tabular-nums; }
.ld-see {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--ctl);
  color: var(--content1);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 140ms var(--ease);
}
.ld-see:hover { background: var(--ctl-hover); }
.ld-see:focus-visible, .ld-switch a:focus-visible, .ld-cell:focus-visible, .ld-mstyle:focus-visible, .ld-tile:focus-visible, .ld-crumbs a:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
}

/* Page header: breadcrumbs, title, the one line under it, then the switches */
.ld-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: -6px 0 10px -6px; padding: 0; list-style: none; font-size: 14px; color: var(--content2); }
.ld-crumbs li { display: flex; align-items: center; gap: 2px; }
.ld-crumbs li + li::before { content: "›"; color: var(--content2); padding: 0 2px; }
.ld-crumbs a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; border-radius: 8px; color: var(--content2); text-decoration: none; }
.ld-crumbs a:hover { color: var(--content1); background: var(--ctl); }
.ld-crumbs [aria-current] span { padding: 0 6px; color: var(--content1); font-weight: 600; }
.ld-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.ld-title h1 { margin: 0; font-size: 36px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; color: var(--content1); }
.ld-sub { margin: 8px 0 0; font-size: 16px; line-height: 1.45; color: var(--content2); }
.ld-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-page .btn { min-height: 44px; padding: 0 18px; font-size: 15px; font-weight: 600; text-decoration: none; }
.ld-search-btn { background: var(--ctl); border-color: transparent; color: var(--content1); }
.ld-search-btn:hover { background: var(--ctl-hover); }

/* Switches: big segmented links, current page pressed in pink */
.ld-switch { margin-top: 18px; }
.ld-switch + .ld-switch { margin-top: 10px; }
.ld-switch ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ld-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--ctl);
  color: var(--content1);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 140ms var(--ease);
}
.ld-switch a:hover { background: var(--ctl-hover); }
.ld-switch a:has(.ld-star) { padding-left: 8px; }
.ld-n { color: var(--content2); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ld-switch a[aria-current="page"] { background: var(--highlight); color: hsl(var(--hue) 45% 12%); }
.ld-switch a[aria-current="page"] .ld-n { color: hsl(var(--hue) 45% 16%); }
.ld-star {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  background: var(--sr, #aaa);
  color: var(--sr-ink, #000);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Shelves: one row of cards; extra cards wait on the list page (phones scroll the row) */
.ld-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ld-row > .map-card:nth-child(n + 5) { display: none; }
@media (min-width: 1600px) {
  .ld-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ld-row > .map-card:nth-child(5) { display: flex; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .ld-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ld-row > .map-card:nth-child(4) { display: none; }
}

/* Style × star rating: styles are rows, star bands are columns of big tiles */
.ld-mrows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ld-mrow { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 10px; }
.ld-mstyle, .ld-cell {
  display: flex;
  border-radius: 10px;
  background: var(--ctl);
  color: var(--content1);
  text-decoration: none;
  transition: background 140ms var(--ease);
}
.ld-mstyle { flex-direction: column; justify-content: center; gap: 2px; min-height: 68px; padding: 0 16px; }
.ld-mstyle strong { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.ld-mstyle span { font-size: 14px; color: var(--content2); font-variant-numeric: tabular-nums; }
.ld-mstyle:hover, .ld-cell:hover { background: var(--ctl-hover); }
.ld-mstyle:hover strong { color: var(--highlight); }
.ld-cells { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ld-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.ld-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.ld-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ld-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ld-cell { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; height: 100%; min-height: 68px; padding: 8px 10px; }
.ld-cell-n { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ld-cell-empty { border-radius: 10px; box-shadow: inset 0 0 0 2px var(--bg5); }

/* Cover tiles for the other lists: artwork on top, solid label below */
.ld-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ld-tile { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 12px; background: var(--ctl); color: var(--content1); text-decoration: none; transition: background 140ms var(--ease); }
.ld-tile-art { display: block; aspect-ratio: 400 / 140; background: var(--bg2); overflow: hidden; }
.ld-tile-art img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 200ms var(--ease); }
.ld-tile-text { display: grid; gap: 2px; padding: 12px 14px 14px; }
.ld-tile strong { font-size: 16px; font-weight: 700; }
.ld-tile-text span { font-size: 14px; color: var(--content2); font-variant-numeric: tabular-nums; }
.ld-tile:hover { background: var(--ctl-hover); }
.ld-tile:hover img { filter: brightness(1.1); }
.ld-tile-all .ld-tile-art { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--bg5); }

/* List pages: a solid bar over the cards, like the maps page's results bar */
.ld-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 12px 12px 24px; }
.ld-count { margin: 0; font-size: 18px; font-weight: 700; color: var(--content1); font-variant-numeric: tabular-nums; }
.ld-results .gallery { margin-top: 16px; }
.ld-more { display: flex; justify-content: center; margin: 28px 0 0; }
.map-card .card-open { display: block; }
/* No select tick on these cards, so the pp pill stays put on hover */
main.ld-page .artwork:hover .pp-badge { opacity: 1; }

@media (max-width: 760px) {
  .ld-page > * + * { margin-top: 12px; }
  .ld-panel { padding: 18px 16px 18px; border-radius: 14px; }
  .ld-title h1 { font-size: 28px; }
  .ld-sub { font-size: 15px; }
  .ld-title .btn, .ld-actions { flex: 1 1 100%; }
  .ld-actions .btn { flex: 1 1 auto; }
  .ld-panel-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; margin-bottom: 14px; }
  .ld-panel-head .ld-total { grid-row: 2; }
  .ld-panel-head .ld-see { grid-column: 2; grid-row: 1 / span 2; }
  .ld-panel-head h2 { font-size: 20px; }
  /* Star and style switches wrap without counts; the long list switch scrolls sideways */
  .ld-switch ul { gap: 6px; }
  .ld-switch a { padding: 0 12px; }
  .ld-switch:not(.ld-switch-wide) .ld-n { display: none; }
  .ld-switch-stars ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ld-switch-stars a, .ld-switch-stars a:has(.ld-star) { width: 100%; padding: 0; }
  .ld-switch-stars .ld-star { padding: 0 7px; }
  .ld-switch-styles ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ld-switch-styles a { width: 100%; }
  .ld-switch-wide ul { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .ld-switch-wide ul::-webkit-scrollbar { display: none; }
  .ld-switch + .ld-switch { margin-top: 8px; }
  main.ld-page .artwork .pp-badge, main.ld-page .artwork:hover .pp-badge { right: 10px; top: 10px; }
  .ld-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px; scrollbar-width: none; }
  .ld-row::-webkit-scrollbar { display: none; }
  .ld-row > .map-card, .ld-row > .map-card:nth-child(n + 5) { display: flex; flex: 0 0 82%; scroll-snap-align: start; }
  .ld-mrow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ld-mstyle { flex-direction: row; align-items: center; justify-content: space-between; min-height: 48px; }
  .ld-cells, .ld-cells[class*="ld-cols-"] { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .ld-cell-empty { display: none; }
  .ld-cell { min-height: 64px; padding: 8px; }
  .ld-cell .ld-star { padding: 0 8px; }
  .ld-mrows { gap: 18px; }
  .ld-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ld-bar { padding: 12px 12px 12px 16px; }
  .ld-bar .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .ld-tile-art img, .ld-switch a, .ld-cell, .ld-see { transition: none; } }
.sr-0{--sr:#aaaaaa;--sr-ink:#000000}
.sr-1{--sr:rgb(66, 144, 251);--sr-ink:#000000}
.sr-2{--sr:rgb(67, 148, 251);--sr-ink:#000000}
.sr-3{--sr:rgb(68, 152, 252);--sr-ink:#000000}
.sr-4{--sr:rgb(69, 157, 252);--sr-ink:#000000}
.sr-5{--sr:rgb(71, 161, 252);--sr-ink:#000000}
.sr-6{--sr:rgb(72, 165, 253);--sr-ink:#000000}
.sr-7{--sr:rgb(73, 169, 253);--sr-ink:#000000}
.sr-8{--sr:rgb(74, 173, 253);--sr-ink:#000000}
.sr-9{--sr:rgb(75, 177, 254);--sr-ink:#000000}
.sr-10{--sr:rgb(76, 182, 254);--sr-ink:#000000}
.sr-11{--sr:rgb(77, 186, 254);--sr-ink:#000000}
.sr-12{--sr:rgb(78, 190, 255);--sr-ink:#000000}
.sr-13{--sr:rgb(79, 196, 252);--sr-ink:#000000}
.sr-14{--sr:rgb(79, 205, 247);--sr-ink:#000000}
.sr-15{--sr:rgb(79, 213, 241);--sr-ink:#000000}
.sr-16{--sr:rgb(79, 221, 235);--sr-ink:#000000}
.sr-17{--sr:rgb(79, 230, 230);--sr-ink:#000000}
.sr-18{--sr:rgb(79, 238, 224);--sr-ink:#000000}
.sr-19{--sr:rgb(79, 247, 219);--sr-ink:#000000}
.sr-20{--sr:rgb(79, 255, 213);--sr-ink:#000000}
.sr-21{--sr:rgb(88, 255, 186);--sr-ink:#000000}
.sr-22{--sr:rgb(97, 255, 159);--sr-ink:#000000}
.sr-23{--sr:rgb(106, 255, 133);--sr-ink:#000000}
.sr-24{--sr:rgb(115, 255, 106);--sr-ink:#000000}
.sr-25{--sr:rgb(124, 255, 79);--sr-ink:#000000}
.sr-26{--sr:rgb(139, 253, 81);--sr-ink:#000000}
.sr-27{--sr:rgb(155, 251, 82);--sr-ink:#000000}
.sr-28{--sr:rgb(170, 249, 84);--sr-ink:#000000}
.sr-29{--sr:rgb(185, 248, 86);--sr-ink:#000000}
.sr-30{--sr:rgb(200, 246, 87);--sr-ink:#000000}
.sr-31{--sr:rgb(216, 244, 89);--sr-ink:#000000}
.sr-32{--sr:rgb(231, 242, 90);--sr-ink:#000000}
.sr-33{--sr:rgb(246, 240, 92);--sr-ink:#000000}
.sr-34{--sr:rgb(247, 228, 93);--sr-ink:#000000}
.sr-35{--sr:rgb(248, 215, 95);--sr-ink:#000000}
.sr-36{--sr:rgb(249, 203, 96);--sr-ink:#000000}
.sr-37{--sr:rgb(250, 190, 97);--sr-ink:#000000}
.sr-38{--sr:rgb(251, 178, 99);--sr-ink:#000000}
.sr-39{--sr:rgb(252, 165, 100);--sr-ink:#000000}
.sr-40{--sr:rgb(253, 153, 101);--sr-ink:#000000}
.sr-41{--sr:rgb(254, 140, 103);--sr-ink:#000000}
.sr-42{--sr:rgb(255, 128, 104);--sr-ink:#000000}
.sr-43{--sr:rgb(255, 121, 105);--sr-ink:#000000}
.sr-44{--sr:rgb(255, 114, 106);--sr-ink:#000000}
.sr-45{--sr:rgb(255, 107, 107);--sr-ink:#000000}
.sr-46{--sr:rgb(255, 99, 108);--sr-ink:#000000}
.sr-47{--sr:rgb(255, 92, 109);--sr-ink:#000000}
.sr-48{--sr:rgb(255, 85, 110);--sr-ink:#000000}
.sr-49{--sr:rgb(255, 78, 111);--sr-ink:#000000}
.sr-50{--sr:rgb(249, 77, 119);--sr-ink:#000000}
.sr-51{--sr:rgb(242, 76, 127);--sr-ink:#000000}
.sr-52{--sr:rgb(236, 75, 135);--sr-ink:#000000}
.sr-53{--sr:rgb(230, 74, 143);--sr-ink:#000000}
.sr-54{--sr:rgb(223, 73, 152);--sr-ink:#000000}
.sr-55{--sr:rgb(217, 72, 160);--sr-ink:#000000}
.sr-56{--sr:rgb(211, 71, 168);--sr-ink:#000000}
.sr-57{--sr:rgb(204, 70, 176);--sr-ink:#000000}
.sr-58{--sr:rgb(198, 69, 184);--sr-ink:#000000}
.sr-59{--sr:rgb(187, 72, 188);--sr-ink:#000000}
.sr-60{--sr:rgb(176, 76, 192);--sr-ink:#000000}
.sr-61{--sr:rgb(166, 79, 197);--sr-ink:#ffffff}
.sr-62{--sr:rgb(155, 82, 201);--sr-ink:#ffffff}
.sr-63{--sr:rgb(144, 86, 205);--sr-ink:#ffffff}
.sr-64{--sr:rgb(133, 89, 209);--sr-ink:#ffffff}
.sr-65{--sr:rgb(123, 92, 214);--sr-ink:#ffffff}
.sr-66{--sr:rgb(112, 96, 218);--sr-ink:#ffffff}
.sr-67{--sr:rgb(101, 99, 222);--sr-ink:#ffffff}
.sr-68{--sr:rgb(93, 91, 214);--sr-ink:#ffffff}
.sr-69{--sr:rgb(86, 83, 206);--sr-ink:#ffffff}
.sr-70{--sr:rgb(78, 76, 198);--sr-ink:#ffd966}
.sr-71{--sr:rgb(70, 68, 190);--sr-ink:#ffd966}
.sr-72{--sr:rgb(62, 60, 182);--sr-ink:#ffd966}
.sr-73{--sr:rgb(55, 52, 174);--sr-ink:#ffd966}
.sr-74{--sr:rgb(47, 44, 166);--sr-ink:#ffd966}
.sr-75{--sr:rgb(39, 37, 158);--sr-ink:#ffd966}
.sr-76{--sr:rgb(32, 29, 150);--sr-ink:#ffd966}
.sr-77{--sr:rgb(24, 21, 142);--sr-ink:#ffd966}
.sr-78{--sr:rgb(22, 19, 131);--sr-ink:#ffd966}
.sr-79{--sr:rgb(20, 18, 120);--sr-ink:#ffd966}
.sr-80{--sr:rgb(18, 16, 109);--sr-ink:#ffd966}
.sr-81{--sr:rgb(17, 15, 98);--sr-ink:#ffd966}
.sr-82{--sr:rgb(15, 13, 87);--sr-ink:#ffd966}
.sr-83{--sr:rgb(13, 11, 76);--sr-ink:#ffd966}
.sr-84{--sr:rgb(11, 10, 66);--sr-ink:#ffd966}
.sr-85{--sr:rgb(9, 8, 55);--sr-ink:#ffd966}
.sr-86{--sr:rgb(7, 6, 44);--sr-ink:#ffd966}
.sr-87{--sr:rgb(6, 5, 33);--sr-ink:#ffd966}
.sr-88{--sr:rgb(4, 3, 22);--sr-ink:#ffd966}
.sr-89{--sr:rgb(2, 2, 11);--sr-ink:#ffd966}
.sr-90{--sr:#000000;--sr-ink:#ffd966}
.sr-91{--sr:#000000;--sr-ink:#ffd966}
.sr-92{--sr:#000000;--sr-ink:#ffd966}
.sr-93{--sr:#000000;--sr-ink:#ffd966}
.sr-94{--sr:#000000;--sr-ink:#ffd966}
.sr-95{--sr:#000000;--sr-ink:#ffd966}
.sr-96{--sr:#000000;--sr-ink:#ffd966}
.sr-97{--sr:#000000;--sr-ink:#ffd966}
.sr-98{--sr:#000000;--sr-ink:#ffd966}
.sr-99{--sr:#000000;--sr-ink:#ffd966}
.sr-100{--sr:#000000;--sr-ink:#ffd966}