/* Shared item sets: the one design for any list of things (Reads, Music, Build, Lately on the home page).
   Loaded after the page's base CSS (/css/app.css, or css/style.css on the home page). Greyscale; art is black and
   white (a page can opt a set back into colour with .ui-colour). Wall keeps its own square photo grid.

   Section header   <section class="ui-sec"><h2 class="ui-sec__h">Read<span class="ui-sec__n">12</span></h2> …
   List cards       <ul class="ui-cards"><li><a class="ui-card"><span class="ui-cover">…</span>
                      <span class="ui-card__tx"><span class="ui-pill"><span class="ui-pill__dot"></span>Reading</span>
                      <span class="ui-card__t">Title</span><span class="ui-card__a">Author</span></span></a></li></ul>
   Cover grid       <ul class="ui-grid"><li><a class="ui-tile"><span class="ui-cover">…</span>
                      <span class="ui-tile__t">Title</span><span class="ui-tile__a">Author</span></a></li></ul>
   Frames: .ui-cover = 2:3 book cover (default), --sq square (records), --photo (fills the frame, keeps its
   colour), --blank (no image: the title on paper), --icon (an app icon on paper). */

/* ------------------------------------------------------------ section header */
.ui-sec { margin: 0 0 26px; }
.ui-sec__h { display: flex; align-items: center; gap: 10px; margin: 0 2px 10px; font: 700 15px/1 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; }
.ui-sec__h::after { content: ""; flex: 1; height: 0; border-top: 1.5px dotted #9c9c9c; order: 1; }
.ui-sec__h--sub { margin-top: 20px; font-size: 13px; }                   /* a second set inside one section */
.ui-sec__n { order: 2; font: 18px/1 var(--font-lcd); color: #636363; letter-spacing: 0; text-transform: none; }

/* ------------------------------------------------------------ frames */
.ui-cover { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; background: #e6e6e6; border: 1.5px solid var(--ink); border-radius: 3px 6px 6px 3px;
  overflow: hidden; box-shadow: 3px 3px 0 rgba(0, 0, 0, .18); transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s; }
.ui-cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0)); z-index: 1; pointer-events: none; }
/* every frame in a set is the same shape; odd-shaped art sits whole at the bottom on paper grey */
.ui-cover img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; background: #e6e6e6; filter: grayscale(1) contrast(1.06); transition: filter .18s; }
.ui-cover--sq { aspect-ratio: 1; border-radius: 4px; }
.ui-cover--sq::before { content: none; }
.ui-cover--sq img { object-position: 50% 50%; }
.ui-cover--photo img { object-fit: cover; object-position: 50% 50%; filter: none; }   /* photos fill the frame and keep their colour */
.ui-cover--blank { display: grid; place-items: center; padding: 10px; text-align: center; background: repeating-linear-gradient(0deg, #fff 0 2px, #e6e6e6 2px 4px); }
.ui-cover--blank > span { padding: 4px 5px; background: #fff; border: 1px solid var(--ink); font: 700 13px/1.15 var(--font-ui); word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ui-cards .ui-cover--blank > span { font-size: 10px; padding: 2px 3px; }
.ui-cover--icon { display: grid; place-items: center; background: repeating-linear-gradient(0deg, #fff 0 2px, #e6e6e6 2px 4px); }
.ui-cover--icon img { width: 32px; height: 32px; object-fit: contain; background: none; image-rendering: pixelated; filter: none; }
.ui-colour .ui-cover img { filter: none; }

/* ------------------------------------------------------------ cover grid: 3 across on a phone, 6 on a desktop */
/* minmax(0, 1fr): a long one-line author (nowrap + ellipsis) must not widen its column */
.ui-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; }
.ui-grid > li { min-width: 0; }
@media (min-width: 620px) { .ui-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 16px; } }
@media (min-width: 900px) { .ui-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ui-tile { display: block; color: inherit; text-decoration: none; }
a.ui-tile:hover .ui-cover, a.ui-tile:focus-visible .ui-cover { transform: translate(-2px, -3px); box-shadow: 5px 6px 0 rgba(0, 0, 0, .22); }
a.ui-tile:hover .ui-cover:not(.ui-cover--photo) img { filter: grayscale(1) contrast(1.2) brightness(1.04); }
.ui-colour a.ui-tile:hover .ui-cover img { filter: none; }
.ui-tile__t { display: -webkit-box; margin-top: 7px; font: 600 13.5px/1.25 var(--font-body); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-tile__a { display: block; margin-top: 1px; font-size: 12.5px; color: #525252; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-tile__d { display: flex; align-items: center; gap: 5px; margin-top: 2px; font: 16px/1 var(--font-lcd); color: #636363; }

/* ------------------------------------------------------------ list cards: thumbnail left, pill + title + grey line right */
.ui-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.ui-cards > li { min-width: 0; }
.ui-card { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; min-width: 0; margin: 0; padding: 10px;
  color: inherit; font: inherit; text-align: left; text-decoration: none; background: var(--card, #fff); border: 1.5px solid var(--line, #313131); border-radius: 10px; }
button.ui-card { cursor: pointer; }
a.ui-card:hover .ui-card__t, button.ui-card:hover .ui-card__t, a.ui-card:focus-visible .ui-card__t { text-decoration: underline; }
a.ui-card:hover .ui-cover, button.ui-card:hover .ui-cover { transform: translate(-1px, -2px); box-shadow: 4px 5px 0 rgba(0, 0, 0, .22); }
.ui-card__tx { min-width: 0; display: block; }
.ui-pill { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin-bottom: 4px; padding: 1px 7px; border: 1px solid var(--ink); border-radius: 999px;
  font: 15px/1.1 var(--font-lcd); background: #fff; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-pill img { flex: none; width: 12px; height: 12px; image-rendering: pixelated; }
.ui-pill__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }   /* static: no blinking */
.ui-card__t { display: -webkit-box; font: 600 14.5px/1.25 var(--font-body); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ui-card__a { display: block; margin-top: 1px; font-size: 12.5px; color: #525252; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-card__d { display: flex; align-items: center; gap: 5px; margin-top: 2px; font: 16px/1 var(--font-lcd); color: #636363; }
.ui-bar { display: block; margin-top: 7px; height: 9px; border: 1.5px solid var(--ink); border-radius: 2px; background: #fff; overflow: hidden; }
.ui-bar i { display: block; height: 100%; width: var(--p); background: repeating-linear-gradient(90deg, #101010 0 5px, #424242 5px 7px); }
/* the selected one (e.g. the track on the turntable) */
.ui-card[aria-current] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ui-card[aria-current] .ui-card__a, .ui-card[aria-current] .ui-card__d { color: #cecece; }
.ui-card[aria-current] .ui-cover { border-color: #fff; }