:root {
  --bg: #151413;
  --card: #1d1c1a;
  --text: #eceae5;
  --muted: #a19c93;
  --line: #34312d;
  --soft: #262422;
  --accent: #ff6f57;
  --on-accent: #1b1a18;
  --shadow: none;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
  max-width: 72rem;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.55 var(--sans);
}

/* Until the app has its data the page holds back: a loader instead of an
   empty main with the footer high up, which then drops down. */
.loader { display: none; }
body.loading main, body.loading .site-footer { display: none; }
body.loading .loader { display: grid; place-items: center; min-height: 70vh; }
body.loading .loader::after {
  content: "";
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite, appear 0.2s 0.3s both; /* only when the wait is noticeable */
}
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes appear { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  body.loading .loader::after { animation: appear 0.2s 0.3s both; }
}

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1 { font: 700 2.3rem/1.12 var(--serif); letter-spacing: -0.015em; margin: 2.5rem 0 1rem; }
h2 { font: 700 1.3rem/1.25 var(--serif); margin: 2.25rem 0 0.6rem; }
p { margin: 0 0 0.9rem; }
.label { display: block; font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 0 0 0.5rem; }
.lead { font-size: 1.15rem; line-height: 1.5; }
.small { color: var(--muted); font-size: 0.9rem; }
.strong { font-weight: 600; }

/* the head of the page */

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 2rem;
  padding: 1.1rem 0 0.9rem;
  border-bottom: 1px solid var(--line);
}
/* the logo, the same in every 1001 app: the number in the serif, the
   name beside it in small spaced capitals; whole on every screen */
.mark { display: inline-flex; align-items: baseline; gap: 0.4rem; white-space: nowrap; text-decoration: none; color: var(--text); }
.mark b { font: 700 1.55rem/1 var(--serif); letter-spacing: -0.03em; }
.mark span { font: 700 0.8rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
nav { display: flex; gap: 1.4rem; }
nav a { text-decoration: none; color: var(--muted); padding: 0.3rem 0; border-bottom: 2px solid transparent; }
nav a:hover { color: var(--text); }
nav a[aria-current] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
/* the pages' icons, shown in the tab bar of a phone only */
.nav-icon { display: none; width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-icon circle[r="1.3"] { fill: currentColor; stroke: none; }

/* buttons and fields */

button, .button, input, select {
  font: inherit;
  color: inherit;
  min-height: 2.6rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--card);
}
button, .button { display: inline-block; cursor: pointer; text-decoration: none; line-height: 1.6; font-weight: 500; transition: border-color 0.15s, background 0.15s; }
button:hover, .button:hover { border-color: var(--muted); }
.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.primary:hover { border-color: var(--text); }
.big { min-height: 3rem; padding: 0.6rem 1.4rem; font-size: 1.05rem; }
.danger { color: var(--accent); }
input[type="checkbox"] { min-height: 0; padding: 0; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--accent); flex: none; }
input[type="range"] { width: 100%; min-height: 0; padding: 0; border: 0; background: none; accent-color: var(--accent); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.row > input { flex: 1 1 14rem; }

#notice {
  position: sticky;
  top: 0.75rem;
  z-index: 3;
  margin: 1rem 0 0;
  padding: 0.7rem 1rem;
  border-radius: 0.6rem;
  background: var(--text);
  color: var(--bg);
  box-shadow: var(--shadow);
}
#notice.bad { background: var(--accent); color: var(--on-accent); }

/* cards and figures */

.card { padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); box-shadow: var(--shadow); }
.card > :last-child { margin-bottom: 0; }
.card h2:first-child { margin-top: 0; }
.alert { border-color: var(--accent); }
.figure { margin: 0 0 0.3rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.figure strong { font: 700 2.8rem/1.05 var(--serif); letter-spacing: -0.02em; color: var(--text); margin-right: 0.15rem; }
.figure.huge strong { font-size: 4rem; }
.code { font: 600 1.05rem/1.4 var(--mono); letter-spacing: 0.04em; overflow-wrap: anywhere; user-select: all; }

.columns { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2.5rem; align-items: start; }
.columns > div > h2:first-child { margin-top: 0; }
.narrow-text { max-width: 40rem; }

/* the contract */

.narrow { max-width: 38rem; margin: 0 auto; padding-top: 2rem; }
.narrow h1 { margin-top: 0.75rem; }

#login { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
#login label { display: block; margin-bottom: 0.4rem; }
#code { font-family: var(--mono); text-transform: uppercase; }
#contract { margin-top: 2rem; }
.choice { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: 0.6rem; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--soft); }
.choice input { margin-top: 0.25rem; accent-color: var(--accent); }
.choice .what span { font-size: 0.85rem; }
.choice .what .choice-more { display: block; color: var(--muted); margin-top: 0.15rem; }
/* the genres of a list: coloured parts of a bar, adding up to 100 percent */
.genre-bar { display: flex; height: 0.6rem; border-radius: 0.3rem; overflow: hidden; margin: 0.45rem 0 0.35rem; gap: 1px; background: var(--line); }
.genre-bar span { min-width: 2px; }
.genre-legend { display: flex; flex-wrap: wrap; gap: 0.1rem 0.75rem; list-style: none; padding: 0; margin: 0 0 0.5rem; font-size: 0.8rem; color: var(--muted); }
.genre-legend > * { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.genre-legend i { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; }
svg.genre-bar { display: block; width: 100%; }
.genre-legend svg { width: 0.6rem; height: 0.6rem; flex: none; }
.choice .what .choice-more .genre-bar, .choice .what .choice-more .genre-legend { display: flex; font-size: 0.75rem; }
/* the sound and the genres start below an instrument's photographs */
.sound, .genre-mix { clear: both; }
.genre-mix .genre-bar { height: 1rem; }
.genre-mix .genre-legend { font-size: 0.9rem; }
/* the colours of a list's covers, a stripe each */
.cover-band { display: block; width: 100%; height: 2.2rem; border-radius: 0.4rem; }
.cover-colors { margin: 2rem 0; }
.choice .what .choice-more a { display: block; width: fit-content; margin-top: 0.15rem; color: var(--text); }
.combo { position: relative; margin: 0.2rem 0 0.6rem; }
.combo input { width: 100%; padding: 0.6rem 0.8rem; font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 0.6rem; }
.combo input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.combo-options { position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 0.25rem); max-height: 18rem; overflow-y: auto; margin: 0; padding: 0.25rem; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 0.6rem; box-shadow: var(--shadow), 0 8px 24px rgb(0 0 0 / 0.12); }
.combo-option { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.4rem 0.6rem; border-radius: 0.4rem; cursor: pointer; }
.combo-option strong { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-option span { flex: none; font-size: 0.8rem; color: var(--muted); }
.combo-option:hover, .combo-option[aria-selected="true"] { background: var(--soft); }
.combo-option.current strong { color: var(--accent); }
.combo-none { padding: 0.5rem 0.6rem; color: var(--muted); font-size: 0.9rem; }
.chosen .choice { cursor: default; border-color: var(--accent); background: var(--soft); margin-bottom: 0.8rem; }
.choice .what .choice-tagline { display: block; color: var(--muted); }
@media (max-width: 36rem) {
  .combo-option { flex-direction: column; align-items: flex-start; gap: 0; }
  .combo-option strong { white-space: normal; }
}
#job-save { margin-top: 0.4rem; }

/* the working time */

.clock .big { width: 100%; margin-top: 0.9rem; }

.figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin: 1.5rem 0 2.5rem; }
.figures div { border-top: 3px solid var(--text); padding-top: 0.6rem; }
.figures dt { color: var(--muted); font-size: 0.9rem; }
.figures dd { margin: 0; font: 700 2.2rem/1.2 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.days { list-style: none; margin: 0 0 1.5rem; padding: 0; font-variant-numeric: tabular-nums; }
.days li { display: grid; grid-template-columns: 6rem 1fr 3.5rem 4rem; gap: 0.5rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.days .day { color: var(--muted); }
.days .times { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.days .times button { min-height: 0; padding: 0.1rem 0.55rem; font-size: 0.9rem; border-radius: 0.4rem; cursor: pointer; }
.days .times button:hover { border-color: var(--text); }
.days-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.days-head h2 { margin-top: 0; }
#shift { width: min(28rem, calc(100vw - 2rem)); }
#shift .shift-date { margin: 0.4rem 0 0.8rem; }
#shift .row input { width: 100%; }
#shift .row label { flex: 1; }
#shift p.row { margin: 1.3rem 0 0; }
.days .num { text-align: right; }
.days .minus { color: var(--accent); }

dialog { width: min(24rem, calc(100vw - 2rem)); padding: 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); color: var(--text); box-shadow: var(--shadow); }
dialog::backdrop { background: rgb(0 0 0 / 0.45); }
dialog h2 { margin-top: 0; }
dialog label { display: grid; gap: 0.25rem; color: var(--muted); font-size: 0.9rem; }

/* the list */

#list { display: grid; grid-template-columns: 21rem minmax(0, 1fr); gap: 2.5rem; align-items: start; padding-top: 2rem; }
.side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; position: sticky; top: 1.25rem; }
#progress-card .figure { margin: 0.1rem 0 0; }
#progress-card progress { margin: 0.6rem 0 0; }
#progress-card .small { margin: 0.7rem 0 0; }
/* when the list is heard, set off under the clock */
#plan-end { margin: 0.9rem 0 0; padding-top: 0.7rem; border-top: 1px solid var(--line); }

progress {
  display: block;
  width: 100%;
  margin: 0.8rem 0;
  height: 0.45rem;
  border: 0;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--line);
  accent-color: var(--accent);
  appearance: none;
}
progress::-webkit-progress-bar { background: var(--line); }
progress::-webkit-progress-value { background: var(--accent); }
progress::-moz-progress-bar { background: var(--accent); }

.tools {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  gap: 1rem;
  padding: 0 0 0.8rem;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.tools .row { justify-content: space-between; }
.filter { display: flex; }
.filter button { border-radius: 0; margin-left: -1px; color: var(--muted); }
.filter button:first-child { border-radius: 0.6rem 0 0 0.6rem; margin-left: 0; }
.filter button:last-child { border-radius: 0 0.6rem 0.6rem 0; }
.filter button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; position: relative; }
.shown-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; margin: 0.9rem 0 0.2rem; }
.shown-row #shown { margin: 0; }

.albums { list-style: none; margin: 0; padding: 0; }
.cover { display: block; flex: none; width: 3.5rem; height: 3.5rem; border-radius: 0.35rem; background: var(--line); overflow: hidden; }
.cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.albums li { display: flex; align-items: center; gap: 0.9rem; border-bottom: 1px solid var(--line); }
.albums li > .cover { margin: 0.6rem 0; }
.albums li > .what { flex: 1; }
.albums label { flex: 1; min-width: 0; display: flex; gap: 0.9rem; align-items: center; padding: 0.6rem 0; cursor: pointer; }
.what { min-width: 0; display: grid; }
.what strong { font-weight: 600; overflow-wrap: anywhere; }
.what span { color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.albums li.heard strong { font-weight: 400; color: var(--muted); }
.albums li.heard .cover img { opacity: 0.55; }
.albums time { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; padding: 0.6rem 0; }
.row-side:has(time:empty) { justify-content: center; }
.links { display: flex; flex-wrap: wrap; gap: 0 0.8rem; margin-top: 0.15rem; font-size: 0.78rem; }
.links a { color: var(--muted); text-decoration: none; }
.links a:hover { color: var(--accent); text-decoration: underline; }

/* the profile */

#p-more { margin: 0; }
.poster { display: block; width: 100%; height: auto; margin: 1rem 0 1.25rem; border: 1px solid var(--line); border-radius: 0.25rem; }

footer { margin-top: 4rem; color: var(--muted); font-size: 0.85rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* the blog: a post for each list, with its article, the list in full
   and its downloads */
.blog header .header-go { margin-left: auto; }
.blog main { padding-top: 0.5rem; }
.blog-hero { max-width: 46rem; padding: 2rem 0 1rem; }
.blog-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0.3rem 0 1rem; }
.byline { color: var(--muted); font-size: 0.9rem; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.post-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); overflow: hidden; }
.post-card-text { padding: 1.1rem 1.25rem 0.5rem; display: flex; flex-direction: column; flex: 1; }
.post-card h2 { margin: 0.1rem 0 0.4rem; font-size: 1.25rem; }
.post-card h2 a { text-decoration: none; }
.post-card h2 a:hover { text-decoration: underline; }
.post-card .downloads { margin-top: auto; font-size: 0.9rem; }
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--line); }
.mosaic img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.post-card .mosaic img:nth-child(n+5) { display: none; } /* the site's tiles: a row of four */
.mosaic-wide { grid-template-columns: repeat(8, 1fr); border-radius: 1rem; overflow: hidden; margin: 1.5rem 0 2rem; }
.crumbs { display: flex; gap: 0.5rem; margin: 1.5rem 0 1.25rem; font-size: 0.9rem; color: var(--muted); }
.post-head { display: block; max-width: 50rem; padding: 0; border: 0; }
.crumbs { align-items: baseline; }
.crumbs a { padding: 0; border: 0; color: var(--muted); }
.post-head h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 0.3rem 0 0.6rem; }
.post-body { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3rem; align-items: start; }
.post-text .lead { font-size: 1.25rem; max-width: 46rem; margin-bottom: 2.6rem; } /* set off from the article under it */
.post-aside { position: sticky; top: 1rem; }
.post-aside h2 { margin-top: 0.4rem; font-size: 1.1rem; }
.post-aside .button { margin: 0 0.3rem 0.3rem 0; }


/* -- a list's public link: the card on the list's page, and the page it
   opens, laid out like a post with the stats in its head ------------------ */
.share-card h2 { margin-top: 0; }
.share-card .check { display: flex; gap: 0.5rem; align-items: center; margin: 0.6rem 0; }
.share-link { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.6rem 0; }
.share-link input { flex: 1 1 100%; min-width: 0; font: 0.85rem var(--mono); }
.share-head { padding-top: 2rem; }
.share-head h1 { margin-bottom: 0.2rem; }
.share-who { font-size: 1.25rem; color: var(--muted); margin: 0 0 1.5rem; }
.share-stats { margin: 0.5rem 0 0.5rem; padding: 1.2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.share-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 2rem; margin-bottom: 1.4rem; }
.share-group .label { margin: 0 0 0.4rem; }
.share-figures { list-style: none; margin: 0; padding: 0; }
.share-figures li { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.2rem 0; }
.share-figures strong { font: 700 1.3rem/1.2 var(--serif); font-variant-numeric: tabular-nums; }
.share-figures span { font-size: 0.85rem; color: var(--muted); }
.share-charts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.share-chart .label { margin-bottom: 0.3rem; }
.share-bar { display: block; width: 100%; height: 0.7rem; border-radius: 0.35rem; overflow: hidden; background: var(--line); }
.share-legend { font-size: 0.72rem; margin: 0.35rem 0 0; }
.share-months { display: block; width: 100%; height: 3rem; }
.share-month { fill: var(--accent); }
.share-axis { fill: var(--line); }
.share-month-labels { display: grid; grid-template-columns: repeat(12, 1fr); margin: 0.15rem 0 0; font-size: 0.62rem; color: var(--muted); text-align: center; }
@media (max-width: 40rem) { .share-charts, .share-groups { grid-template-columns: minmax(0, 1fr); } }
/* an album's page: a large cover beside its name, its ratings, its facts
   and where to hear it; under them the moods, colours, reviews, lists and
   more by the artist, and the way to the app beside them */
.album-hero { display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: 3rem; align-items: center; margin: 0.5rem 0 3rem; }
.album-cover { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 0.75rem; overflow: hidden; background: var(--line); box-shadow: 0 2px 6px rgb(0 0 0 / 0.08), 0 24px 48px rgb(40 30 10 / 0.18); }
.album-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.album-intro h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; margin: 0.3rem 0 0.4rem; }
.album-artist { margin: 0 0 1.4rem; font-size: 1.4rem; }
.album-stars { color: var(--accent); letter-spacing: 0.05em; }
.album-scores { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0 0 1.5rem; }
.album-score { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 0.7rem; align-items: center; padding: 0.7rem 1rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--card); min-width: 13rem; }
.album-score strong { grid-row: 1 / 3; font: 700 2.4rem/1 var(--serif); }
.album-score span, .album-score a { font-size: 0.85rem; color: var(--muted); }
.album-score .album-stars { font-size: 1.05rem; color: var(--accent); }
.album-score-none strong { color: var(--muted); font-weight: 400; }
.album-score-none a { color: var(--text); }
.album-figures { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; margin: 0 0 1.5rem; }
.album-figures dt { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.album-figures dd { margin: 0.1rem 0 0; }
.album-listen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; }
.album-listen .label { margin: 0 0.4rem 0 0; }
.album-section { margin-bottom: 2.5rem; }
.album-section h2 { font-size: 1.35rem; margin: 0 0 0.9rem; }
.album-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.album-tags li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border: 1px solid var(--line); border-radius: 2rem; background: var(--card); font-size: 0.9rem; }
.album-tags span { color: var(--muted); font-size: 0.8rem; }
.album-tags svg { width: 0.75rem; height: 0.75rem; }
.album-tags circle { stroke: var(--line); stroke-width: 0.15; }
.album-lists { list-style: none; padding: 0; margin: 0; }
.album-lists li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.album-lists span { color: var(--muted); white-space: nowrap; }
.album-review { margin: 0 0 1rem; padding: 0.9rem 1.1rem; border-left: 3px solid var(--accent); background: var(--card); border-radius: 0 0.6rem 0.6rem 0; }
.album-review p { margin: 0 0 0.4rem; }
.album-review .album-review-by { margin: 0; font-size: 0.85rem; color: var(--muted); }
.album-empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border: 1px dashed var(--muted); border-radius: 0.75rem; }
.album-empty p { margin: 0; flex: 1 1 18rem; }
.album-more { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1.2rem 1rem; }
.album-more a { display: flex; flex-direction: column; gap: 0.15rem; text-decoration: none; color: var(--text); }
.album-more .cover { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 0.4rem; overflow: hidden; background: var(--line); margin-bottom: 0.4rem; }
.album-more img { display: block; width: 100%; height: 100%; object-fit: cover; }
.album-more strong { font-weight: 600; line-height: 1.3; }
.album-more span:last-child { font-size: 0.85rem; color: var(--muted); }
.album-more a:hover strong { text-decoration: underline; }
.album-credit { margin-top: 0.8rem; color: var(--muted); }
.entries strong a { color: inherit; text-decoration: none; }
.entries strong a:hover { text-decoration: underline; }
@media (max-width: 56rem) {
  .album-hero { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 2rem; }
}
@media (max-width: 40rem) {
  .album-hero { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .album-cover { max-width: 22rem; }
  .album-score { min-width: 0; flex: 1 1 12rem; }
}
.group h2 { border-bottom: 2px solid var(--text); padding-bottom: 0.3rem; margin-top: 2.5rem; }
.entries { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); column-gap: 1.5rem; }
.entries li { display: flex; gap: 0.75rem; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.entries li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.entries strong { font-weight: 600; line-height: 1.3; }
.entries strong + span { color: var(--muted); font-size: 0.88rem; }
.entry-cover { width: 3rem; height: 3rem; }
.entry-cover img { width: 100%; height: 100%; object-fit: cover; }
.more { margin-top: 4rem; }
@media (max-width: 52rem) {
  .post-body { grid-template-columns: 1fr; gap: 1rem; }
  .post-aside { position: static; order: -1; }
  .mosaic-wide { grid-template-columns: repeat(4, 1fr); }
  .mosaic-wide img:nth-child(n+5) { display: none; }
}

/* on a narrow screen everything is one column */

@media (max-width: 56rem) {
  body { padding: 0 1rem 3rem; }
  header { gap: 0.25rem 1rem; }
  nav { gap: 0.9rem; }
  h1 { font-size: 1.9rem; margin-top: 2rem; }
  #list, .columns { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  #list { padding-top: 1.25rem; }
  .side { position: static; }
  .tools { margin: 0 -1rem; padding: 0.6rem 1rem; }
  /* on a phone the clock stays above the list, the progress and the certificate go below it */
  .side { display: contents; }
  .side > .clock { order: -1; }
  .side > #progress-card, .side > .cert-card { order: 1; }
  .figures { grid-template-columns: repeat(2, 1fr); margin-bottom: 2rem; }
  .paper { padding: 2rem 1.4rem 1.8rem; }
  .letter p { font-size: 1.1rem; }
  .figure.huge strong { font-size: 3.2rem; }
}

@media (max-width: 30rem) {
  nav { gap: 0.8rem; }
  .albums time { display: none; }
  .cover { width: 3rem; height: 3rem; }
}

/* the days on a phone: the day with its sums on one line, the times
   beneath as roomy buttons, and the heading with its button side by side */
@media (max-width: 40rem) {
  .days li { grid-template-columns: 1fr auto auto; grid-template-rows: auto auto; row-gap: 0.4rem; padding: 0.7rem 0; }
  .days .day { grid-column: 1; grid-row: 1; color: var(--text); font-weight: 600; }
  .days .times { grid-column: 1 / -1; grid-row: 2; gap: 0.4rem; }
  .days .times:empty { display: none; }
  .days .times button { min-height: 2.2rem; padding: 0.3rem 0.8rem; font-size: 0.95rem; border-radius: 0.5rem; }
  .days .num { grid-row: 1; }
  .days-head { align-items: center; }
  .days-head h2 { margin-bottom: 0; }
  .days-head #shift-add { min-height: 2.2rem; padding: 0.3rem 0.8rem; }
  #t-hint { margin: 0.2rem 0 0.6rem; }
}

/* the page that verifies a certificate */

.verify .verdict { font: 1.25rem/1.5 var(--serif); margin: 0 0 1.5rem; }
.verify .verdict.ok::before { content: "✓ "; color: #2f7d43; font-weight: 700; }
.verify dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.5rem; margin: 0 0 1.75rem; }
.verify dt { color: var(--muted); }
.verify dd { margin: 0; font-weight: 600; }
.name-form { margin: 1rem 0 1.2rem; }
.name-form .small { margin: 0.5rem 0 0; }

/* the page's own question, in place of the browser's */

#ask { width: min(26rem, calc(100vw - 2rem)); padding: 1.6rem 1.6rem 1.3rem; }
#ask p:first-child { font: 1.15rem/1.5 var(--serif); margin: 0 0 1.4rem; }
#ask .row { justify-content: flex-end; margin: 0; }
.danger-button { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }

/* the account menu in the head of the page */

.account-menu { position: relative; }
.menu-button { display: flex; align-items: center; gap: 0.35rem; min-height: 0; padding: 0.15rem 0.5rem 0.15rem 0.15rem; border-radius: 2rem; color: var(--text); }
.menu-avatar-box { display: block; width: 2.75rem; height: 2.75rem; border-radius: 50%; overflow: hidden; background: var(--soft); }
.menu-avatar { display: block; width: 100%; height: 100%; }
.menu-avatar-big { display: block; width: 6rem; height: 6rem; margin: 0.2rem auto 0.8rem; border-radius: 50%; background: var(--soft); }
.menu-button[aria-expanded="true"] { border-color: var(--muted); background: var(--soft); }
.menu-button .chevron { color: var(--muted); transition: transform 0.15s; }
.menu-button[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 10;
  width: 19rem;
  padding: 0.4rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  box-shadow: 0 12px 32px rgb(30 20 10 / 0.14), 0 2px 6px rgb(30 20 10 / 0.06);
}
.menu-head { padding: 0.7rem 0.75rem 0.8rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--line); }
.menu-head .label { margin-bottom: 0.35rem; }
.menu-code { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; }
.menu-code .code { font-size: 0.86rem; }
.small-button { min-height: 0; padding: 0.2rem 0.6rem; font-size: 0.82rem; border-radius: 0.4rem; }
.menu [role="menuitem"] {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-radius: 0.5rem;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu [role="menuitem"]:hover, .menu [role="menuitem"]:focus-visible { background: var(--soft); outline: none; }
.menu [role="menuitem"].danger { color: var(--accent); }
.menu-rule { height: 1px; margin: 0.3rem 0.4rem; background: var(--line); }

/* the account menu of the pages the server makes: a details element, open
   without the app's script, styled like the app's menu */
.site-menu > summary { list-style: none; cursor: pointer; }
.site-menu > summary::-webkit-details-marker { display: none; }
.site-menu[open] > summary { border-color: var(--muted); background: var(--soft); }
.site-menu[open] > summary .chevron { transform: rotate(180deg); }
#privacy { width: min(30rem, calc(100vw - 2rem)); }
#privacy .row { justify-content: flex-end; margin: 1rem 0 0; }
.account-menu { margin-left: auto; }

@media (max-width: 56rem) {
  /* the head: the name and the menu, under them all the pages in one
     row, the blog the last of them, a page more like the others */
  header { flex-wrap: wrap; row-gap: 0.4rem; column-gap: 1.2rem; }
  header::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  header .account-menu, header .header-go { order: 1; margin-left: auto; }
  header nav { order: 3; gap: 1.2rem; white-space: nowrap; }
  header #nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  header nav a { padding: 0.5rem 0 0.6rem; }
  .menu { position: fixed; left: 1rem; right: 1rem; top: 3.9rem; width: auto; }
}

/* the page of an album */

.back { color: var(--muted); text-decoration: none; display: inline-block; margin-top: 1.5rem; }
.back:hover { color: var(--text); }
/* the album's page in the app is laid out as its public page: the cover
   large beside its name, ratings and actions, the form to rate it beside
   the moods, colours, reviews, lists and more by the artist */
#album .album-hero { margin-top: 1rem; }
.album-actions { gap: 1.2rem; margin: 0 0 1.4rem; }
.album-body .post-aside .card { margin: 0; }
.album-join { list-style: none; margin: 1rem 0 1.1rem; padding: 0; display: grid; gap: 0.7rem; }
.album-join li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.6rem; align-items: start; font-size: 0.9rem; line-height: 1.45; color: var(--muted); }
.album-join strong { color: var(--text); font-weight: 600; }
.album-join svg { width: 1.6rem; height: 1.6rem; padding: 0.3rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.album-join-go { margin: 0 0 0.5rem; }
.post-aside .album-join-go .button { display: block; width: 100%; margin: 0; text-align: center; padding-block: 0.65rem; font-size: 1rem; }
.album-join-note { margin: 0; }
/* on a phone the card sits above the album: the features two by two */
@media (max-width: 56rem) {
  .album-join { grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
}
.album-body .post-aside .card h2 { margin-top: 0; }
.heard-toggle { display: inline-flex; gap: 0.5rem; align-items: center; padding: 0.45rem 0.9rem; border: 1px solid var(--line); border-radius: 2rem; background: var(--card); cursor: pointer; }
.stars { display: flex; gap: 0.15rem; margin: 0.2rem 0 1.2rem; }
.star { min-height: 0; padding: 0 0.15rem; border: 0; background: none; font-size: 2rem; line-height: 1; color: var(--accent); }
.star:hover { transform: scale(1.1); }
#review-form textarea { width: 100%; font: inherit; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--bg); color: var(--text); resize: vertical; margin: 0.2rem 0 0.4rem; }
.review-state { padding: 0.6rem 0.8rem; border-radius: 0.5rem; background: var(--soft); }
.review-state.bad { background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
.reviews { list-style: none; margin: 0; padding: 0; }
.review { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.review p { margin: 0; overflow-wrap: anywhere; }
.review-head { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline; margin-bottom: 0.4rem !important; }
.stars-small { color: var(--accent); letter-spacing: 0.05em; }
.title-link { font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.title-link:hover { text-decoration: underline; }
.albums li.heard .title-link { font-weight: 400; color: var(--muted); }
.tick { display: flex; align-items: center; padding: 0.6rem 0; cursor: pointer; }
.cover-link { display: block; flex: none; }
.albums li > .what { flex: 1; padding: 0.6rem 0; }

.albums label.tick { flex: none; padding: 0.6rem 0; }

/* the choice of document on the profile: four equal buttons, two by two */

.doc-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; margin: 0.2rem 0 1rem; }
.doc-choice button { min-height: 2.4rem; padding: 0.35rem 0.6rem; font-size: 0.92rem; color: var(--muted); border-radius: 0.5rem; }
.doc-choice button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; }

/* liking an album */

.like-button { display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 2rem; padding: 0.4rem 0.9rem; font-variant-numeric: tabular-nums; }
.like-button .heart { color: var(--muted); font-size: 1.1rem; line-height: 1; transition: transform 0.15s, color 0.15s; }
.like-button[aria-pressed="true"] { border-color: var(--accent); }
.like-button[aria-pressed="true"] .heart { color: var(--accent); transform: scale(1.15); }

/* each album's stars and likes in the list */

.row-stats { display: flex; gap: 0.6rem; font-size: 0.75rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-stats:empty { display: none; }

/* a field people do not see; scripts fill it in */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.row-stars { color: var(--accent); }
.row-count { color: var(--muted); }
.row-likes { color: var(--muted); }

/* how popular an album is at Tidal, as the bars of a signal */
.signal { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 0.8em; vertical-align: -0.05em; }
.signal i { width: 3px; background: color-mix(in srgb, var(--muted) 30%, transparent); border-radius: 1px; }
.signal i:nth-child(1) { height: 25%; }
.signal i:nth-child(2) { height: 50%; }
.signal i:nth-child(3) { height: 75%; }
.signal i:nth-child(4) { height: 100%; }
.signal[data-level="1"] i:nth-child(-n+1),
.signal[data-level="2"] i:nth-child(-n+2),
.signal[data-level="3"] i:nth-child(-n+3),
.signal[data-level="4"] i:nth-child(-n+4) { background: var(--text); }

/* what an album makes its listeners feel */

.moods { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.8rem 0 2rem; }
.mood { --heat: 0; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.2rem; padding: 0.25rem 0.85rem; border-radius: 2rem; font-size: 0.9rem; color: var(--text); background: color-mix(in srgb, var(--accent) calc(var(--heat) * 24%), var(--card)); border-color: color-mix(in srgb, var(--accent) calc(var(--heat) * 45%), var(--line)); }
.mood:not([aria-pressed="true"]):not(.mood-more):hover { border-color: var(--muted); }
.mood-more { border-style: dashed; background: none; color: var(--muted); }
.mood-more:hover { color: var(--text); }
.mood-count { min-width: 1.3rem; padding: 0 0.4rem; border-radius: 1rem; background: var(--soft); color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.78rem; font-weight: 600; text-align: center; line-height: 1.5; }
.mood-count:empty { display: none; }
.swatch { width: 0.8rem; height: 0.8rem; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 25%, transparent); }
.mood[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.mood[aria-pressed="true"] .mood-count { background: color-mix(in srgb, var(--bg) 18%, transparent); color: var(--bg); }

/* the profile's albums: heard, rated, tagged */

.archive { margin-top: 2rem; }
.mine-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 0.4rem; }
.mine-tabs button { border-radius: 2rem; padding: 0.35rem 0.9rem; min-height: 0; color: var(--muted); }
.mine-tabs button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; }
/* the library: a grid of cards, each the cover and the album on top, the
   words of a rating beneath, and a foot with the stars or the day on the
   left and what can be done on the right */
.albums.mine { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); gap: 0.8rem; }
.mine li.mine-item { display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; min-width: 0; padding: 0.8rem; border: 1px solid var(--line); border-radius: 0.9rem; background: var(--card); }
.mine-head { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.mine-head .cover { width: 4.25rem; height: 4.25rem; border-radius: 0.45rem; }
.mine-head .what { flex: 1; }
.mine-foot { display: flex; align-items: center; gap: 0.6rem; margin-top: auto; padding-top: 0.55rem; border-top: 1px solid var(--line); min-height: 2.6rem; }
.mine-foot time { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.mine-foot > :last-child:is(button) { margin-left: auto; }
.mine-stars { color: var(--accent); letter-spacing: 0.05em; white-space: nowrap; }
.mine-remove.icon-button { width: 2rem; height: 2rem; min-height: 0; border-radius: 50%; border-color: transparent; background: none; }
.mine-remove.icon-button:hover { color: var(--accent); border-color: var(--accent); }
.mine-review { display: block; margin: 0; padding-left: 0.7rem; border-left: 2px solid var(--line); font-size: 0.9rem; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.mine-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.mine-facts { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; }
.mine-facts .swatch { width: 0.6rem; height: 0.6rem; }
/* large covers: the cover across the card, the album under it */
.albums.mine.mine-grid { grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 100%), 1fr)); gap: 1rem 0.8rem; }
.mine-grid li.mine-item { padding: 0; gap: 0.5rem; border: 0; background: none; }
.mine-grid .mine-head { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.mine-grid .cover-link { display: block; }
.mine-grid .mine-head .cover { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0.6rem; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 6px 18px rgb(0 0 0 / 0.18); transition: transform 0.15s; }
.mine-grid .cover-link:hover .cover { transform: translateY(-2px); }
.mine-grid .what strong, .mine-grid .what .title-link { font-size: 0.95rem; line-height: 1.3; }
.mine-grid .what > span { font-size: 0.84rem; }
.mine-grid .mine-review { font-size: 0.84rem; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mine-grid .mine-foot { flex-wrap: wrap; gap: 0.3rem 0.5rem; padding-top: 0.4rem; min-height: 2.2rem; }
.mine-grid .mine-tag { font-size: 0.74rem; }

/* the library's sum: figures, then the genres and the countries, each a
   filter on a click */
.lib-overview { display: grid; gap: 1rem; margin: 0 0 1.2rem; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); }
.lib-overview:empty { display: none; }
.lib-figures { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; }
.lib-fig { display: grid; gap: 0.1rem; }
.lib-fig strong { font: 700 1.6rem/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.lib-fig span { font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.lib-facets { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.2rem 2rem; }
.lib-facet .label { margin-bottom: 0.45rem; }
.lib-bar { display: flex; height: 0.7rem; gap: 2px; margin-bottom: 0.6rem; border-radius: 0.35rem; overflow: hidden; }
.lib-bar-part { flex: 1 1 0; min-width: 3px; min-height: 0; padding: 0; border: 0; border-radius: 0; cursor: pointer; transition: opacity 0.15s; }
.lib-bar:hover .lib-bar-part { opacity: 0.55; }
.lib-bar .lib-bar-part:hover { opacity: 1; }
.lib-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lib-chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 0; padding: 0.2rem 0.65rem; border-radius: 2rem; font-size: 0.82rem; font-weight: 500; color: var(--text); }
.lib-chip .swatch { width: 0.6rem; height: 0.6rem; }
.lib-chip-n { color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.lib-chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.lib-chip[aria-pressed="true"] .lib-chip-n { color: color-mix(in srgb, var(--bg) 70%, transparent); }

/* the search, the filters, the sort and the view in one row */
.lib-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; }
.lib-tools input[type="search"] { flex: 1 1 14rem; min-width: 0; }
.lib-tools select { flex: 0 1 auto; max-width: 13rem; min-width: 0; padding-right: 0.6rem; color: var(--muted); }
.lib-tools select.on { border-color: var(--accent); color: var(--text); }
.lib-tools #lib-sort { color: var(--text); }
.lib-view { display: flex; gap: 0.2rem; margin-left: auto; }
.lib-view .icon-button { width: 2.4rem; height: 2.4rem; border-radius: 0.5rem; }
.lib-view .icon-button[aria-pressed="true"] { background: var(--soft); border-color: var(--muted); color: var(--text); }
.lib-shown { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1rem; }
.lib-shown .link { font-size: 0.85rem; }
@media (max-width: 40rem) {
  .lib-overview { padding: 0.9rem; }
  .lib-figures { gap: 0.6rem 1.3rem; }
  .lib-fig strong { font-size: 1.3rem; }
  .lib-facets { grid-template-columns: minmax(0, 1fr); }
  .lib-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-tools input[type="search"] { grid-column: 1 / -1; }
  .lib-tools select { max-width: none; width: 100%; }
  .lib-view { grid-column: 1 / -1; justify-content: flex-end; }
  .albums.mine.mine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mine-tag { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.1rem 0.55rem; border: 1px solid var(--line); border-radius: 2rem; background: var(--soft); font-size: 0.8rem; color: var(--text); }
.pages { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.pages span { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }

/* the home page: the name, the promise, and the way in */

.hero { padding: 4.5rem 0 3.5rem; text-align: center; }
#welcome .hero-brand { margin: 0 0 1rem; padding-left: 0.14em; font-size: 0.8rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
#welcome .hero-name { font: 700 clamp(2.1rem, 5.5vw, 3.6rem)/1.1 var(--serif); letter-spacing: -0.015em; max-width: 24ch; margin: 0 auto; padding: 0 0.5rem; text-wrap: balance; }
#welcome .hero-line { font: clamp(1.1rem, 2.2vw, 1.35rem)/1.5 var(--sans); max-width: 40ch; margin: 1.2rem auto 2.2rem; color: var(--muted); text-wrap: balance; }
.hero-go { margin: 0 0 0.8rem; }
.hero-go button { width: min(100%, 24rem); }
.hero .small { max-width: 38rem; margin: 0 auto; }
#welcome #login { margin-top: 0; }
.welcome-features { margin: 4rem 0 1rem; }
#welcome .welcome-features h2 { text-align: center; font: 700 1.6rem/1.2 var(--serif); margin: 0 0 1.5rem; }
.welcome-features ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.welcome-features li { padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 0.9rem; background: var(--card); }
#welcome .welcome-features h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.welcome-features p { margin: 0; font-size: 0.92rem; color: var(--muted); line-height: 1.45; }
@media (max-width: 60rem) { .welcome-features ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .welcome-features ul { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; } .welcome-features { margin-top: 3rem; } }

/* a button that reads as a link */
button.link { all: unset; cursor: pointer; color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.2em; }
button.link:hover { text-decoration-color: currentColor; }
button.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the giveaway */

.giveaway { margin-top: 1.5rem; }
.give-prize { font: 700 1.6rem/1.2 var(--serif); margin: 0.2rem 0 0.3rem; }
.giveaway h3 { font-size: 1rem; margin: 1.2rem 0 0.4rem; }
.give-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.give-steps li { display: grid; grid-template-columns: 1.2rem 1fr; column-gap: 0.4rem; }
.give-steps .give-hint { grid-column: 2; margin-top: 0.1rem; }
.give-mark { color: var(--muted); font-weight: 700; }
.give-steps li.done .give-mark { color: var(--accent); }
.give-go { margin: 1.1rem 0 0.4rem; }
.give-entered, .give-won { font-weight: 600; }
.give-won { font: 700 1.3rem/1.3 var(--serif); color: var(--accent); }
.give-verify { margin-top: 1rem; }
.give-verify summary { cursor: pointer; }
.give-mono { font-family: var(--mono); font-size: 0.78rem; word-break: break-all; color: var(--muted); }
.give-claim { display: grid; grid-template-columns: 1fr 2fr; gap: 0.6rem 0.8rem; }
.give-claim > p, .give-claim > button, .give-claim .give-name, .give-claim .give-street, .give-claim .give-extra, .give-claim .give-country, .give-claim .give-note { grid-column: 1 / -1; }
.give-field { display: grid; gap: 0.25rem; font-size: 0.9rem; color: var(--muted); }
.rules p { line-height: 1.55; margin: 0 0 0.8em; }
#give-rules { width: min(40rem, calc(100vw - 2rem)); }

/* the organiser's page */

.admin-new { display: grid; gap: 0.7rem; max-width: 34rem; margin: 1rem 0 2rem; }
.admin-new h2 { margin: 0; }
.admin-entries, .admin-reviews { list-style: none; margin: 0; padding: 0; }
.admin-entries li { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: baseline; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.admin-entries .flag { color: var(--accent); font-size: 0.85rem; }
.admin-reviews li { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.admin-reviews p { margin: 0.3rem 0 0; }
.admin-redo { margin: 1rem 0; }
.admin-redo input { flex: 1; min-width: 12rem; }
.notice-line { color: var(--accent); font-weight: 600; }

.admin-numbers { margin-bottom: 2.5rem; }
.admin-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem 1.5rem; margin: 0.8rem 0 1.2rem; }
.admin-figures div { border-top: 2px solid var(--text); padding-top: 0.4rem; }
.admin-figures dd { margin: 0; font: 700 1.6rem/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.admin-figures dt { color: var(--muted); font-size: 0.85rem; }
.admin-chart { display: flex; align-items: flex-end; gap: 3px; height: 5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.admin-bar { position: relative; flex: 1; height: calc(var(--views) * 100%); min-height: 1px; background: color-mix(in srgb, var(--text) 18%, transparent); border-radius: 2px 2px 0 0; }
.admin-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--visitors) / var(--views) * 100%); background: var(--accent); border-radius: 2px 2px 0 0; }

button:disabled, button:disabled:hover { opacity: 0.45; cursor: not-allowed; }

.give-pic { display: block; width: 100%; max-height: 22rem; object-fit: cover; border-radius: 0.6rem; margin: 0.4rem 0 0.8rem; background: var(--line); }
.give-desc { margin: 0 0 0.6rem; line-height: 1.55; white-space: pre-line; }
.admin-prize { display: grid; gap: 0.7rem; max-width: 34rem; margin: 1rem 0 1.5rem; }
.admin-prize .give-pic { max-height: 14rem; margin: 0; }
.give-field textarea { font: inherit; color: var(--text); padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--card); resize: vertical; }

/* the listening time: balance, this week, all in all */

.time-scope { margin: 0.6rem 0 0; }
.time-top { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 1.25rem; margin: 1.5rem 0 2.5rem; align-items: stretch; }
.time-card { display: flex; flex-direction: column; gap: 0.3rem; }
.time-big { margin: 0.2rem 0 0; font: 700 2.6rem/1.1 var(--serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.time-big.minus { color: var(--accent); }
.time-of { font: 400 1rem/1 var(--sans, inherit); color: var(--muted); letter-spacing: 0; }
.time-card progress { margin: 0.4rem 0 0.2rem; }
.wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.45rem; margin-top: 0.6rem; }
.wk-day { display: grid; gap: 0.3rem; justify-items: center; }
.wk-track { position: relative; width: 100%; height: 4.5rem; border-radius: 0.35rem; background: color-mix(in srgb, var(--line) 55%, transparent); overflow: hidden; }
.wk-bar { position: absolute; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--text) 55%, transparent); border-radius: 0.35rem 0.35rem 0 0; }
.wk-bar.met { background: var(--accent); }
.wk-goal { position: absolute; left: 0; right: 0; border-top: 2px dashed color-mix(in srgb, var(--text) 45%, transparent); }
.wk-label { font-size: 0.75rem; color: var(--muted); }
.wk-day.today .wk-label { color: var(--text); font-weight: 700; }
.wk-day.later .wk-track { opacity: 0.45; }
@media (max-width: 52rem) { .time-top { grid-template-columns: 1fr 1fr; } .time-top > :nth-child(2) { grid-column: 1 / -1; grid-row: 1; } }
@media (max-width: 30rem) { .time-top { grid-template-columns: 1fr; } }

/* the stats: what the posters show, on the page */

.st-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin: 0 0 0.4rem; }
.st-scope { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; min-width: 14rem; }
.period-pick { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; }
.period-pick select { min-height: 0; padding: 0.35rem 0.6rem; }
.period-pick span { min-width: 9rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.period-pick button { min-height: 0; padding: 0.2rem 0.7rem; font-size: 1.2rem; line-height: 1.2; border-color: transparent; background: none; }
.period-pick button:disabled { opacity: 0.3; }
.st-figures { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; }
.st-figure { padding: 1rem 1.2rem; }
.st-figure .time-big { font-size: 2.1rem; }
.st-figure p { margin: 0; }
.st-sub { margin-top: 0.2rem !important; }
.st-card { margin-bottom: 1.5rem; }
.st-card h2 { margin-top: 0; }
.st-genres { display: grid; grid-template-columns: 12rem 1fr; gap: 1.5rem; align-items: center; }
.st-ring { position: relative; width: 12rem; height: 12rem; border-radius: 50%; }
.st-hole { position: absolute; inset: 22%; border-radius: 50%; background: var(--card); display: grid; place-content: center; text-align: center; gap: 0.1rem; padding: 0.5rem; }
.st-hole strong { font: 700 1.6rem/1 var(--serif); }
.st-hole span { font-size: 0.8rem; color: var(--muted); }
.st-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.st-legend li { display: grid; grid-template-columns: 0.9rem 1fr auto; gap: 0.5rem; align-items: center; }
.st-gname { text-transform: capitalize; }
.st-chart { display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); gap: 3px; }
.st-col { display: grid; gap: 0.3rem; justify-items: center; }
.st-track { position: relative; width: 100%; height: 8rem; border-radius: 0.3rem; background: color-mix(in srgb, var(--line) 50%, transparent); overflow: hidden; }
.st-bar { position: absolute; left: 0; right: 0; bottom: 0; background: var(--accent); border-radius: 0.3rem 0.3rem 0 0; }
.st-col.later .st-track { opacity: 0.4; }
.st-label { font-size: 0.72rem; color: var(--muted); min-height: 1em; }
.st-disc { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 1rem; }
.st-artist { display: grid; gap: 0.15rem; text-decoration: none; color: var(--text); }
.st-artist .cover { width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 0.3rem; }
.st-artist .cover img { width: 100%; height: 100%; }
.st-artist strong { line-height: 1.25; }
.st-more { align-self: center; }
.lounge-intro { max-width: 46rem; margin: 0 0 1.6rem; }
.page-head { grid-column: 1 / -1; order: -2; }
.page-head h1 { margin-top: 0; }
.page-head .lounge-intro { margin-bottom: 0.4rem; }
.hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
@media (max-width: 44rem) { .hub { grid-template-columns: minmax(0, 1fr); } }
.hub-card { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1.1rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); color: var(--text); text-decoration: none; transition: border-color 0.15s; }
.hub-card:hover { border-color: var(--muted); }
.hub-pic { display: block; width: 8rem; aspect-ratio: 1; border-radius: 0.6rem; overflow: hidden; background: var(--soft); }
.hub-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hub-card[href="#geo"] .hub-pic { background: var(--card); }
.hub-card[href="#geo"] .hub-pic img { object-fit: cover; object-position: 42% 40%; }
.hub-group { position: relative; display: block; width: 100%; height: 100%; }
.hub-pic .hub-group img { position: absolute; width: 46%; height: 46%; margin: 0; border-radius: 0; background: none; border: 0; object-fit: contain; }
.hub-text { display: flex; flex-direction: column; gap: 0.35rem; }
.hub-text strong { font: 700 1.25rem/1.2 var(--serif); }
.hub-status { color: var(--muted); }
.hub-go { margin-top: auto; padding-top: 0.4rem; font-weight: 600; color: var(--accent); }
@media (max-width: 30rem) { .hub-card { grid-template-columns: 5rem minmax(0, 1fr); } .hub-pic { width: 5rem; } }

/* the room: a row per listener, what they hear at the right */
.room-line { font: 700 1.3rem/1.3 var(--serif); margin: 0 0 0.4rem; }
.room li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 0.9rem; align-items: center; padding: 0.6rem 0; }
.room-face { flex: none; display: block; width: 3.5rem; height: 3.5rem; }
.room li.you .what strong { color: var(--accent); }
.room li.room-away .room-face { opacity: 0.55; filter: grayscale(0.6); }
.room li.room-away .what span { color: var(--muted); }
.room-hearing { display: grid; justify-items: end; text-align: right; min-width: 0; }
.room-hearing .title-link { overflow-wrap: anywhere; }
/* the bars that move while something plays */
.room-playing { display: inline-flex; align-items: center; gap: 0.4rem; }
.playing { display: inline-flex; align-items: flex-end; gap: 2px; width: 1rem; height: 0.85rem; }
.playing i { flex: 1; height: 30%; background: var(--accent); border-radius: 1px; animation: playing 1.1s ease-in-out infinite; transform-origin: bottom; }
.playing i:nth-child(2) { animation-delay: -0.35s; }
.playing i:nth-child(3) { animation-delay: -0.7s; }
.playing i:nth-child(4) { animation-delay: -0.2s; }
@keyframes playing {
  0%, 100% { height: 30%; }
  25% { height: 100%; }
  50% { height: 50%; }
  75% { height: 80%; }
}
@media (prefers-reduced-motion: reduce) { .playing i { animation: none; height: 60%; } }
@media (max-width: 40rem) {
  .room li { grid-template-columns: auto minmax(0, 1fr); }
  .room-hearing { grid-column: 1 / -1; justify-items: start; text-align: left; padding-bottom: 0.3rem; }
}
.room-map { margin: 0.6rem 0 1.4rem; }
.room-map-svg { display: block; width: 100%; height: auto; border-radius: 0.8rem; background: var(--card); }
.room-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 0.8; }
.room-map .small { margin: 0.4rem 0 0; }

/* where from: the cover beside the map, the click, the country, the line */
.geo-play { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 1.4rem; align-items: start; margin-bottom: 2rem; }
.geo-side { display: grid; gap: 0.5rem; }
.geo-round { margin: 0; }
.geo-cover .cover { width: 16rem; height: 16rem; border-radius: 0.6rem; }
.geo-what { margin: 0; font-weight: 600; }
.geo-result { margin: 0; color: var(--accent); font-weight: 700; }
.geo-total { margin: 0.4rem 0 0; font: 700 1.5rem/1.2 var(--serif); font-variant-numeric: tabular-nums; }
.geo-total .small { font: inherit; font-size: 0.9rem; color: var(--muted); }
.geo-map-box { border: 1px solid var(--line); border-radius: 0.9rem; background: var(--card); overflow: hidden; }
.geo-map { display: block; width: 100%; height: auto; cursor: crosshair; }
.geo-map.answered { cursor: default; }
#geo-guess { fill: var(--text); stroke: var(--bg); stroke-width: 0.6; }
#geo-truth { fill: var(--accent); stroke: var(--bg); stroke-width: 0.6; }
#geo-line { stroke: var(--accent); stroke-width: 0.7; stroke-dasharray: 2 1.5; }
.geo-board h2 { margin-bottom: 0.3rem; }
.geo-board-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.8rem; margin-top: 1rem; }
.geo-card { position: relative; display: grid; justify-items: center; gap: 0.2rem; padding: 1.1rem 0.8rem 0.9rem; text-align: center; }
.geo-card.you { border-color: var(--accent); }
.geo-card.top { background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.geo-rank { position: absolute; top: 0.5rem; left: 0.6rem; font: 700 0.8rem/1 var(--sans); color: var(--muted); }
.geo-card.top .geo-rank { color: var(--accent); }
.geo-face { width: 6rem; height: 6rem; border-radius: 50%; background: var(--soft); }
.geo-points { font: 700 1.35rem/1.1 var(--serif); font-variant-numeric: tabular-nums; margin-top: 0.3rem; }
.geo-card .pill { margin-top: 0.3rem; }
.been-box { border: 1px solid var(--line); border-radius: 0.9rem; background: var(--card); overflow: hidden; }
.been-map { display: block; width: 100%; height: auto; }
.been-map path { fill: var(--soft); stroke: var(--card); stroke-width: 0.3; stroke-linejoin: round; }
.been-map .been { fill: var(--accent); stroke: var(--card); }
.been-map [data-level="1"] { fill-opacity: 0.4; }
.been-map [data-level="2"] { fill-opacity: 0.6; }
.been-map [data-level="3"] { fill-opacity: 0.8; }
.been-map [data-level="4"] { fill-opacity: 1; }
.been-line { margin: 1rem 0 0.4rem; font-weight: 600; }
.been-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }
/* the continents, each a bar of how far, and a country's panel */
.been-continents { margin: 1.4rem 0 1.6rem; }
.been-continents .been-head { margin: 0 0 0.7rem; }
.been-cont-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.7rem; }
.been-cont { display: grid; gap: 0.45rem; align-content: start; }
.been-cont .label { margin: 0; }
.been-cont-figure { margin: 0; }
.been-cont-figure strong { font: 700 1.9rem/1 var(--serif); }
.been-bar { display: block; height: 0.45rem; border-radius: 1rem; background: var(--soft); overflow: hidden; }
.been-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.been-panel { margin: 1rem 0 1.4rem; }
.been-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.been-panel-head h2 { margin: 0; }
@media (max-width: 40rem) { .been-cont-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } .been-cont-figure strong { font-size: 1.6rem; } }
/* a country's panel: how far, the covers heard, then the albums still to
   hear as rows of a table, each with its small cover and its year */
.been-progress { display: block; margin: 0.2rem 0 0.9rem; }
.been-sub { margin: 1.3rem 0 0.6rem; font: 600 0.78rem/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.been-covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr)); gap: 0.45rem; }
.been-cover { display: block; border-radius: 0.4rem; overflow: hidden; transition: transform 0.15s; }
.been-cover:hover { transform: scale(1.04); }
.been-cover .cover { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 0; }
.been-cover .cover img { width: 100%; height: 100%; object-fit: cover; }
.been-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.been-rows li { border-bottom: 1px solid var(--line); }
.been-row { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; padding: 0.45rem 0.3rem; color: var(--text); text-decoration: none; border-radius: 0.4rem; }
.been-row:hover { background: var(--soft); }
.been-row .cover { width: 2.6rem; height: 2.6rem; border-radius: 0.25rem; }
.been-row-what { display: grid; min-width: 0; }
.been-row-what strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.been-row-what .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.been-row-year { font-variant-numeric: tabular-nums; }
.blog .been-box { max-width: 60rem; margin: 0 auto 1rem; }
.where { margin: 1.5rem 0; }
.blog-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0; }
.tag { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem; border: 1px solid var(--line); border-radius: 2rem; background: var(--card); color: var(--text); font-size: 0.9rem; text-decoration: none; transition: border-color 0.15s, background 0.15s; }
.tag:hover { border-color: var(--muted); text-decoration: none; }
.tag[aria-current="true"] { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; }
.tag-n { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tag[aria-current="true"] .tag-n { color: inherit; opacity: 0.7; }
.instrument { float: left; width: min(42%, 15rem); margin: 0.3rem 1.5rem 0.8rem 0; }
.instrument-link { display: block; border-radius: 0.8rem; overflow: hidden; }
.instrument img { display: block; width: 100%; height: auto; cursor: zoom-in; transition: transform 0.2s; }
.instrument-link:hover img { transform: scale(1.03); }
.instrument figcaption { margin-top: 0.4rem; font-size: 0.75rem; line-height: 1.35; color: var(--muted); }
.post-text::after { content: ""; display: block; clear: both; }
.instrument-more { display: flex; gap: 0.3rem; margin-top: 0.3rem; }
.instrument-more .instrument-link { flex: 1; aspect-ratio: 1; border-radius: 0.5rem; }
.instrument-more img { width: 100%; height: 100%; object-fit: cover; }
.lightbox { width: min(96vw, 72rem); max-width: 96vw; max-height: 96vh; padding: 0; border: 0; border-radius: 1rem; background: #0e0d0c; color: #ede6d6; box-shadow: none; overflow: hidden; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.88); }
.lightbox-stage { display: grid; place-items: center; height: min(78vh, 56rem); padding: 1rem; }
.lightbox img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 0.5rem; cursor: e-resize; }
.lightbox-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.8rem; padding: 0.5rem 0.8rem 0.8rem; }
.lightbox-cap { font-size: 0.85rem; color: #b9b2a5; }
.lightbox-n { font-size: 0.8rem; color: #8d877b; font-variant-numeric: tabular-nums; }
.lightbox-prev, .lightbox-next { min-height: 0; width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 50%; border: 1px solid #3a3733; background: #1b1a18; color: #ede6d6; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.lightbox-prev:hover, .lightbox-next:hover { background: #2a2825; border-color: #5a564f; }
@media (max-width: 40rem) { .lightbox-stage { height: 60vh; } .lightbox-bar { grid-template-columns: auto minmax(0, 1fr) auto; } .lightbox-n { display: none; } }
@media (max-width: 40rem) { .instrument { float: none; width: 100%; max-width: 20rem; margin: 0 0 1rem; } }
.blog-cat { scroll-margin-top: 1rem; }
.blog-cat > .small { margin: -0.4rem 0 0.8rem; }
.where .been-box { margin: 0.6rem 0 0.5rem; }
.hub-pic .hub-map { width: 100%; height: 100%; }
.hub-pic .hub-numbers { display: block; width: 100%; height: 100%; background: var(--card); font: 700 10px var(--serif); fill: var(--accent); font-variant-numeric: tabular-nums; }
.hub-pic .hub-numbers text:nth-child(3n) { fill: var(--text); }
.hub-pic .hub-map path { stroke-width: 0.5; }
.hub-pic .hub-stars { display: block; width: 100%; height: 100%; background: var(--card); fill: var(--accent); }
.hub-pic .hub-stars path:nth-child(3n) { fill: var(--text); }
.stars-bar label { display: inline-flex; align-items: center; gap: 0.5rem; }
.stars-bar label[hidden] { display: none; }
.stars-born { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.35rem; }
.stars-born #stars-born-name { margin-right: 0.15rem; }
.stars-themes { margin: 0.8rem 0 0.4rem; }
/* the weather: the sun and a cloud on the card; on the page the sky drawn
   beside the temperature and the line, the picks in groups, the twins as
   small cards */
.hub-pic .hub-weather { display: block; width: 100%; height: 100%; background: var(--card); }
.hub-pic .hub-weather .sun { fill: var(--accent); stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.hub-pic .hub-weather .cloud { fill: var(--soft); stroke: var(--muted); stroke-width: 1.5; stroke-linejoin: round; }
.hub-pic .hub-weather .rain { stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; }
.weather-bar { min-height: 2.4rem; }
.weather-bar #weather-place { font-weight: 600; }
.weather-form { display: flex; gap: 0.4rem; }
.weather-form input { flex: 1 1 8rem; min-width: 0; }
.weather-now { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr); gap: 0.5rem 1.6rem; align-items: center; margin: 0.6rem 0 1.8rem; }
.weather-sky { align-self: stretch; display: grid; align-items: center; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); padding: 0.4rem; }
.weather-sky-pic { display: block; width: 100%; height: auto; }
.weather-sky:empty { display: none; }
.weather-sky .sun { fill: var(--accent); stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.weather-sky .moon { fill: var(--text); }
.weather-sky .cloud { fill: var(--soft); stroke: var(--muted); stroke-width: 1.6; stroke-linejoin: round; }
.weather-sky .cloud-far { stroke-width: 1.2; }
.weather-sky .rain { stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; }
.weather-sky .snow { stroke: var(--text); stroke-width: 1.4; stroke-linecap: round; fill: none; }
.weather-sky .wind { fill: none; stroke: var(--text); stroke-linecap: round; stroke-linejoin: round; }
.weather-text > p { margin: 0 0 0.5rem; }
.weather-temp { font: 700 3rem/1 var(--serif); letter-spacing: -0.02em; }
.weather-temp:empty { display: none; }
.weather-line { font-size: 1.15rem; line-height: 1.5; text-wrap: pretty; }
.weather-details { color: var(--muted); }
.weather-pick { margin: 1.6rem 0; }
.weather-pick h2, .weather-twins-box h2 { margin: 0 0 0.15rem; }
.weather-why { margin: 0 0 0.7rem; color: var(--muted); }
.weather-row .been-row-year { color: var(--muted); white-space: nowrap; }
.weather-twins { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.7rem; margin: 0 0 1.5rem; }
.weather-twin { display: grid; gap: 0.25rem; padding: 0.8rem 0.95rem; border: 1px solid var(--line); border-radius: 0.8rem; background: var(--card); color: var(--text); text-decoration: none; transition: border-color 0.15s; }
a.weather-twin:hover { border-color: var(--muted); }
.weather-twin-head { display: flex; align-items: center; gap: 0.5rem; }
.weather-glyph { flex: none; width: 1.8rem; height: 1.8rem; }
.weather-glyph .sun { fill: var(--accent); stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.weather-glyph .moon { fill: var(--text); }
.weather-glyph .cloud { fill: var(--soft); stroke: var(--muted); stroke-width: 1.5; stroke-linejoin: round; }
.weather-glyph .rain { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.weather-glyph .snow { fill: var(--text); }
.weather-twin-what { display: flex; align-items: baseline; gap: 0.5rem; }
.weather-twin-temp { font: 700 1.5rem/1 var(--serif); }
@media (max-width: 40rem) { .weather-now { grid-template-columns: minmax(0, 1fr); } .weather-sky { max-width: 18rem; } .weather-temp { font-size: 2.4rem; } }
.roast-form label { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
/* the roast reads as one text: an opening, sections, a verdict */
.roast-text { max-width: 38rem; margin: 2.2rem 0 2.6rem; }
.roast-text h2 { margin: 2rem 0 0.5rem; font: 700 1.35rem/1.2 var(--serif); letter-spacing: -0.01em; }
.roast-text p { font-size: 1.12rem; line-height: 1.65; margin: 0 0 1rem; text-wrap: pretty; hyphens: auto; }
.roast-text .label { margin-bottom: 0.6rem; }
.roast-text .roast-opening { font: 600 1.45rem/1.4 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.roast-text .roast-verdict { margin-top: 2rem; padding: 1rem 0 0; border-top: 2px solid var(--accent); font: 700 1.3rem/1.35 var(--serif); text-wrap: balance; }
.roast-evidence .cu-grid { margin-bottom: 1rem; }
.cu-grid.roast-ranks { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.roast-ranks .cu-rank-name .small { font-weight: 400; }
.roast-bar { display: block; width: 100%; height: 0.3rem; margin-top: 0.25rem; border-radius: 0.2rem; background: var(--soft); fill: var(--accent); }
.roast-wait { display: flex; align-items: center; gap: 0.75rem; margin: 0.8rem 0 1.2rem; color: var(--muted); }
.roast-wait[hidden] { display: none; }
.roast-wait .spinner { flex: none; width: 1.6rem; height: 1.6rem; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
.roast-other { margin-top: 2rem; font: 600 1.1rem/1.4 var(--serif); }
.roast-other + .roast-note { margin-top: 0.6rem; }
.roast-note { margin-top: 2rem; color: var(--muted); }
@media (max-width: 36rem) { .cu-grid.roast-ranks { grid-template-columns: minmax(0, 1fr); } .roast-text .roast-opening { font-size: 1.25rem; } .roast-text p { font-size: 1.05rem; } }
.stars-score { color: var(--accent); letter-spacing: 0.05em; white-space: normal; text-align: right; max-width: 9em; line-height: 1.1; }
.been-chip { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.been-chip[data-level="4"] { background: color-mix(in srgb, var(--accent) 25%, var(--card)); }
.been-chip[data-level="3"] { background: color-mix(in srgb, var(--accent) 16%, var(--card)); }
.been-chip[data-level="2"] { background: color-mix(in srgb, var(--accent) 8%, var(--card)); }

/* the curiosities: facts in a grid, the answer big; the themes as a table */
.cu-line { font-weight: 600; }
.cu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0 0 1rem; }
.cu-fact { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem 1.1rem; min-width: 0; }
.cu-fact.cu-wide { grid-column: 1 / -1; }
.cu-text { min-width: 0; }
.cu-text p { margin: 0; }
.cu-big { font: 700 1.5rem/1.2 var(--serif); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cu-wide .cu-big, .cu-big.cu-long { font-size: 1.15rem; font-weight: 600; }
.cu-sub { margin-top: 0.3rem !important; color: var(--muted); }
.cu-album { flex: none; }
.cu-cover { display: block; width: 4.5rem; aspect-ratio: 1; border-radius: 0.5rem; overflow: hidden; background: var(--soft); }
.cu-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cu-dots { display: inline-flex; gap: 0.25rem; vertical-align: middle; }
.cu-dot { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 1px solid var(--line); background: var(--soft); }
.cu-dot[data-hue="brown"] { background: #7a4b2a; }
.cu-dot[data-hue="red"] { background: #c8343a; }
.cu-dot[data-hue="orange"] { background: #e8832a; }
.cu-dot[data-hue="yellow"] { background: #e3c83a; }
.cu-dot[data-hue="green"] { background: #4a9a4a; }
.cu-dot[data-hue="teal"] { background: #3a9a9a; }
.cu-dot[data-hue="blue"] { background: #3a62c8; }
.cu-dot[data-hue="purple"] { background: #7a4ac8; }
.cu-dot[data-hue="pink"] { background: #e07ab0; }
.cu-dot[data-hue="black"] { background: #1a1a1a; }
.cu-dot[data-hue="white"] { background: #f4f4f4; }
.cu-dot[data-hue="grey"] { background: #8a8a8a; }
.cu-table-box { padding: 0.4rem 1.1rem; margin-bottom: 1rem; overflow-x: auto; }
.cu-table { width: 100%; border-collapse: collapse; }
.cu-table th, .cu-table td { padding: 0.5rem 0.6rem 0.5rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cu-table thead th { color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.cu-table tbody th { font-weight: 600; white-space: nowrap; }
.cu-under { display: block; color: var(--muted); }
.cu-rank-box { padding: 0.9rem 1.1rem; }
.cu-rank-box h3 { margin: 0 0 0.5rem; font: 700 1.05rem/1.25 var(--serif); }
.cu-rank { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.cu-rank li { position: relative; padding: 0.3rem 0 0.4rem; counter-increment: rank; }
.cu-rank-line { display: flex; flex-wrap: wrap; gap: 0 0.6rem; align-items: baseline; padding-left: 1.4rem; }
.cu-rank-line::before { content: counter(rank); flex: none; width: 1.4rem; margin-left: -1.4rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cu-rank-name { flex: 1 1 auto; min-width: 8rem; font-weight: 600; }
.cu-rank-line .small { flex: 0 1 auto; margin-left: auto; text-align: right; }
.cu-track { display: block; margin: 0.25rem 0 0 1.4rem; }
.cu-bar { display: block; max-width: 100%; height: 0.3rem; border-radius: 0.15rem; background: color-mix(in srgb, var(--accent) 60%, var(--line)); }
.cu-shared .cu-rank { columns: 2; column-gap: 2rem; }
.cu-shared .cu-rank li { break-inside: avoid; }
.cu-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cu-asked { grid-template-columns: 2fr 1fr; }
.cu-asked .cu-shared { grid-column: 1; }
@media (max-width: 60rem) { .cu-asked { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 36rem) { .cu-shared .cu-rank { columns: 1; } .cu-two { grid-template-columns: minmax(0, 1fr); } }
.cu-table tr:last-child td, .cu-table tr:last-child th { border-bottom: 0; }
@media (max-width: 60rem) { .cu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .cu-grid { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; } .cu-big { font-size: 1.3rem; } }
.game-guest { margin: -0.4rem 0 1rem; }
/* the day's result shared: the networks in a row, the words to copy */
.game-share { display: grid; gap: 0.35rem; margin: 0.6rem 0 0.2rem; }
.game-share[hidden] { display: none; }
.game-share-label { color: var(--muted); }
.game-share-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.game-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.8rem; margin: 0 0 1.5rem; }
@media (max-width: 52rem) {
  .geo-play { grid-template-columns: minmax(0, 1fr); }
  .geo-side { grid-template-columns: 7rem minmax(0, 1fr); align-items: center; column-gap: 1rem; }
  .geo-side > * { grid-column: 2; }
  .geo-cover { grid-column: 1; grid-row: 1 / span 5; }
  .geo-cover .cover { width: 7rem; height: 7rem; }
}

/* spot the Brit: four covers in a square, the answer told apart */
.brit-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; margin-bottom: 0.8rem; }
.brit-streak { margin: 0; font: 700 1.5rem/1.2 var(--serif); font-variant-numeric: tabular-nums; }
.brit-streak .small { font: inherit; font-size: 0.9rem; color: var(--muted); }
.brit-covers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.brit-tile { display: grid; gap: 0.4rem; min-height: 0; padding: 0; border: 3px solid transparent; border-radius: 0.8rem; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform 0.12s; }
button.brit-tile:hover { transform: scale(1.03); border-color: var(--muted); }
.brit-tile .cover { width: 100%; height: auto; aspect-ratio: 1; border-radius: 0.5rem; }
.brit-tile.brit { border-color: #2e9e5b; }
.brit-tile.wrong { border-color: var(--accent); opacity: 0.8; }
.brit-text { display: block; padding: 0 0.3rem 0.3rem; color: var(--muted); overflow-wrap: anywhere; }
.brit-verdict { margin: 1rem 0 0.4rem; font-weight: 600; }
.brit-verdict.right { color: #2e9e5b; }
.brit-verdict.wrong { color: var(--accent); }
@media (max-width: 40rem) { .brit-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the wheel of an account's last songs: a chart drawn in lines, the songs beside it */
.wheel-chart { margin: 2.2rem 0 2.6rem; }
.wheel-last { color: var(--muted); margin: 0 0 1rem; }
.wheel-svg { display: block; width: 100%; max-width: 34rem; height: auto; margin: 0 0 1.6rem; font-family: var(--sans); }
.wheel-band { fill: var(--line); opacity: 0.35; }
.wheel-face { fill: var(--bg); }
.wheel-day { fill: var(--accent); opacity: 0.06; }
.wheel-rim, .wheel-ring, .wheel-orbit { fill: none; stroke: currentColor; }
.wheel-rim { stroke-width: 1.4; }
.wheel-ring { stroke-width: 0.9; opacity: 0.7; }
.wheel-orbit { stroke-width: 0.5; opacity: 0.16; }
.wheel-cross { stroke: currentColor; stroke-width: 0.6; opacity: 0.3; stroke-dasharray: 3 4; }
.wheel-cusp { stroke: currentColor; stroke-width: 0.7; opacity: 0.45; }
.wheel-cusp.wheel-angle { stroke-width: 1.4; opacity: 0.9; }
.wheel-ray { stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
.wheel-house, .wheel-hour, .wheel-axis { text-anchor: middle; dominant-baseline: central; }
.wheel-house { fill: currentColor; font-size: 12.5px; font-weight: 600; opacity: 0.75; }
.wheel-hour { fill: var(--muted); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.wheel-axis { fill: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.wheel-middle { fill: currentColor; opacity: 0.5; }
.wheel-planet circle { fill: var(--bg); stroke: var(--accent); stroke-width: 1.1; }
.wheel-planet text { fill: currentColor; font-size: 13px; text-anchor: middle; dominant-baseline: central; }
.wheel-sun circle { fill: var(--accent); }
.wheel-sun text { fill: var(--bg); font-size: 14.5px; }
.wheel-songs { list-style: none; margin: 0; padding: 0; }
.wheel-songs li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; gap: 0.2rem 0.8rem; align-items: start; padding: 0.65rem 0; border-top: 1px solid var(--line); }
.wheel-glyph { font-size: 1.25rem; line-height: 1.3; text-align: center; }
.wheel-song { min-width: 0; }
.wheel-song strong { display: block; line-height: 1.35; }
.wheel-song > span { display: block; color: var(--muted); font-size: 0.92rem; line-height: 1.4; }
/* where the song stands: its house named, the sky and the hour under it,
   each on a line of its own, never broken */
.wheel-pos { display: grid; justify-items: end; gap: 0.1rem; font-size: 0.85rem; line-height: 1.4; color: var(--muted); text-align: right; white-space: nowrap; }
.wheel-pos-house { color: var(--text); font-weight: 600; }
.wheel-pos time { font-variant-numeric: tabular-nums; }
/* what the houses say: the reading, then the twelve, those with songs set off */
.wheel-reading { margin-top: 2.2rem; max-width: 46rem; }
.wheel-reading h2 { margin-top: 0; }
.wheel-houses { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.wheel-houses li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.6rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 0.8rem; }
.wheel-houses li.wheel-house-full { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.wheel-house-n { font: 700 1.2rem/1.25 var(--serif); font-variant-numeric: tabular-nums; text-align: center; color: var(--muted); }
.wheel-house-full .wheel-house-n { color: var(--accent); }
.wheel-house-text p { margin: 0; }
.wheel-house-head { line-height: 1.4; margin-bottom: 0.15rem !important; }
.wheel-house-hours { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; margin-left: 0.3rem; }
.wheel-house-songs { margin-left: 0.4rem; font-size: 1.05rem; letter-spacing: 0.1em; }
.wheel-house-text > p:last-child { color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.wheel-note { margin-top: 1.2rem; max-width: 40rem; }
/* the wheel beside the songs when the page is wide enough for both, in
   the app's pane as on the site; the songs' lines wrap on a narrow one */
.wheel-chart { container-type: inline-size; }
@container (min-width: 58rem) {
  .wheel-body { display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .wheel-svg { position: sticky; top: 5rem; margin: 0; max-width: none; }
  .wheel-reading { max-width: none; }
  .wheel-houses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 36rem) {
  .wheel-songs li { grid-template-columns: 1.8rem minmax(0, 1fr); }
  .wheel-pos { grid-column: 2; display: flex; flex-wrap: wrap; gap: 0 0.7rem; justify-items: start; text-align: left; white-space: normal; }
}
}
/* the calendar of the albums heard together: a month of square-ish days,
   a pill with the hour for every session; on a phone the pills shrink to
   dots and the days to what fits */
.cal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin: 0 0 0.8rem; }
.cal-nav { display: flex; align-items: center; gap: 0.3rem; }
.cal-nav button { width: 2.2rem; min-height: 2.2rem; padding: 0; border-radius: 50%; font-size: 1.2rem; line-height: 1; }
.cal-nav strong { min-width: 11rem; text-align: center; font: 700 1.15rem/1.2 var(--serif); }
.cal-zone { display: flex; align-items: center; gap: 0.4rem; }
.cal-zone select { max-width: 13rem; min-height: 2.2rem; padding: 0.2rem 0.5rem; }
.calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; margin-bottom: 1.8rem; }
.cal-weekday { padding: 0 0 0.2rem 0.4rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.cal-day { display: flex; flex-direction: column; gap: 0.2rem; min-height: 4.4rem; min-width: 0; padding: 0.35rem 0.4rem; border-radius: 0.6rem; background: var(--card); border: 1px solid var(--line); }
.cal-empty { background: none; border-color: transparent; }
.cal-past { opacity: 0.55; }
.cal-today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-num { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-today .cal-num { color: var(--accent); font-weight: 700; }
.cal-chip { display: block; width: 100%; min-height: 0; padding: 0.1rem 0.4rem; border: 0; border-radius: 1rem; background: var(--accent); color: var(--on-accent); font-size: 0.72rem; font-weight: 600; line-height: 1.4; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.cal-chip:hover { border: 0; filter: brightness(1.1); }
.cal-chip.cal-over { background: var(--soft); color: var(--muted); font-weight: 400; }
.cal-chip.cal-mine { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent); }
@media (max-width: 40rem) {
  .cal-nav strong { min-width: 8rem; font-size: 1rem; }
  .calendar { gap: 0.2rem; }
  .cal-day { min-height: 3rem; padding: 0.25rem 0.3rem; border-radius: 0.45rem; }
  .cal-chip { width: 0.55rem; height: 0.55rem; padding: 0; margin-left: 0.1rem; font-size: 0; }
}

.together-own { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin: -0.6rem 0 1.6rem; }
.own-dialog { width: min(32rem, calc(100vw - 2rem)); padding: 1.6rem; }
.own-dialog h2 { margin-right: 2rem; }
.own-dialog { overflow-x: hidden; }
.own-dialog .give-field { min-width: 0; }
.own-results { list-style: none; margin: 0 0 0.6rem; padding: 0; max-height: 14rem; overflow-y: auto; border: 1px solid var(--line); border-radius: 0.5rem; }
.own-results li + li { border-top: 1px solid var(--line); }
.own-result { display: flex; align-items: center; gap: 0.6rem; width: 100%; min-height: 0; padding: 0.35rem 0.5rem; border: 0; border-radius: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.own-result:hover { border: 0; background: var(--soft); }
.own-result.chosen { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.own-result .cover { width: 2.2rem; height: 2.2rem; }
.own-result .what strong { font-size: 0.92rem; }
.own-more { padding: 0.3rem 0.6rem; color: var(--muted); }
.own-chosen { margin: 0 0 0.8rem; font-weight: 600; }
.own-dialog .admin-form > .row { margin-top: 1.2rem; }
.own-dialog select, .own-dialog input { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; font: inherit; color: var(--text); padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--card); text-overflow: ellipsis; }

/* the chat of a session: the album and its progress held at the top, the
   messages as bubbles, one's own on the right, the field at the foot */
.chat-top { position: sticky; top: 0; z-index: 2; margin: 0 -0.2rem 0.8rem; padding: 0.6rem 0.2rem 0.7rem; background: var(--bg); border-bottom: 1px solid var(--line); }
.chat-head { display: flex; align-items: center; gap: 0.9rem; }
.chat-head .cover { width: 3.4rem; height: 3.4rem; border-radius: 0.5rem; }
.chat-head-text { flex: 1; min-width: 0; }
.chat-head h1 { margin: 0; font-size: 1.25rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head-text p { margin: 0.1rem 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-live { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.6rem; border-radius: 1rem; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 0.78rem; font-weight: 600; }
.chat-live i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); animation: chat-pulse 1.4s ease-in-out infinite; }
@keyframes chat-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .chat-live i { animation: none; } }
.chat-progress { margin-top: 0.65rem; }
.chat-bar { position: relative; height: 0.4rem; border-radius: 1rem; background: var(--soft); overflow: hidden; }
.chat-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 1rem; transition: width 1s linear; }
.chat-tick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--bg); }
.chat-track { display: flex; justify-content: space-between; gap: 0.8rem; margin: 0.35rem 0 0; font-variant-numeric: tabular-nums; }
.chat-track span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-track span:last-child { flex: none; color: var(--muted); }
.chat-log { display: flex; flex-direction: column; gap: 0.7rem; height: clamp(16rem, calc(100vh - 21rem), 40rem); overflow-y: auto; padding: 1rem; border: 1px solid var(--line); border-radius: 0.9rem; background: var(--card); scroll-behavior: smooth; }
.chat-empty { margin: -12rem 0 12rem; text-align: center; color: var(--muted); pointer-events: none; }
.chat-divider { align-self: center; padding: 0.15rem 0.8rem; border-radius: 1rem; background: var(--soft); color: var(--muted); font-size: 0.72rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-msg { display: flex; align-items: flex-end; gap: 0.5rem; max-width: 85%; }
.chat-msg.cont { margin-top: -0.4rem; }
.chat-msg.cont .chat-face { visibility: hidden; }
.chat-msg.mine { flex-direction: row-reverse; align-self: flex-end; }
.chat-face { flex: none; width: 2.25rem; height: 2.25rem; }
.chat-bubble { display: grid; gap: 0.15rem; padding: 0.45rem 0.75rem 0.35rem; border-radius: 1rem 1rem 1rem 0.3rem; background: var(--soft); min-width: 0; }
.chat-msg.mine .chat-bubble { border-radius: 1rem 1rem 0.3rem 1rem; background: color-mix(in srgb, var(--accent) 24%, var(--soft)); }
.chat-msg.pending .chat-bubble { opacity: 0.65; }
.chat-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-meta { display: flex; align-items: center; justify-content: flex-end; gap: 0.3rem; color: var(--muted); font-size: 0.7rem; }
.chat-del { min-height: 0; padding: 0 0.25rem; border: 0; border-radius: 0.3rem; background: none; color: var(--muted); font-size: 0.95rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.chat-msg:hover .chat-del, .chat-del:focus-visible { opacity: 1; }
.chat-del:hover { border: 0; color: var(--accent); }
@media (hover: none) { .chat-del { opacity: 0.7; } }
.chat-why { margin: 0.1rem 0 0; color: var(--accent); }
.chat-form { display: flex; gap: 0.5rem; margin: 0.8rem 0 0.4rem; }
.chat-field { position: relative; flex: 1; min-width: 0; }
.chat-field input { width: 100%; box-sizing: border-box; font: inherit; color: var(--text); padding: 0.65rem 3.6rem 0.65rem 1rem; border: 1px solid var(--line); border-radius: 2rem; background: var(--card); }
.chat-count { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }
.chat-send { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; padding: 0; border-radius: 50%; }
.chat-closed, .chat-rules { margin: 0.4rem 0 0; }
@media (max-width: 40rem) {
  .chat-msg { max-width: 94%; }
  .chat-log { height: clamp(14rem, calc(100vh - 19rem), 40rem); padding: 0.7rem; }
  .chat-head h1 { font-size: 1.1rem; }
}

/* the sessions beside the one shown whole: a line each */
.session-lines { list-style: none; margin: 1rem 0 0; padding: 0; }
.session-line { display: flex; align-items: center; gap: 0.8rem; padding: 0.4rem 0; border-top: 1px solid var(--line); }
.session-pick { flex: 1; display: flex; align-items: center; gap: 0.8rem; min-width: 0; min-height: 0; padding: 0.2rem 0; border: 0; border-radius: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.session-pick:hover { border: 0; }
.session-pick:hover strong { color: var(--accent); }
.session-pick .cover { width: 2.8rem; height: 2.8rem; }
.session-pick .what strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-pick .what span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* listening together: a card per session with its countdown, the bar of
   the album and its tracks while it plays */
.together { display: grid; gap: 1rem; }
.session { display: grid; gap: 0.9rem; padding: 1rem 1.1rem; }
.session-head { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.session .cover { width: 5.5rem; height: 5.5rem; border-radius: 0.5rem; }
.session-title { font: 700 1.2rem/1.25 var(--serif); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.session-title:hover { text-decoration: underline; }
.session-artist { margin: 0.05rem 0 0.35rem; color: var(--muted); }
.session-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.9rem; margin: 0; }
.fact { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--muted); }
.ic { display: inline-flex; flex: none; }
.session-mid { padding: 0.8rem 0 0.2rem; border-top: 1px solid var(--line); }
.session-count { margin: 0; font: 700 1.7rem/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.session-state { margin: 0.2rem 0 0; }
.session-bar { height: 0.3rem; border-radius: 1rem; background: var(--soft); overflow: hidden; margin: 0.6rem 0 0.4rem; }
.session-bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--accent); transition: width 1s linear; }
.session-fold { margin: 0.3rem 0 0; }
.session-fold > summary { cursor: pointer; font-size: 0.85rem; color: var(--muted); }
.session-tracks { margin: 0.4rem 0 0; padding-left: 1.6rem; }
.session-tracks li { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.1rem 0; font-size: 0.9rem; color: var(--muted); }
.session-tracks li.now { color: var(--text); font-weight: 600; }
.session-tracks li.done { opacity: 0.55; }
.session-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.session-actions .button, .session-actions .primary { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; min-height: 2.4rem; padding: 0.3rem 1rem; text-decoration: none; }
.session-actions .danger-text { margin-left: auto; color: var(--muted); }
.session-actions .danger-text:hover { color: var(--accent); }
.session-actions .primary { flex: 1 1 8rem; justify-content: center; }
.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); }
.icon-link:hover { color: var(--text); border-color: var(--muted); }
.session-line .small-button { display: inline-flex; align-items: center; gap: 0.35rem; }
.together-past { margin-top: 2.5rem; }
.session-past { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 0.9rem; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
@media (max-width: 40rem) {
  .session-head { grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.8rem; }
  .session .cover { width: 4.2rem; height: 4.2rem; }
  .session-count { font-size: 1.4rem; }
  .session-actions .button, .session-actions .primary { flex: 1 1 auto; justify-content: center; padding: 0.3rem 0.7rem; }
  .session-actions .danger-text { margin-left: 0; }
  .session-past { grid-template-columns: auto minmax(0, 1fr); }
  .session-past > .small { grid-column: 2; }
}
.setting-text .is-on::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.4rem; border-radius: 50%; background: #2e9e5b; vertical-align: 0.05em; }
.half-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 56rem) { .half-cols { grid-template-columns: minmax(0, 1fr); } } /* one under the other where two would be squeezed */
.poster-head { display: grid; gap: 0.6rem; margin-bottom: 0.9rem; }
.poster-of { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.poster-of .label { margin: 0; white-space: nowrap; }
.poster-of select { flex: 1; min-width: 0; min-height: 2.4rem; padding: 0.35rem 0.6rem; }
/* the kinds two by two, every button as high as the others and its name
   on one line, however wide the card */
.poster-kinds { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.poster-kinds button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poster-head #poster-text { margin: 0; }
.poster-when { margin: 0; }
.poster-when select { min-height: 2.4rem; padding: 0.35rem 0.6rem; }
.poster-get-row { margin-top: 0.9rem; }
.poster-get-row #poster-get { margin-left: auto; }
.poster-look h2 { margin-top: 0; }
.poster-look .label { margin: 1.1rem 0 0.4rem; }
.poster-look select { width: 100%; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); gap: 0.6rem; margin-top: 0.7rem; }
.swatches label { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--muted); cursor: pointer; }
.swatches input[type="color"] { width: 100%; height: 2.4rem; min-height: 0; padding: 0.15rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--card); cursor: pointer; }
.look-border { margin: 0; }
.poster-look .check { display: flex; gap: 0.6rem; align-items: center; margin: 0.45rem 0; font-size: 0.95rem; color: var(--text); }
.poster-look .check input { width: 1.1rem; height: 1.1rem; min-height: 0; padding: 0; accent-color: var(--accent); }
@media (max-width: 60rem) { .st-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .st-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-genres { grid-template-columns: 1fr; justify-items: center; } }

/* the library: the tabs with room beneath them */
.library .mine-tabs { margin: 1.2rem 0 1.4rem; }
.badge-grid { list-style: none; margin: 0; padding: 0.2rem 1rem 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 1rem 0.6rem; text-align: center; }
.badge { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0; border: 0; background: none; min-height: 0; border-radius: 0.6rem; color: var(--text); font: inherit; cursor: pointer; }
.badge:hover { border: 0; }
.badge-pic { position: relative; width: 100%; max-width: 5rem; }
.badge img { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; transition: transform 0.15s; }
.badge:hover img { transform: scale(1.06); }
.badge.locked img { filter: grayscale(1); opacity: 0.3; }
.badge .badge-times { position: absolute; right: -0.2rem; bottom: -0.2rem; min-width: 1.5rem; padding: 0.1rem 0.4rem; border-radius: 1rem; background: var(--accent); color: #fff; font-size: 0.74rem; font-weight: 700; line-height: 1.3; box-shadow: 0 1px 3px rgb(0 0 0 / 0.4); }
.badge strong { font-size: 0.8rem; line-height: 1.25; }
.badge.locked strong { color: var(--muted); font-weight: 500; }
.badge span { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.badge-dialog { text-align: center; }
.badge-dialog img { display: block; width: 10rem; height: 10rem; margin: 0 auto 1rem; border-radius: 50%; }
.badge-dialog.locked img { filter: grayscale(1); opacity: 0.4; }
.badge-dialog h2 { margin-bottom: 0.4rem; }
.badge-dialog .badge-rarity { margin: 0 0 0.8rem; font-size: 0.9rem; color: var(--rar, var(--muted)); font-weight: 600; }
.badge-dialog[data-rarity="common"] { --rar: var(--rar-common); }
.badge-dialog[data-rarity="uncommon"] { --rar: var(--rar-uncommon); }
.badge-dialog[data-rarity="rare"] { --rar: var(--rar-rare); }
.badge-dialog[data-rarity="legendary"] { --rar: var(--rar-legendary); }
.badge-dialog:not(.locked) img { box-shadow: 0 0 0 4px var(--card), 0 0 0 7px var(--rar, var(--line)); }
.badge-dialog .row { justify-content: center; }
/* the tombola, a page of its own */
.lounge-games .giveaway { margin-top: 0; margin-bottom: 1.5rem; }

.cert-card { margin-top: 0; }
.cert-card h2 { margin-top: 0; }
.st-genres.empty { display: block; }

.poster-mark { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--muted); cursor: pointer; }
.poster-mark input { width: auto; margin: 0; }

/* the Tidal page */
.tidal-card { max-width: 40rem; margin-bottom: 1.5rem; }
.tidal-can { padding-left: 1.2rem; margin: 0 0 1.2rem; }
.tidal-can li { margin: 0.3rem 0; }
.tidal-status p { margin-bottom: 0.6rem; }
.tidal-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #2e8b57; margin-right: 0.2rem; }

/* the admin dashboard */
/* the dashboard: twelve columns, a card so many of them wide */
.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.9rem; margin-top: 1rem; }
.dash-card { min-width: 0; margin: 0; padding: 1rem 1.1rem; }
.dash-12 { grid-column: span 12; }
.dash-8 { grid-column: span 8; }
.dash-6 { grid-column: span 6; }
.dash-4 { grid-column: span 4; }
@media (max-width: 64rem) { .dash-8, .dash-4 { grid-column: span 12; } }
@media (max-width: 52rem) { .dash-6 { grid-column: span 12; } }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.7rem; min-height: 1.8rem; }
.dash-head h3 { margin: 0; }
.dash-head .row { margin: 0; gap: 0.4rem; flex-wrap: nowrap; }
.dash-figures { grid-template-columns: repeat(auto-fill, minmax(6.8rem, 1fr)); }
.dash-note { margin: 0.5rem 0 0; font-size: 0.78rem; color: var(--muted); }
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li, .dash-row { display: flex; gap: 0.8rem; align-items: center; padding: 0.5rem 0; border-top: 1px solid var(--line); }
.dash-list li:first-child, .dash-row { border-top: 0; }
.dash-thumb { flex: none; display: block; width: 2.8rem; height: 2.8rem; border-radius: 0.4rem; object-fit: cover; background: var(--soft); }
.dash-thumb.cover { width: 2.8rem; height: 2.8rem; }
.dash-what { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.dash-what strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-what > span { color: var(--muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-what .pill { justify-self: start; }
.dash-actions { flex: none; margin: 0; gap: 0.4rem; flex-wrap: nowrap; }
.dash-scroll { max-height: 22rem; overflow-y: auto; }
.dash-block { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.dash-block h3 { margin: 0 0 0.5rem; font: 700 1.05rem/1.3 var(--serif); text-transform: none; letter-spacing: 0; color: var(--text); }
@media (max-width: 40rem) {
  .dash-list li { flex-wrap: wrap; }
  .dash-actions { width: 100%; flex-wrap: wrap; }
}

/* the dashboard's dialog, for a form, a tombola, the badges, a mail */
.admin-dialog { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; padding: 1.6rem 1.6rem 1.4rem; }
.admin-dialog.wide { width: min(60rem, calc(100vw - 2rem)); }
.admin-dialog h2 { margin: 0 2rem 1rem 0; font-size: 1.4rem; }
.admin-dialog .card { padding: 0; border: 0; background: none; box-shadow: none; }
.admin-dialog .admin-form { max-width: none; }
.admin-dialog label { display: grid; }
.dialog-x { position: absolute; top: 0.7rem; right: 0.7rem; min-height: 0; padding: 0.1rem 0.6rem; border: 0; background: none; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.dialog-x:hover { border: 0; color: var(--text); }
.admin-pagebars > li > span:first-child { font: 0.82rem var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-trend .days-head { margin-bottom: 0.6rem; }
.admin-trend h3 { margin: 0; }
.admin-trend .period-pick select { min-width: 7rem; }
.admin-trend-figures dd { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.admin-delta { font: 600 0.78rem/1 var(--sans); padding: 0.15rem 0.4rem; border-radius: 1rem; background: var(--soft); color: var(--muted); }
.admin-delta.up { color: #7ed69a; background: rgb(126 214 154 / 0.14); }
.admin-delta.down { color: var(--accent); background: rgb(255 111 87 / 0.14); }
.admin-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; }
.admin-fold > summary::-webkit-details-marker { display: none; }
.admin-fold > summary .small { text-transform: none; letter-spacing: 0; font-weight: 400; font-variant-numeric: tabular-nums; }
.admin-fold[open] > summary { margin-bottom: 0.8rem; }
.admin-badge-grid { padding: 0; grid-template-columns: repeat(auto-fit, minmax(4.6rem, 1fr)); grid-auto-flow: dense; gap: 0.5rem 0.4rem; }
.admin-badge-grid .badge { cursor: default; }
.admin-badge-grid .badge-pic { max-width: 4rem; }
.admin-badge-grid .badge strong { font-size: 0.72rem; }
.admin-card h3 { margin: 0 0 0.8rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-family: var(--sans); }
.admin-card .admin-figures { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.9rem 1rem; margin: 0; }
.admin-card .admin-figures div { border-top: 0; padding: 0; }
.admin-figures-small dd { font-size: 1.3rem; }
.admin-visits .admin-chart { margin-top: 0.8rem; }
.admin-axis { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); margin: 0.2rem 0 0.6rem; }
.admin-listbars { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.admin-listbars li { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.6rem; font-size: 0.9rem; }
.admin-listbar { grid-column: 1 / -1; grid-row: 2; height: 0.45rem; border-radius: 0.25rem; background: linear-gradient(to right, var(--accent) calc(var(--share) * 100%), var(--line) 0); }

/* the organiser's mail: a row a mail, the subject with the sender and the
   day beneath, a dot for one unread; a click opens it */
.admin-mails { list-style: none; margin: 1rem 0 0; padding: 0; }
.admin-mails li { border-bottom: 1px solid var(--line); }
.admin-mail-row { display: grid; grid-template-columns: 0.6rem minmax(0, 1fr) auto; grid-template-areas: "dot subject when" "dot who who"; column-gap: 0.8rem; row-gap: 0.1rem; align-items: center; width: 100%; min-height: 0; padding: 0.7rem 0; border: 0; border-radius: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.admin-mail-row:hover { border: 0; }
.admin-mail-row:hover .admin-mail-subject { color: var(--accent); }
.admin-mail-dot { grid-area: dot; width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 1px solid var(--line); }
.admin-mails li.unread .admin-mail-dot { background: var(--accent); border-color: var(--accent); }
.admin-mail-subject { grid-area: subject; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-mails li.unread .admin-mail-subject { font-weight: 700; }
.admin-mail-when { grid-area: when; white-space: nowrap; }
.admin-mail-who { grid-area: who; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-mail-text { margin: 0 0 0.8rem; max-width: 70ch; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 40rem) {
  .admin-mail-row { grid-template-columns: 0.6rem minmax(0, 1fr); grid-template-areas: "dot subject" "dot who" "dot when"; }
  .admin-mail-subject { white-space: normal; }
}

/* past tombolas: on the tombola page, and for the organiser */
.tombola-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; align-items: start; }
.tombola-grid .giveaway { margin: 0; }
@media (max-width: 60rem) { .tombola-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .tombola-grid { grid-template-columns: minmax(0, 1fr); } }
.tombola-past { margin-top: 2.5rem; }
.past-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.8rem; }
.past-item { display: flex; gap: 1rem; align-items: center; padding: 0.8rem 1rem; }
.past-item > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.past-pic { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 0.5rem; overflow: hidden; background: var(--line); }
.past-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.past-result { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.pill-done { background: color-mix(in srgb, #2e8b57 18%, transparent); color: #2e8b57; }
.admin-past .tombola-card { grid-template-columns: 6rem 1fr; }
.admin-past .past-pic { width: 6rem; height: 6rem; }
.admin-past .admin-head h3 { margin: 0; font: 700 1.15rem/1.2 var(--serif); text-transform: none; letter-spacing: 0; color: var(--text); }

/* the foot of every page: a dark band across the whole width (its colour
   drawn out to the sides, so nothing scrolls sideways), the site, its
   links, and a last line */
:root { --foot-bg: #0d0c0b; --foot-text: #f1eee8; --foot-muted: #a8a399; --foot-line: #2a2825; }
.site-footer {
  display: block;
  margin: 6rem 0 -4rem;
  padding: 3rem 0 1.5rem;
  background: var(--foot-bg);
  box-shadow: 0 0 0 100vmax var(--foot-bg);
  clip-path: inset(0 -100vmax);
  color: var(--foot-muted);
  font-size: 0.92rem;
}
.footer-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 2.5rem; }
.footer-brand .mark { color: var(--foot-text); text-decoration: none; }
.footer-brand .mark b { color: var(--foot-text); }
.footer-brand .mark span { color: color-mix(in srgb, var(--accent) 55%, white); }
.footer-brand p { margin: 0.8rem 0 0; max-width: 22rem; line-height: 1.5; }
.footer-head { margin: 0 0 0.7rem; color: var(--foot-text); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.footer-col { display: flex; flex-direction: column; gap: 0.45rem; }
.footer-col a { color: var(--foot-muted); text-decoration: none; }
.footer-col a:hover { color: var(--foot-text); text-decoration: underline; }
#footer-lists { display: contents; }
.footer-bottom { margin: 2.5rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--foot-line); font-size: 0.8rem; }
@media (max-width: 56rem) {
  .site-footer { margin-bottom: -3rem; }
  .footer-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 30rem) { .footer-inner { grid-template-columns: minmax(0, 1fr); } }

/* the sorting of the list, and the buttons that are an icon */
.sort-row { flex-wrap: nowrap; gap: 0.4rem; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; padding: 0; line-height: 0; color: var(--muted); }
.icon-button svg { display: block; }
.icon-button:hover { color: var(--text); }
.group-head { display: flex; align-items: center; gap: 0.6rem; }
.group-count { margin-left: auto; font: 500 0.9rem/1 var(--sans); color: var(--muted); }

/* the list from ListenBrainz */
.lb-form .row { flex-wrap: nowrap; }
.lb-form input { flex: 1; min-width: 0; }
#listens .tools .check { display: flex; gap: 0.5rem; align-items: center; }
#lb-error { color: var(--accent); font-weight: 600; }
#lb-shown { margin: 0.9rem 0 0.2rem; }
.lb-list li > .cover-link, .lb-list li > .cover { margin: 0.6rem 0; }
.lb-list .lb-on { color: var(--accent); font-size: 0.85rem; text-decoration: none; }
.lb-list .lb-plays { color: var(--muted); font-size: 0.85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* the pages of the services */
.svc-tagline { margin: -0.4rem 0 1.5rem; }
.svc-connect .tidal-can { list-style: none; padding: 0; }
.svc-connect .tidal-can li { position: relative; padding-left: 1.6rem; margin: 0.5rem 0; }
.svc-connect .tidal-can li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }
.svc-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1.5rem; align-items: start; margin-bottom: 1.5rem; }
.svc-state p { margin: 0 0 0.3rem; }
.svc-title { font-size: 1.05rem; }
.svc-buttons { margin: 0; justify-content: flex-end; }
.svc-figures { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 0.8rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.svc-figures div { display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 0; }
.svc-figures dd { margin: 0; font: 700 1.6rem/1.15 var(--serif); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.svc-figures div:last-child dd { font-size: 1.1rem; line-height: 1.8; }
.svc-figures dt { color: var(--muted); font-size: 0.85rem; }
.svc-jobs { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; align-items: stretch; }
.svc-jobs .card { display: flex; flex-direction: column; }
.svc-jobs .card > :last-child { margin-top: auto; }
.shelf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem 1.5rem; margin-bottom: 1rem; }
.shelf-head h2 { margin: 0 0 0.2rem; }
.shelf-head p { margin: 0; }
/* the albums as covers, edge to edge */
.cover-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0; border-radius: 0.8rem; overflow: hidden; }
.cover-grid:empty { display: none; }
.tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; color: #fff; text-decoration: none; background: hsl(var(--hue, 20) 35% 42%); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s; }
.tile-initial { position: absolute; inset: 0; display: grid; place-items: center; font: 700 3.2rem/1 var(--serif); color: rgb(255 255 255 / 0.55); }
.tile-text { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 0.05rem; padding: 2.2rem 0.65rem 0.55rem; background: linear-gradient(transparent, rgb(0 0 0 / 0.78)); font-size: 0.8rem; line-height: 1.25; }
.tile-text strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.85; }
.tile-text .tile-note { opacity: 0.7; font-variant-numeric: tabular-nums; }
.tile-badge { position: absolute; top: 0.5rem; left: 0.5rem; padding: 0.15rem 0.45rem; border-radius: 0.3rem; background: var(--accent); color: var(--on-accent); font-size: 0.7rem; font-weight: 700; }
a.tile:hover img, a.tile:focus-visible img { transform: scale(1.04); }
@media (max-width: 30rem) { .cover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 56rem) { .svc-jobs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) {
  .svc-status { grid-template-columns: minmax(0, 1fr); }
  .svc-buttons { justify-content: flex-start; }
  .svc-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the stats: what is counted */
.stores-card { max-width: 40rem; }
@media (max-width: 30rem) { .stores-form { grid-template-columns: minmax(0, 1fr); } .stores-form .store-example { grid-column: 1; } }

/* the settings: one page of tabs */
.settings-head h1 { margin-bottom: 0.8rem; }
.tabs { display: flex; gap: 1.6rem; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin-bottom: 1.8rem; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; padding: 0.55rem 0 0.65rem; color: var(--muted); text-decoration: none; white-space: nowrap; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current] { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px var(--accent); }
/* the tab names the page: the pages' own titles step back */
.in-settings main > section > h1, .in-settings #job-kicker { display: none; }
.in-settings main > section { padding-top: 0; }
.in-settings #job.narrow { max-width: none; }
.settings-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem; align-items: start; }
.settings-cards .card h2 { margin-top: 0; font-size: 1.15rem; }
.settings-cards .row { margin-bottom: 0; }

/* phones */
@media (max-width: 40rem) {
  header { padding: 0.9rem 0 0; }
  h1 { font-size: 1.75rem; margin-top: 1.5rem; }
  .settings-head h1 { margin-top: 1.5rem; }
  .tabs { gap: 1.2rem; margin: 0 -1rem 1.4rem; padding: 0 1rem; }
  /* the filters fit one row */
  .filter button { flex: 1; padding: 0.45rem 0.4rem; font-size: 0.88rem; white-space: nowrap; }
  /* the stats: two figures a row, the fifth across */
  .st-figures { gap: 0.6rem; margin: 1rem 0 1.4rem; }
  .st-figure { padding: 0.8rem 0.9rem; }
  .st-figure .time-big { font-size: 1.6rem; }
  .st-figure:nth-child(5):last-child { grid-column: 1 / -1; }
  .st-controls { flex-direction: column; align-items: stretch; }
  .period-pick { margin-left: 0; justify-content: space-between; }
}

/* the page fills the window at least, so that on a short page the foot
   sits at the bottom and not halfway up */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > main { flex: 1 0 auto; }

/* the head of every page: a band across the whole width like the foot,
   its colour and its line drawn out to the sides, the content in the
   page's width; on a wide screen it stays at the top while the page
   scrolls, and what sticks below it keeps clear of it */
body > header {
  position: relative;
  z-index: 5;
  border-bottom: 0;
}
/* the band is painted behind the head, not by it: clipping the head
   itself would cut off its menus, which open below it */
body > header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--card);
  box-shadow: 0 0 0 100vmax var(--card), 0 1px 0 100vmax var(--line);
  clip-path: inset(0 -100vmax -1px);
  pointer-events: none;
}
@media (min-width: 56.01rem) {
  :root { --head-h: 4.5rem; }
  html { scroll-padding-top: var(--head-h); }
  body > header { position: sticky; top: 0; height: var(--head-h); padding-top: 0; padding-bottom: 0; flex-wrap: nowrap; }
  #notice { top: calc(var(--head-h) + 0.75rem); }
  .tools { top: var(--head-h); }
  .side { top: calc(var(--head-h) + 1.25rem); }
  .post-aside, .st-posters { top: calc(var(--head-h) + 1rem); }
}

/* the settings: rows divided by hairlines, an icon, the setting and what
   it is, and on the right what to do; a row that leads on is a button
   itself, with an arrow; no cards, no backgrounds */
.settings-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3.5rem; align-items: start; }
.setting-head { margin: 2rem 0 0.4rem; font: 600 0.75rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.settings-cols > div > .setting-head:first-child, .settings-page > .setting-head:first-child { margin-top: 0.6rem; }
.settings { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.settings > li { border-bottom: 1px solid var(--line); }
.setting { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr) auto; gap: 0.4rem 1rem; align-items: center; padding: 0.95rem 0; }
.setting-icon { width: 1.2rem; height: 1.2rem; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; align-self: start; margin-top: 0.1rem; }
.setting-text { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.setting-label { font-weight: 600; color: var(--text); }
.setting-text > span:not(.setting-label), .setting-text .store-example { font-size: 0.86rem; color: var(--muted); }
.setting-text .is-on { color: var(--text); }
.setting-act { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: flex-end; }
.setting-act select { max-width: 15rem; }
.setting-act .code { font-size: 0.85rem; }
.button-icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; margin-right: 0.35rem; }
/* a row that leads on: all of it is the button */
.setting-link { width: calc(100% + 1rem); margin: 0 -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; min-height: 0; border: 0; border-radius: 0.5rem; background: none; font: inherit; color: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.setting-link:hover, .setting-link:focus-visible { background: var(--soft); }
.setting-go { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--muted); font-size: 0.9rem; }
.setting-link:hover .setting-go { color: var(--text); }
.setting-chev { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.setting-sub { padding-left: 1.6rem; }
.setting-link.setting-sub { padding-left: 2.1rem; }
.setting-inline { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.3rem; font-size: 0.86rem; color: var(--muted); }
.setting-inline select { min-height: 2rem; padding: 0.1rem 0.4rem; font-size: 0.86rem; }
.store-example { font-family: var(--mono); overflow-wrap: anywhere; }
.setting-note { margin-top: 0.7rem; }
.setting-under { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.55rem; }
.setting-under .code { font-size: 0.95rem; }
.setting-link, .chosen-list strong { color: var(--text); }
/* list and hours */
#contract { margin-top: 1rem; max-width: 44rem; }
#job .lead { max-width: 44rem; }
.progress-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.progress-head .label { margin: 0; }
.list-name-row { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; }
.list-post { display: inline-flex; align-items: center; color: var(--muted); }
.list-post:hover { color: var(--accent); }
.list-post[hidden] { display: none; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; min-height: 0; padding: 0; border-radius: 50%; color: var(--muted); }
.icon-button:hover { color: var(--text); }
.list-edit { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 0; padding: 0.1rem 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 0.85rem; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.list-edit:hover { border: 0; filter: brightness(1.15); }
.progress-head { flex-wrap: wrap; row-gap: 0.2rem; }
.job-dialog { width: min(44rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; padding: 1.6rem; }
.job-dialog #job-kicker { display: none; }
.job-dialog h1 { margin: 0 2rem 0.4rem 0; font-size: 1.6rem; }
.job-dialog .lead { margin-bottom: 1rem; }
#contract .row { margin-top: 1.6rem; }
.chosen-list { display: flex; flex-direction: column; gap: 0.1rem; }
.chosen-list strong { font: 600 1.25rem/1.25 var(--serif); }
.chosen-list span { font-size: 0.86rem; color: var(--muted); }
#list-change .setting-label, #hours-label { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 0.7rem; margin: 0.3rem 0 0.2rem; }
.stepper button { width: 2.6rem; height: 2.6rem; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.35rem; line-height: 1; }
.stepper output { min-width: 2ch; text-align: center; font: 700 2.4rem/1 var(--serif); }
#hours-unit { color: var(--muted); }
#hours-week { font-size: 0.9rem; color: var(--muted); }
.lb-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
dialog label input { font: inherit; padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--bg); color: var(--text); }
.list-dialog { width: min(34rem, calc(100vw - 2rem)); }
.list-dialog .combo-options { position: static; max-height: min(26rem, 55vh); margin-top: 0.5rem; padding: 0; border: 0; box-shadow: none; background: none; }
@media (max-width: 60rem) {
  .settings-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .setting { grid-template-columns: 1.3rem minmax(0, 1fr); }
  .setting-act { grid-column: 2; justify-content: flex-start; }
  .setting-link { grid-template-columns: 1.3rem minmax(0, 1fr) auto; }
}
/* the page of Tidal in the same rows */
.setting-can { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.86rem; color: var(--muted); }
.setting-can li { margin: 0.15rem 0; }
.settings-next { margin-top: 1.5rem; }
.setting-notice { margin: 1.2rem 0; padding: 0.4rem 0 0.4rem 1rem; border-left: 3px solid var(--accent); }
.setting-notice p { margin: 0 0 0.5rem; }
.setting-notice progress { width: 100%; }
/* a top list: places, covers, the album and what it is ranked by */
.top-entries { list-style: none; margin: 1.5rem 0; padding: 0; border-top: 1px solid var(--line); max-width: 50rem; }
.top-entries li { display: grid; grid-template-columns: 2rem auto minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.top-rank { font: 700 1.1rem/1 var(--serif); color: var(--muted); text-align: right; }
.top-what { display: flex; flex-direction: column; min-width: 0; }
.top-what strong a { color: inherit; text-decoration: none; }
.top-what strong a:hover { text-decoration: underline; }
.top-what span { font-size: 0.88rem; color: var(--muted); }
.top-value { font-size: 0.88rem; color: var(--muted); white-space: nowrap; }
.finished { font-size: 0.9rem; }

/* beside the list: what folds, summed up in its summary */
.side-fold > summary { list-style: none; cursor: pointer; display: grid; gap: 0.2rem; }
.side-fold > summary::-webkit-details-marker { display: none; }
.side-fold > summary .figure { margin: 0.1rem 0 0.4rem; }
#fresh > summary { font-weight: 600; }
#fresh > summary span { display: none; }
@media (max-width: 56rem) {
  .side { gap: 0.75rem; }
  .side .card { padding: 0.85rem 1rem; }
  .side-fold > summary { position: relative; padding-right: 1.6rem; }
  .side-fold > summary::after { content: ""; position: absolute; right: 0.1rem; top: 0.35rem; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s; }
  .side-fold[open] > summary::after { transform: rotate(225deg); top: 0.6rem; }
  .side-fold[open] > summary { margin-bottom: 0.6rem; }
  #fresh > summary span { display: inline; }
  #progress-card .figure strong { font-size: 1.6rem; }
  /* the clock in one line: the time, and the button */
  .clock { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 0.8rem; }
  .clock .label { grid-column: 1 / -1; }
  .clock .figure { margin: 0.1rem 0; }
  .clock .figure strong { font-size: 1.8rem; }
  .clock .small { grid-column: 1 / -1; margin: 0.2rem 0 0; }
  .clock .big { grid-column: 2; grid-row: 2; width: auto; margin: 0; min-width: 6rem; }
  .clock #plan-end { grid-column: 1 / -1; margin-top: 0.7rem; }
}
.side-fold > summary progress { margin: 0.1rem 0 0; }

.lf-ticked { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.15rem; font-size: 0.9rem; }

/* an album's tracks and the albums like it, as Tidal has them, on the album's page and in the app */
.album-disc { font-size: 0.95rem; margin: 1rem 0 0.4rem; color: var(--muted); }
.album-tracks-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.album-tracks-head h2 { margin-right: auto; }
#al-translate[aria-pressed="true"] { color: var(--accent); }
.album-track-english { display: none; font-size: 0.9rem; color: var(--muted); }
.album-tracks-wrap.english .album-track-english, #al-tracks.english .album-track-english { display: block; }
.album-tracks { list-style: none; padding: 0; margin: 0 0 0.6rem; }
.album-tracks li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto; gap: 0.6rem; align-items: baseline; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.track-stars { display: inline-flex; align-items: baseline; gap: 0; white-space: nowrap; }
.track-star { min-height: 0; padding: 0 0.1rem; border: 0; background: none; font-size: 1.05rem; line-height: 1; color: var(--accent); cursor: pointer; }
.track-star:hover:not(:disabled) { transform: scale(1.15); }
.track-star:disabled { cursor: default; opacity: 0.7; }
.track-avg { margin-left: 0.4rem; color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .album-tracks li { grid-template-columns: 2rem minmax(0, 1fr) auto; }
  .track-stars { grid-column: 2 / -1; grid-row: 2; }
}
.album-track-no { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.album-track-time { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.album-explicit { display: inline-block; font-size: 0.65rem; line-height: 1; padding: 0.15rem 0.3rem; border: 1px solid var(--muted); border-radius: 0.2rem; color: var(--muted); text-decoration: none; vertical-align: 0.1em; }
.album-facts { margin: -0.8rem 0 1.2rem; color: var(--muted); }

/* the times page: when the listening happens, as a heatmap of the hours of the week, and the records */
.insights-head { margin-bottom: 1rem; }
.quotes { margin-top: 0.6rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.4rem; }
.quote { grid-column: 2; margin: 0; padding: 2rem 1rem 1.2rem; min-height: 9rem; text-align: center; position: relative; font-family: var(--serif); font-size: 1.2rem; line-height: 1.5; animation: quote-in 0.4s ease; }
.quote::before { content: "\201C"; position: absolute; top: -0.1rem; left: 50%; transform: translateX(-50%); font-size: 3.2rem; line-height: 1; color: var(--accent); opacity: 0.6; }
.quote p { margin: 0; font-style: italic; }
.quote footer { margin-top: 0.7rem; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
@keyframes quote-in { from { opacity: 0; transform: translateY(0.3rem); } to { opacity: 1; transform: none; } }
.quote-nav { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.quotes > button { grid-row: 1; width: 2.2rem; height: 2.2rem; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.3rem; line-height: 1; color: var(--muted); }
.quotes > button:first-of-type { grid-column: 1; }
.quotes > button:last-of-type { grid-column: 3; }
.quote-dots { display: inline-flex; gap: 0.4rem; }
.quote-dots i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: color-mix(in srgb, var(--text) 22%, transparent); transition: background 0.2s; }
.quote-dots i.on { background: var(--accent); }
.time-insights { margin-bottom: 3.5rem; }
/* the listening time's figures stand on the stats page too, under a heading of their own; on the time page the title says it */
#time .st-time-head { display: none; }
#stats .st-time-head { margin: 2.5rem 0 0; }
#stats .time-top { margin-top: 1rem; }
#stats .time-scope { display: none; }
.heat { display: grid; grid-template-columns: 2.2rem repeat(24, minmax(0, 1fr)); gap: 2px; align-items: center; margin-top: 0.6rem; }
.heat-label { font-size: 0.72rem; color: var(--muted); }
.heat-hour { font-size: 0.68rem; color: var(--muted); text-align: left; }
.heat-cell { aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--accent) calc(var(--v) * 100%), color-mix(in srgb, var(--line) 55%, transparent)); }
.records { display: grid; grid-template-columns: 1fr auto; gap: 0.55rem 1rem; margin: 0.6rem 0 0; align-items: baseline; }
.records dt { font-size: 0.9rem; }
.records dt span { display: block; font-size: 0.78rem; color: var(--muted); }
.records dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 40rem) { .heat { grid-template-columns: 1.6rem repeat(24, minmax(0, 1fr)); gap: 1px; } }

/* the directory: the countries by continent, a cover and a few words each */
.page .post-text { max-width: none; }
.dir-nav { margin: 0.5rem 0 0; }
.dir-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 0.6rem 1.5rem; }
.dir-entry { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.dir-cover { flex: none; display: block; width: 4rem; height: 4rem; border-radius: 0.5rem; overflow: hidden; background: var(--soft); }
.dir-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dir-text { min-width: 0; }
.dir-text h3 { margin: 0 0 0.15rem; font-size: 1.15rem; }
.dir-text h3 a { color: inherit; text-decoration: none; }
.dir-text h3 a:hover { text-decoration: underline; }
.dir-text p { margin: 0.1rem 0 0; }

/* where an album is from: a card under its tracks, the country picked
   out in quiet tones on a map among its neighbours, its name below */
.album-from { padding: 0; overflow: hidden; }
.album-from .from-map { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; background: var(--soft); }
.from-map path { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.from-land { fill: color-mix(in srgb, var(--line) 70%, var(--soft)); stroke: var(--line); stroke-width: 0.7px; }
.from-glow, .from-halo { display: none; }
.from-country { fill: var(--muted); stroke: var(--text); stroke-width: 1px; stroke-opacity: 0.5; }
.from-dot { fill: var(--text); }
.from-caption { display: grid; gap: 0.1rem; padding: 0.9rem 1.4rem 1.1rem; border-top: 1px solid var(--line); }
.from-caption .label { margin: 0; }
.from-caption strong { font: 600 1.35rem/1.2 var(--serif); }
.from-caption a { font-size: 0.9rem; width: fit-content; }

/* the Lounge's tabs, one per category, styled as the settings' tabs */
#lounge-state:not(:empty) { margin-bottom: 1.2rem; }
.lounge-tabs { margin-bottom: 1.4rem; }
.lounge-tabs button { flex: none; min-height: 0; padding: 0.55rem 0 0.65rem; border: 0; border-radius: 0; background: none; color: var(--muted); font: inherit; white-space: nowrap; cursor: pointer; }
.lounge-tabs button:hover { color: var(--text); }
.lounge-tabs button[aria-selected="true"] { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px var(--accent); }

/* a phone, or the app installed on one: the pages are tabs with icons in
   a bar along the bottom, clear of the home indicator; the page above is
   a little denser, and the head clear of the notch */
@media (max-width: 40rem) {
  body { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
  body > header { padding-top: max(0.7rem, env(safe-area-inset-top)); padding-bottom: 0.7rem; }
  #nav:has(a[href$="#lounge"]:not([hidden])) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;
    padding: 0.3rem max(0.5rem, env(safe-area-inset-right)) calc(0.3rem + env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
    overflow: visible; white-space: normal;
    background: color-mix(in srgb, var(--card) 94%, transparent);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
  #nav:has(a[href$="#lounge"]:not([hidden])) a {
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    min-height: 3.1rem; padding: 0.35rem 0 0.2rem; border: 0;
    font-size: 0.7rem; font-weight: 500; letter-spacing: 0.01em; color: var(--muted);
    -webkit-tap-highlight-color: transparent;
  }
  #nav:has(a[href$="#lounge"]:not([hidden])) a[aria-current] { color: var(--text); font-weight: 600; }
  #nav:has(a[href$="#lounge"]:not([hidden])) a[aria-current] .nav-icon { color: var(--accent); }
  #nav:has(a[href$="#lounge"]:not([hidden])) .nav-icon { display: block; }
  /* the room the bar takes, kept free at the foot of every page */
  body:has(#nav a[href$="#lounge"]:not([hidden])) { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  body:has(#nav a[href$="#lounge"]:not([hidden])) footer { margin-bottom: 0; }
  body:has(#nav a[href$="#lounge"]:not([hidden])) header::after { display: none; }
  .menu { top: calc(3.9rem + env(safe-area-inset-top)); }

  /* denser */
  h1 { font-size: 1.6rem; margin: 1.1rem 0 0.6rem; }
  h2 { margin-top: 1.6rem; }
  .lead { font-size: 1.02rem; }
  .card { padding: 1rem 1.05rem; border-radius: 0.85rem; }
  .album-section { margin-bottom: 1.8rem; }
  .more { margin-top: 2.5rem; }
  .hub { gap: 0.8rem; }
  .hub-card { padding: 0.85rem; gap: 0.85rem; }

  /* tabs in one row, each as wide as the others */
  .library .mine-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; margin: 0.8rem 0 1rem; }
  .mine-tabs button { padding: 0.4rem 0.3rem; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lounge-tabs { display: flex; gap: 0; margin: 0 -1rem 1rem; padding: 0 0.5rem; overflow-x: auto; scrollbar-width: none; }
  .lounge-tabs button { flex: 1 0 auto; padding: 0.55rem 0.5rem 0.65rem; font-size: 0.93rem; }

  /* an album's cover across the whole width */
  .album-hero { gap: 1.1rem; margin-bottom: 1.8rem; }
  .album-cover { max-width: none; width: 100%; }

  /* the posters: the controls in a column, the download beneath */
  .poster-head { gap: 0.5rem; }
  .poster { margin: 0.6rem 0 0.9rem; }
  .poster-get-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; }
  .poster-get-row select { width: 100%; min-width: 0; }
  .poster-get-row #poster-get { grid-column: 1 / -1; margin-left: 0; text-align: center; }
  .poster-when select { width: 100%; }
}

/* installed as an app: no address bar to pull, so the page does not
   bounce, and the text is not picked up by a long press on the tabs */
@media (display-mode: standalone) {
  html { overscroll-behavior-y: none; }
  #nav a { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}

/* your curiosities: the day by the hour, a bar an hour */
.cu-hours { margin-top: 1rem; }
.cu-hours h3 { margin: 0 0 0.8rem; }
.cu-hour-bars { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; align-items: end; height: 8rem; }
.cu-hour { display: flex; align-items: flex-end; height: 100%; }
.cu-hour i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--accent); }
.cu-hour-ticks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0.4rem; }
@media (max-width: 40rem) { .cu-hour-bars { height: 6rem; gap: 2px; } }

/* trading cards: a grid of cards that tilt under the pointer and turn
   over on a click; the rare ones shine like foil */
.cards-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0.4rem 0 0.6rem; }
.cards-bar select { min-height: 2.4rem; padding: 0.35rem 0.6rem; max-width: 100%; }
.cards-filter { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cards-filter button { min-height: 0; padding: 0.35rem 0.85rem; border-radius: 2rem; font-size: 0.9rem; color: var(--muted); }
.cards-filter button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); font-weight: 600; }
.cards-print { margin: 0.8rem 0 1.4rem; }
.cards-print .small { margin-top: 0; }
.cards-print .row { margin: 0; }
.cards-print .cards-print-all { margin-top: 0.8rem; }
.cards-print-all .small { flex-basis: 100%; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 1.4rem 1.1rem; perspective: 1400px; }
.tcard { all: unset; display: block; position: relative; cursor: pointer; aspect-ratio: 63 / 88; border-radius: 0.6rem; -webkit-tap-highlight-color: transparent; }
.tcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.tcard-inner { position: absolute; inset: 0; border-radius: inherit; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s; box-shadow: 0 2px 4px rgb(0 0 0 / 0.25), 0 12px 28px rgb(0 0 0 / 0.3); }
.tcard:hover .tcard-inner { transition: transform 0.12s linear, box-shadow 0.3s; box-shadow: 0 4px 8px rgb(0 0 0 / 0.3), 0 22px 44px rgb(0 0 0 / 0.38); }
.tcard-face { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--soft); object-fit: cover; }
.tcard-back { transform: rotateY(180deg); }
.tcard-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; backface-visibility: hidden; -webkit-backface-visibility: hidden; opacity: 0; transition: opacity 0.3s; }
/* the foil of the rare and the legendary: a rainbow that moves with the
   pointer, and a glare where it is, only while the pointer is on the card */
.tcard[data-rarity="rare"] .tcard-shine, .tcard[data-rarity="legendary"] .tcard-shine {
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 0.45), transparent 45%),
    linear-gradient(115deg, transparent 20%, rgb(255 80 120 / 0.35) 35%, rgb(255 220 90 / 0.35) 45%, rgb(90 230 160 / 0.35) 55%, rgb(80 160 255 / 0.35) 65%, transparent 80%);
  background-size: 100% 100%, 250% 250%;
  background-position: center, var(--mx, 50%) var(--my, 50%);
  mix-blend-mode: color-dodge;
}
.tcard:hover .tcard-shine { opacity: 0.9; }
/* picking cards to print: the picked ones ringed and ticked */
.cards-grid.picking .tcard { transform: scale(0.97); transition: transform 0.15s; }
.cards-grid.picking .tcard[aria-pressed="true"] { transform: none; outline: 3px solid var(--accent); outline-offset: 3px; }
.cards-grid.picking .tcard[aria-pressed="true"]::after { content: "✓"; position: absolute; top: -0.6rem; right: -0.6rem; z-index: 2; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; }
@media (max-width: 40rem) { .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.8rem; } }
@media (prefers-reduced-motion: reduce) { .tcard-inner, .tcard:hover .tcard-inner, .card-box .tcard-inner { transition: none; transform: none; } .card-box .tcard-inner.turned { transform: rotateY(180deg); } }

/* the cards' game: the score, your card and theirs, the four values */
.cards-play { margin: 0.8rem 0 1rem; }
.cards-play h2 { margin-top: 0; }
.cards-play .row { margin-bottom: 0; }
/* Album Trumps: a fan of the listener's cards beside the title, the rules
   in four steps, the two ways to play side by side */
.trumps-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2.5rem; align-items: center; margin: 0 0 1.6rem; }
.trumps-head h1 { margin: 0.15rem 0 0.6rem; }
.trumps-head .lead { max-width: 38rem; margin: 0; }
.trumps-fan { position: relative; width: 15rem; height: 12.5rem; }
.trumps-fan > img, .trumps-fan > .duel-back { position: absolute; left: 50%; bottom: 0; width: 7.4rem; height: auto; aspect-ratio: 63 / 88; margin-left: -3.7rem; border-radius: 0.5rem; box-shadow: 0 2px 4px rgb(0 0 0 / 0.25), 0 12px 28px rgb(0 0 0 / 0.3); transform-origin: 50% 120%; }
.trumps-fan > :nth-child(1) { transform: rotate(-15deg) translateX(-0.6rem); }
.trumps-fan > :nth-child(2) { z-index: 1; transform: translateY(-0.5rem); }
.trumps-fan > :nth-child(3) { transform: rotate(15deg) translateX(0.6rem); }
.trumps-fan .duel-back span { font-size: 1.1rem; }
.trumps-rules { list-style: none; counter-reset: rule; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; margin: 0 0 1.4rem; padding: 0; }
.trumps-rules li { counter-increment: rule; display: grid; gap: 0.3rem; align-content: start; padding: 0.9rem 1rem 1rem; border: 1px solid var(--line); border-radius: 0.9rem; background: var(--card); }
.trumps-rules li::before { content: counter(rule); display: grid; place-items: center; width: 1.8rem; height: 1.8rem; margin-bottom: 0.2rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 18%, var(--card)); color: var(--accent); font: 700 0.95rem/1 var(--serif); }
.trumps-rules strong { font: 700 1.1rem/1.2 var(--serif); }
.trumps-rules span { color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.trumps-start { padding: 1.1rem 1.2rem; }
.trumps-start-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin: 0 0 0.9rem; }
.trumps-start-head h2 { margin: 0; }
.trumps-start-head select { min-height: 2.4rem; padding: 0.35rem 0.6rem; max-width: 100%; }
.trumps-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; margin: 0 0 0.8rem; }
.trumps-mode { display: grid; gap: 0.3rem; justify-items: start; align-content: start; padding: 1rem 1.1rem; border-radius: 0.9rem; text-align: left; white-space: normal; }
.trumps-mode strong { font: 700 1.2rem/1.2 var(--serif); }
.trumps-mode span { font-size: 0.9rem; font-weight: 400; line-height: 1.45; opacity: 0.85; }
.trumps-start .small { margin: 0; }
.duel .duel-table { max-width: 32rem; padding: 1.2rem; border-radius: 1rem; background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--accent) 12%, var(--soft)), var(--soft) 72%); }
@media (max-width: 52rem) { .trumps-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) {
  .trumps-head { grid-template-columns: 1fr; }
  .trumps-fan { order: -1; justify-self: center; width: 12rem; height: 9.5rem; }
  .trumps-fan > img, .trumps-fan > .duel-back { width: 5.6rem; margin-left: -2.8rem; }
  .trumps-modes { grid-template-columns: 1fr; }
  .duel .duel-table { padding: 0.8rem; }
}
@media (max-width: 26rem) { .trumps-rules { grid-template-columns: 1fr; } }
.duel { margin: 0.8rem 0 1.6rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); }
.duel-round { margin: 0 0 0.4rem; }
.duel-turn { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 0.8rem; padding: 0.55rem 0.8rem; border-radius: 0.6rem; background: var(--soft); }
.duel-turn strong { font: 700 1.15rem/1.2 var(--serif); }
.duel-turn-me { background: color-mix(in srgb, var(--accent) 16%, var(--card)); }
.duel-seat { display: grid; gap: 0.45rem; justify-items: stretch; text-align: center; }
.duel-seat .small { margin: 0; }
.duel-next { margin: 0 0 0.2rem; text-align: center; }
.duel-score { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; font-weight: 600; }
.duel-them { display: inline-flex; align-items: center; gap: 0.45rem; }
.duel-face { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--soft); object-fit: cover; }
.duel-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 30rem; margin: 0 auto; }
.duel-card, .duel-back { display: block; width: 100%; height: auto; aspect-ratio: 63 / 88; border-radius: 0.6rem; box-shadow: 0 2px 4px rgb(0 0 0 / 0.25), 0 12px 28px rgb(0 0 0 / 0.3); transition: transform 0.3s, opacity 0.3s, box-shadow 0.3s; }
.duel-card.won { box-shadow: 0 0 0 3px var(--accent), 0 14px 30px rgb(0 0 0 / 0.35); transform: translateY(-4px); }
.duel-card.lost { opacity: 0.5; transform: scale(0.97); }
/* the back of a card turned down: the mark of the site on a pattern */
.duel-back { display: grid; place-items: center; background:
  repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 22%, var(--card)) 0 6px, color-mix(in srgb, var(--accent) 12%, var(--card)) 6px 12px);
  border: 6px solid color-mix(in srgb, var(--accent) 70%, var(--card)); box-sizing: border-box; }
.duel-back span { padding: 0.3rem 0.7rem; border-radius: 0.4rem; background: var(--card); font: 700 1.6rem/1 var(--serif); }
.duel-status { margin: 1rem 0 0.7rem; text-align: center; }
.duel-status.duel-won strong, .duel-end.duel-won { color: var(--accent); }
.duel-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; max-width: 30rem; margin: 0 auto; }
.duel-value { display: grid; gap: 0.1rem; justify-items: center; padding: 0.5rem 0.3rem; min-height: 0; }
.duel-value .label { margin: 0; font-size: 0.68rem; }
.duel-value strong { font: 700 1.25rem/1.1 var(--serif); }
.duel-value:not(:disabled):hover { border-color: var(--accent); }
.duel-end { margin: 1rem 0; text-align: center; font: 700 1.5rem/1.2 var(--serif); }
.duel-actions { justify-content: center; margin: 1rem 0 0; }
@media (max-width: 40rem) { .duel { padding: 0.8rem; } .duel-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } .duel-table { gap: 0.6rem; } }

/* a card large, in a box of its own, turned over with a click */
.card-box { width: min(26rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.2rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); color: var(--text); overflow: visible; }
.card-box::backdrop { background: rgb(0 0 0 / 0.72); backdrop-filter: blur(3px); }
.card-box-stage { position: relative; width: min(100%, calc((100dvh - 9rem) * 63 / 88)); margin: 0 auto; aspect-ratio: 63 / 88; perspective: 1600px; cursor: pointer; border-radius: 0.8rem; }
.card-box .tcard-inner { transform: none; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.card-box .tcard-inner.turned { transform: rotateY(180deg); }
.card-box-bar { justify-content: center; margin: 1rem 0 0; }
.duel-card { cursor: zoom-in; }
.cards-print .check { display: flex; gap: 0.6rem; align-items: center; margin: 0 0 0.8rem; font-size: 0.95rem; }
.duel-value.picked { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--card)); opacity: 1; }
.duel-value.picked:disabled { opacity: 1; }

/* the badges' page in the Lounge: the sum on top, then each group as a
   grid of tiles, ringed in the colour of their rarity, the tones of the
   trading cards; the earned rare and legendary ones shine a little */
:root { --rar-common: #8a857d; --rar-uncommon: #3f7470; --rar-rare: #c99a45; --rar-legendary: #c06f42; }
.badges-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin: 1rem 0 1.2rem; }
.badges-fact { display: grid; gap: 0.15rem; align-content: start; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 0.9rem; background: var(--card); min-width: 0; }
.badges-fact strong { font: 700 1.6rem/1.15 var(--serif); overflow-wrap: anywhere; }
.badges-fact span { color: var(--muted); font-size: 0.85rem; }
.badges-fact.rarity-rare strong { color: var(--rar-rare); }
.badges-fact.rarity-legendary strong { color: var(--rar-legendary); }
.badge-section { margin: 1.6rem 0 0; }
.badge-section h2 { display: flex; align-items: baseline; gap: 0.7rem; margin: 0 0 0.8rem; font-size: 1.2rem; }
.badge-section h2 .small { color: var(--muted); font: 400 0.85rem var(--sans); font-variant-numeric: tabular-nums; }
.badge-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.8rem; }
.badge-tile { --rar: var(--rar-common); position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 100%; height: 100%; padding: 1rem 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); color: var(--text); font: inherit; text-align: center; cursor: pointer; overflow: hidden; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.badge-tile:hover { transform: translateY(-2px); border-color: var(--rar); box-shadow: 0 8px 20px rgb(0 0 0 / 0.12); }
.badge-tile.rarity-uncommon { --rar: var(--rar-uncommon); }
.badge-tile.rarity-rare { --rar: var(--rar-rare); }
.badge-tile.rarity-legendary { --rar: var(--rar-legendary); }
.badge-tile.rarity-unclaimed { --rar: var(--line); }
.badge-ring { position: relative; display: block; width: 6rem; margin-bottom: 0.3rem; }
.badge-ring img { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--rar); }
.badge-tile.locked .badge-ring img { filter: grayscale(1); opacity: 0.3; box-shadow: 0 0 0 3px var(--card), 0 0 0 6px var(--line); }
.badge-ring .badge-times { position: absolute; right: -0.3rem; bottom: -0.1rem; min-width: 1.6rem; padding: 0.1rem 0.45rem; border-radius: 1rem; background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1.3; box-shadow: 0 1px 3px rgb(0 0 0 / 0.4); }
.badge-tile strong { font-size: 0.92rem; line-height: 1.25; }
.badge-tile.locked strong { color: var(--muted); font-weight: 500; }
.badge-pill { padding: 0.1rem 0.6rem; border-radius: 2rem; background: color-mix(in srgb, var(--rar) 16%, transparent); color: var(--rar); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.badge-tile.rarity-unclaimed .badge-pill { background: var(--soft); color: var(--muted); }
.badge-tile.locked .badge-pill { opacity: 0.75; }
.badge-share, .badge-state { font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.badge-state { margin-top: auto; padding-top: 0.2rem; }
.badge-bar { display: block; width: 80%; height: 4px; margin-top: 0.2rem; border-radius: 2px; background: linear-gradient(90deg, var(--accent) calc(var(--p) * 100%), var(--soft) 0); }
/* the shine of an earned rare or legendary badge: a soft light that passes
   over the tile once, when the pointer comes onto it */
.badge-tile:not(.locked).rarity-rare::after, .badge-tile:not(.locked).rarity-legendary::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--rar) 22%, transparent) 50%, transparent 65%); background-size: 250% 100%; background-position: 120% 0; }
.badge-tile:not(.locked).rarity-rare:hover::after, .badge-tile:not(.locked).rarity-legendary:hover::after { animation: badge-shine 0.9s ease-in-out; }
.badge-tile:not(.locked).rarity-legendary { border-color: color-mix(in srgb, var(--rar) 55%, var(--line)); }
@keyframes badge-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .badge-tile::after { animation: none !important; } .badge-tile:hover { transform: none; } }
@media (max-width: 40rem) {
  .badges-sum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .badges-sum > :last-child { grid-column: 1 / -1; }
  .badge-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .badge-ring { width: 5rem; }
}

/* the checker: a Last.fm or ListenBrainz user's history against the list */
.check-form { max-width: 46rem; margin: 1.5rem 0 2rem; }
.check-services { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0 0 0.9rem; padding: 0; border: 0; }
.check-services legend { padding: 0; }
.check-services label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.check-services input { min-height: 0; padding: 0; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--accent); }
.check-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.check-user { flex: 1 1 14rem; min-width: 0; }
.check-user input { width: 100%; }
.check-row .button { flex: none; }
.check-row .button:disabled { opacity: 0.6; cursor: progress; }
.check-form progress { display: block; width: 100%; height: 0.4rem; margin-top: 0.6rem; accent-color: var(--accent); }
.check-result { margin: 0 0 2.5rem; scroll-margin-top: 1rem; }
.check-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin: 0 0 0.8rem; }
.check-head .small-button { margin: 0 0 1rem; overflow-wrap: anywhere; }
.check-meter { display: flex; height: 0.8rem; margin: 0 0 0.6rem; border-radius: 0.4rem; overflow: hidden; background: var(--soft); }
.check-meter span { display: block; height: 100%; }
.check-meter-full { background: var(--accent); }
.check-meter-started { background: color-mix(in srgb, var(--accent) 35%, var(--soft)); }
.check-sub { margin: 2rem 0 0.8rem; font: 700 1.3rem/1.25 var(--serif); }
.check-result > .small { margin-top: 0; }
.check-all { margin: 2rem 0 1rem; }
.check-all summary { cursor: pointer; font-weight: 600; margin-bottom: 0.6rem; }
.check-faq h3 { margin: 1.4rem 0 0.3rem; font-size: 1.05rem; }
.check-faq p, .check .group > p { max-width: 46rem; }

/* the front page in a few words, under the welcome, for whoever reads it
   without the app */

.post-aside .post-check { margin-top: 1rem; }

/* an album's page: a few sentences on it, before its tracks */
.album-about { font-size: 1.08rem; line-height: 1.6; max-width: 46rem; margin: 0 0 2rem; }

/* an instrument's recording on its list's post: a round button in the
   accent and a bar of where it is, on a card */
.sound { margin: 1.5rem 0 2rem; }
.sound h2 { margin-bottom: 0.7rem; }
.player { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--card); max-width: 40rem; }
.player-play { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.player-play:hover { filter: brightness(1.08); }
.player-play:focus-visible, .player-bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.player-play svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.player-icon-pause, .player.player-on .player-icon-play { display: none; }
.player.player-on .player-icon-pause { display: inline; }
.player-main { flex: 1; min-width: 0; }
.player-title { margin: 0 0 0.45rem; line-height: 1.35; }
.player-title strong { display: block; font: 600 1rem/1.3 var(--serif); }
.player-title span { display: block; font-size: 0.85rem; color: var(--muted); }
.player-main audio { width: 100%; }
.player-track { display: flex; align-items: center; gap: 0.8rem; }
.player-bar { position: relative; flex: 1; height: 1.2rem; cursor: pointer; touch-action: none; }
.player-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--line); }
.player-fill { position: absolute; left: 0; top: 50%; width: 0; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--accent); }
.player-knob { position: absolute; left: 0; top: 50%; width: 0.8rem; height: 0.8rem; margin: -0.4rem 0 0 -0.4rem; border-radius: 50%; background: var(--text); opacity: 0; transition: opacity 0.15s; }
.player.player-on .player-knob, .player-bar:hover .player-knob, .player.player-seeking .player-knob, .player-bar:focus-visible .player-knob { opacity: 1; }
.player-time { flex: none; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* the language menu: a flag in the head of the page, the languages under it */
.lang-menu { position: relative; display: inline-block; }
.lang-menu summary { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2rem; padding: 0.2rem 0.5rem; border-radius: 6px; color: var(--muted); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; cursor: pointer; list-style: none; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: ""; width: 0.35rem; height: 0.35rem; margin-left: 0.1rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.12rem) rotate(45deg); }
.lang-menu summary:hover, .lang-menu[open] summary { color: var(--text); background: var(--line); }
.lang-menu .flag { width: 1.35rem; height: auto; aspect-ratio: 5 / 3; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25); flex: none; }
.lang-options { position: absolute; right: 0; top: calc(100% + 0.3rem); z-index: 50; min-width: 9.5rem; margin: 0; padding: 0.3rem; list-style: none; background: var(--card, var(--bg)); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.lang-options a { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 6px; color: var(--text); text-decoration: none; }
.lang-options a:hover { background: var(--line); }
.lang-options a[aria-current] { font-weight: 600; }
.footer-bottom .lang-options { top: auto; bottom: calc(100% + 0.3rem); }
/* in the head it stands on the right, before the account's menu */
header > .lang-menu { margin-left: auto; }
header > .lang-menu ~ .account-menu, header > .lang-menu ~ .header-go { margin-left: 0; }
@media (max-width: 56rem) {
  header > .lang-menu { order: 1; margin-left: auto; }
  header > .lang-menu ~ .account-menu, header > .lang-menu ~ .header-go { margin-left: 0; }
}

/* -- the app as a program -------------------------------------------------
   The same pages laid out as a program: the pages in a sidebar on the
   left, the page beside it scrolling on its own, no head or foot of a
   site, the type and the controls a little smaller and closer. The
   page has the classes "web" and "desktop" from the server, for
   everyone. On a narrow screen the panes
   go one under the other, and on a phone the sidebar is a drawer behind
   a bar of tabs at the foot (at the end of this file). The layout is the
   same for whoever is not signed in, with what is open to anyone in the
   sidebar. */

html.desktop { --side-w: 15rem; --head-h: 0px; height: 100%; overflow: hidden; scroll-padding-top: 0; }
html.desktop body {
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  height: 100vh;
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: 0.94rem;
  overflow: hidden;
}
html.desktop body > header, html.desktop .site-footer { display: none !important; }
html.desktop body > main, html.desktop body > .loader {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem clamp(1.25rem, 3vw, 2.75rem) 3rem;
}
html.desktop body > main > * { max-width: 78rem; margin-left: 0; margin-right: auto; }
html.desktop body.loading .loader { min-height: 0; }
html.desktop #notice {
  position: fixed;
  top: auto;
  bottom: 1.25rem;
  left: calc(var(--side-w) + 50%);
  transform: translateX(calc(-50% - var(--side-w) / 2));
  z-index: 50;
  max-width: min(36rem, calc(100vw - var(--side-w) - 2rem));
  margin: 0;
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.45);
}

/* the sidebar */
.sidebar { display: none; }
/* its column, coloured and edged already while desktop.js builds it */
html.desktop body:not(:has(> .sidebar)) {
  background-image: linear-gradient(to right, #100f0e calc(var(--side-w) - 1px), var(--line) calc(var(--side-w) - 1px), var(--line) var(--side-w), transparent var(--side-w));
}
html.desktop .sidebar {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-width: 0;
  background: #100f0e;
  border-right: 1px solid var(--line);
  user-select: none;
  -webkit-user-select: none;
}
html.desktop .sb-brand { padding: 1.05rem 1.1rem 0.85rem; cursor: default; }
html.desktop .sb-nav { display: block; flex: 1 1 auto; overflow-y: auto; padding: 0.25rem 0.6rem 1rem; scrollbar-width: thin; }
html.desktop .sb-group + .sb-group { margin-top: 0.9rem; }
html.desktop .sb-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  min-height: 0;
  margin: 0 0 0.2rem;
  padding: 0.15rem 0.55rem;
  border: 0;
  border-radius: 0.3rem;
  background: none;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
html.desktop .sb-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.3rem 0.55rem;
  border-radius: 0.4rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.3;
  cursor: default;
  white-space: nowrap;
  border-bottom: 0;
}
html.desktop .sb-link span { overflow: hidden; text-overflow: ellipsis; }
html.desktop .sb-link:hover { background: var(--soft); color: var(--text); }
html.desktop .sb-group[hidden], html.desktop .sb-link[hidden] { display: none; }
html.desktop .sb-link[aria-current] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); font-weight: 600; }
html.desktop .sb-link[aria-current] .sb-icon { color: var(--accent); }
html.desktop .sb-icon { flex: none; width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html.desktop .sb-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.55rem 0.6rem 0.75rem;
  border-top: 1px solid var(--line);
}
html.desktop .sb-foot .account-menu { margin: 0.15rem 0 0; }
html.desktop .sb-foot .menu-button { width: 100%; justify-content: space-between; border-radius: 0.5rem; padding: 0.3rem 0.5rem 0.3rem 0.3rem; }
html.desktop .sb-foot .menu-avatar-box { width: 2rem; height: 2rem; }
html.desktop .sb-foot .menu { position: absolute; top: auto; bottom: calc(100% + 0.4rem); left: 0; right: auto; width: 18rem; }
html.desktop .sb-foot .lang-menu { margin: 0; }
html.desktop:not(.web) #logout, html.desktop:not(.web) .menu-rule:has(+ #logout), html.desktop .menu-settings, html.desktop .menu-stats, html.desktop #nav { display: none; }

/* type and controls, as in a program */
html.desktop h1 { font: 650 1.65rem/1.2 var(--sans); letter-spacing: -0.01em; margin: 0.4rem 0 1rem; }
html.desktop h2 { font: 650 1.08rem/1.3 var(--sans); margin: 1.75rem 0 0.55rem; }
html.desktop button, html.desktop .button, html.desktop input, html.desktop select { min-height: 2.15rem; padding: 0.3rem 0.85rem; border-radius: 0.45rem; font-size: 0.92rem; }
html.desktop .big { min-height: 2.5rem; padding: 0.45rem 1.15rem; font-size: 0.98rem; }
html.desktop input[type="checkbox"], html.desktop input[type="range"] { min-height: 0; padding: 0; }
html.desktop button, html.desktop .button, html.desktop .tabs a, html.desktop .hub-card { cursor: default; user-select: none; -webkit-user-select: none; }
html.desktop .card { border-radius: 0.65rem; padding: 1rem 1.2rem; }
html.desktop .figure strong { font-family: var(--sans); font-weight: 650; font-size: 2.2rem; }
html.desktop .figure.huge strong { font-size: 3rem; }
/* what only a site has: the blog, the way to the welcome */
html.desktop :not(.sb-legal) > a[href^="/blog"], html.desktop .header-go { display: none !important; }

/* scrollbars, quiet ones */
html.desktop * { scrollbar-width: thin; scrollbar-color: #3a3632 transparent; }
html.desktop ::-webkit-scrollbar { width: 10px; height: 10px; }
html.desktop ::-webkit-scrollbar-thumb { background: #3a3632; border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
html.desktop ::-webkit-scrollbar-thumb:hover { background-color: #4c4741; }
html.desktop ::-webkit-scrollbar-track { background: transparent; }

/* a narrow window: the sidebar its icons only */
@media (max-width: 56rem) {
  html.desktop { --side-w: 3.6rem; }
  html.desktop .sb-link span, html.desktop .sb-head, html.desktop .sb-brand span, html.desktop .sb-foot .chevron { display: none; }
  html.desktop .sb-link { justify-content: center; padding: 0.5rem; }
  html.desktop .sb-brand { padding: 1rem 0.5rem; text-align: center; justify-content: center; }
  html.desktop .sb-brand b { font-size: 1.05rem; }
  html.desktop .sb-foot .menu-button { justify-content: center; padding: 0.2rem; }
  html.desktop .sb-group + .sb-group { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--line); }
  /* the language its flag only; of the web's links the imprint only,
     small, the blog being the backstage */
  html.desktop .sb-foot .lang-menu summary { justify-content: center; width: 100%; padding: 0.3rem 0; font-size: 0; gap: 0; }
  html.desktop .sb-foot .lang-menu summary::after { display: none; }
  html.desktop .sb-foot .lang-menu .flag { width: 1.35rem; }
  html.desktop .sb-legal { justify-content: center; padding: 0; font-size: 0.6rem; text-align: center; }
  html.desktop .sb-legal a[href="/blog"] { display: none !important; }
}

/* the program's controls: tabs and choices as segmented controls,
   cards as flat panels, the Lounge's cards as tiles, the type the
   system's, not a magazine's */
html.desktop { --serif: var(--sans); --panel: #1a1917; --panel-line: #2b2825; --raised: #2d2a27; }
html.desktop .sb-brand b { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
html.desktop .lead { font-size: 0.95rem; line-height: 1.5; color: var(--muted); max-width: 52rem; }
html.desktop h1 { font-size: 1.4rem; margin: 0.2rem 0 0.4rem; }
html.desktop .page-head { margin-bottom: 0.4rem; }

html.desktop :is(.tabs, .filter, .doc-choice, .mine-tabs) {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 2px;
  width: auto;
  max-width: 100%;
  padding: 2px;
  margin: 0.2rem 0 1rem;
  border: 1px solid var(--panel-line);
  border-radius: 0.5rem;
  background: #0f0e0d;
  box-shadow: none;
  overflow-x: auto;
}
html.desktop :is(.tabs a, .filter button, .doc-choice button, .mine-tabs button) {
  flex: none;
  min-height: 1.85rem;
  margin: 0;
  padding: 0.2rem 0.85rem;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.45rem;
  text-decoration: none;
  white-space: nowrap;
}
html.desktop :is(.tabs a, .filter button, .doc-choice button, .mine-tabs button):hover { color: var(--text); background: rgb(255 255 255 / 0.04); }
html.desktop :is(.tabs a[aria-current], .tabs a[aria-selected="true"], .filter button[aria-pressed="true"], .doc-choice button[aria-pressed="true"], .mine-tabs button[aria-pressed="true"]) {
  background: var(--raised);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.05);
}

/* panels */
html.desktop .card { background: var(--panel); border-color: var(--panel-line); border-radius: 0.5rem; padding: 0.9rem 1rem; box-shadow: none; }
html.desktop .card > .label:first-child, html.desktop .card .label { font-size: 0.68rem; letter-spacing: 0.08em; }
html.desktop .figure strong { font-size: 1.9rem; }

/* the Lounge: tiles to open, the whole tile the button */
html.desktop .hub { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0.6rem; }
html.desktop .hub-card {
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
  padding: 0.65rem 0.8rem;
  border-color: var(--panel-line);
  border-radius: 0.5rem;
  background: var(--panel);
  transition: background 0.12s, border-color 0.12s;
}
html.desktop .hub-card:hover { background: var(--raised); border-color: #3a3632; }
html.desktop .hub-pic { width: 3.4rem; border-radius: 0.35rem; }
html.desktop .hub-text { gap: 0.15rem; }
html.desktop .hub-text strong { font: 600 0.95rem/1.25 var(--sans); }
html.desktop .hub-text > span:not(.hub-status):not(.hub-go) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.82rem; line-height: 1.35; color: var(--muted); }
html.desktop .hub-status { font-size: 0.78rem; }
html.desktop .hub-go { display: none; }

/* the list: rows as in a table, lit under the pointer */
html.desktop .albums li { border-bottom-color: var(--panel-line); padding: 0 0.5rem; margin: 0 -0.5rem; border-radius: 0.35rem; }
html.desktop .albums li:hover { background: rgb(255 255 255 / 0.03); }
html.desktop .hub-head { grid-column: 1 / -1; margin: 1rem 0 0.1rem; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
html.desktop .hub-head:first-child { margin-top: 0.6rem; }
html.desktop .sb-head:hover { color: var(--text); }
html.desktop .sb-head::after { content: ""; width: 0.38rem; height: 0.38rem; margin-left: auto; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); opacity: 0.6; transition: transform 0.15s; }
html.desktop .sb-group.folded .sb-head::after { transform: rotate(-45deg); }
html.desktop .sb-group.folded .sb-link { display: none; }
html.desktop .sb-group + .sb-group { margin-top: 0.7rem; }
html.desktop .back[href="#lounge"] { display: none; }
html.desktop .back { margin-top: 0.25rem; font-size: 0.86rem; }
html.desktop #settings-tabs:not(:has(a + a)) { display: none; }

/* the list: a short column beside the albums, the certificate behind a
   button in the head of the page */
html.desktop #list { grid-template-columns: 17.5rem minmax(0, 1fr); gap: 1.75rem; padding-top: 0.5rem; }
html.desktop #list .page-head { position: relative; padding-right: 3rem; }
html.desktop #list .page-head .lead { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.desktop #list .side { gap: 0.75rem; top: 0; }
html.desktop #list .side .card { padding: 0.8rem 0.9rem; }
html.desktop #list .side .figure { margin: 0.2rem 0 0.35rem; }
html.desktop #list .side .figure strong { font-size: 1.6rem; }
html.desktop #list .side .small { font-size: 0.8rem; margin: 0.3rem 0; }
html.desktop #list .side #clock-button { min-height: 2.2rem; margin: 0.35rem 0 0.2rem; }
html.desktop .desk-head-button {
  position: absolute; top: 0.15rem; right: 0;
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; min-height: 0; padding: 0;
  border: 1px solid var(--panel-line); border-radius: 0.45rem;
  background: var(--panel); color: var(--muted);
}
html.desktop .desk-head-button:hover { color: var(--text); border-color: #3a3632; }
html.desktop .desk-head-button .sb-icon { width: 1.15rem; height: 1.15rem; }
html.desktop dialog.desk-cert { width: min(34rem, calc(100vw - 4rem)); max-height: calc(100vh - 4rem); padding: 0; overflow-y: auto; }
html.desktop dialog.desk-cert .cert-card { margin: 0; border: 0; background: transparent; padding: 1.2rem 1.3rem 1.3rem; }
html.desktop dialog.desk-cert .row { flex-wrap: wrap; gap: 0.5rem; }
html.desktop dialog.desk-cert .row > * { flex: 1 1 8rem; }
html.desktop dialog.desk-cert .name-form .row > input { flex: 1 1 14rem; }
html.desktop dialog.desk-cert .name-form .row > button { flex: none; }
html.desktop button.link { min-height: 0; padding: 0; border-radius: 0; font-size: inherit; }
html.desktop dialog.desk-cert .cert-card .poster { max-height: 42vh; width: auto; max-width: 100%; display: block; margin: 0.5rem auto; }

/* the room: the listener in it too, out until they start */
html.desktop .room li { padding: 0.45rem 0.25rem; }
html.desktop .room-face { width: 2.6rem; height: 2.6rem; }

/* -- the app as a program: its pages ----------------------------------
   Listening together, the badges, the stars, the maps and the curiosities
   (desktop.js moves their parts): the title and the page's controls in a
   bar on top, below it panes that fill the window and scroll each on their
   own; no tile lifts or grows under the pointer. */
html.desktop body > main:has(> .dk-page:not([hidden])) { overflow: hidden; padding-bottom: 1rem; }
html.desktop .dk-page:not([hidden]) { display: flex; flex-direction: column; height: 100%; min-height: 0; }
html.desktop .dk-page > p:has(> .back) { display: none; }
html.desktop .dk-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0 0 0.75rem; margin-bottom: 0.75rem; border-bottom: 1px solid var(--panel-line); }
html.desktop .dk-title { flex: 1 1 20rem; min-width: 0; }
html.desktop .dk-title h1 { margin: 0; font-size: 1.25rem; }
html.desktop .dk-title .lead { margin: 0.15rem 0 0; max-width: 62rem; font-size: 0.85rem; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
html.desktop .dk-panes { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
html.desktop .dk-pane { min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
html.desktop .dk-pane > :first-child { margin-top: 0; }
html.desktop .dk-pane h2 { margin: 1.1rem 0 0.5rem; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
html.desktop .dk-page .cards-filter { display: inline-flex; flex-wrap: nowrap; gap: 2px; padding: 2px; border: 1px solid var(--panel-line); border-radius: 0.5rem; background: #0f0e0d; overflow-x: auto; max-width: 100%; }
html.desktop .dk-page .cards-filter button { flex: none; min-height: 1.85rem; padding: 0.2rem 0.85rem; border: 0; border-radius: 0.35rem; background: transparent; color: var(--muted); font-size: 0.86rem; font-weight: 500; white-space: nowrap; }
html.desktop .dk-page .cards-filter button:hover { color: var(--text); }
html.desktop .dk-page .cards-filter button[aria-pressed="true"] { background: var(--raised); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.05); }
html.desktop .dk-page select { min-height: 1.95rem; padding: 0.15rem 0.6rem; font-size: 0.88rem; }

/* Listening together: the month on the left, the sessions beside it */
html.desktop #together .dk-panes { grid-template-columns: minmax(23rem, 30rem) minmax(0, 1fr); gap: 1.25rem; }
html.desktop #together .cal-head { margin: 0 0 0.5rem; }
html.desktop #together .cal-nav { width: 100%; justify-content: space-between; }
html.desktop #together .cal-nav strong { min-width: 0; font: 650 0.98rem/1.2 var(--sans); }
html.desktop #together .cal-nav button { width: 1.9rem; min-height: 1.9rem; border-radius: 0.4rem; font-size: 1rem; }
html.desktop #together .cal-zone { font-size: 0.82rem; color: var(--muted); }
html.desktop #together .cal-zone select { max-width: 14rem; }
html.desktop #together .calendar { gap: 3px; margin-bottom: 0.9rem; }
html.desktop #together .cal-weekday { padding: 0 0 0.15rem; font-size: 0.64rem; text-align: center; }
html.desktop #together .cal-day { min-height: 3.6rem; padding: 0.2rem; gap: 2px; border-radius: 0.35rem; background: var(--panel); border-color: var(--panel-line); }
html.desktop #together .cal-empty { background: none; border-color: transparent; }
html.desktop #together .cal-num { font-size: 0.7rem; padding-left: 0.1rem; }
html.desktop #together .cal-chip { padding: 0 0.1rem; border-radius: 0.25rem; font-size: 0.62rem; line-height: 1.4; text-align: center; text-overflow: clip; letter-spacing: -0.01em; }
html.desktop #together .cal-chip:hover { filter: none; }
html.desktop #together .together-own { margin: 0; font-size: 0.86rem; }
html.desktop #together .together { gap: 0.6rem; }
html.desktop #together .session { gap: 0.7rem; padding: 0.85rem 1rem; }
html.desktop #together .session-head { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.85rem; }
html.desktop #together .session .cover { width: 4.5rem; height: 4.5rem; border-radius: 0.35rem; }
html.desktop #together .session-title { font: 650 1.05rem/1.25 var(--sans); }
html.desktop #together .session-count { font: 650 1.5rem/1.1 var(--sans); }
html.desktop #together .session-mid { padding-top: 0.6rem; }
html.desktop #together .session-actions { padding-top: 0.6rem; }
html.desktop #together .session-actions .button, html.desktop #together .session-actions .primary { min-height: 2.1rem; padding: 0.2rem 0.85rem; }
html.desktop #together .session-line { padding: 0.25rem 0.4rem; border-top-color: var(--panel-line); }
html.desktop #together .session-pick .cover { width: 2.4rem; height: 2.4rem; }
html.desktop #together .session-pick:hover strong { color: inherit; }
html.desktop #together .together-past { margin-top: 1.5rem; }

/* Badges: what is earned as figures in the bar, the badges as compact
   rows of a list, no lift, no shine */
html.desktop #badges .dk-title { flex-basis: 16rem; }
html.desktop #badges .badges-sum { display: flex; gap: 0.4rem; margin: 0; }
html.desktop #badges .badges-fact { display: flex; flex-direction: column; gap: 0; padding: 0.3rem 0.75rem; border-radius: 0.45rem; background: var(--panel); border-color: var(--panel-line); max-width: 13rem; }
html.desktop #badges .badges-fact strong { font: 650 1rem/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.desktop #badges .badges-fact span { font-size: 0.72rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.desktop #badges .badges-fact span.small { display: none; }
html.desktop #badges .cards-bar { margin: 0; flex-basis: 100%; }
html.desktop #badges .badge-section { margin: 0 0 1rem; }
html.desktop #badges .badge-section h2 { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.45rem; }
html.desktop #badges .badge-section h2 .small { font-size: 0.72rem; letter-spacing: 0; text-transform: none; }
html.desktop #badges .badge-tiles { grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: 0.4rem; }
html.desktop #badges .badge-tile {
  display: grid;
  grid-template-columns: 2.9rem auto minmax(0, 1fr);
  grid-template-areas: "pic name name" "pic pill share" "pic state state";
  align-items: center;
  gap: 0 0.65rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.45rem;
  border-color: var(--panel-line);
  background: var(--panel);
  text-align: left;
  cursor: default;
  transition: none;
}
html.desktop #badges .badge-tile:hover { transform: none; box-shadow: none; border-color: var(--panel-line); }
html.desktop #badges .badge-tile::after { display: none; }
html.desktop #badges .badge-tile:not(.locked) { border-color: color-mix(in srgb, var(--rar) 40%, var(--panel-line)); }
html.desktop #badges .badge-ring { grid-area: pic; width: 2.6rem; margin: 0 0 0 0.15rem; }
html.desktop #badges .badge-ring img { height: auto; box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--rar); }
html.desktop #badges .badge-tile.locked .badge-ring img { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--line); }
html.desktop #badges .badge-ring .badge-times { right: -0.4rem; bottom: -0.25rem; min-width: 1.2rem; padding: 0 0.3rem; font-size: 0.62rem; }
html.desktop #badges .badge-tile strong { grid-area: name; font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.desktop #badges .badge-pill { grid-area: pill; justify-self: start; margin-right: 0.4rem; padding: 0 0.4rem; font-size: 0.58rem; line-height: 1.5; }
html.desktop #badges .badge-share { grid-area: share; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.desktop #badges .badge-state { grid-area: state; margin: 0; padding: 0; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.desktop #badges .badge-bar { grid-column: 2 / -1; grid-row: 3; align-self: end; width: 100%; height: 2px; margin: 0; }

/* Written in the stars: the birthday and the themes in a pane on the left,
   the matches beside it */
html.desktop #stars .dk-panes { grid-template-columns: 19rem minmax(0, 1fr); gap: 1.25rem; }
html.desktop #stars .dk-side { display: flex; flex-direction: column; gap: 0.9rem; padding-right: 0.2rem; }
html.desktop #stars .stars-bar { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; margin: 0; }
html.desktop #stars .stars-born { display: grid; grid-template-columns: 4.9rem minmax(0, 1fr) 5.9rem; gap: 0.3rem; }
html.desktop #stars .stars-born #stars-born-name, html.desktop #stars .stars-bar label > span { grid-column: 1 / -1; margin: 0; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
html.desktop #stars .stars-born select { min-width: 0; width: 100%; padding: 0.15rem 0.4rem; }
html.desktop #stars .stars-bar label { display: grid; gap: 0.3rem; }
html.desktop #stars .stars-bar label select { width: 100%; }
html.desktop #stars .stars-themes { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; border: 0; background: none; overflow: visible; }
html.desktop #stars .stars-themes button { width: 100%; text-align: left; padding: 0.3rem 0.6rem; border-radius: 0.4rem; box-shadow: none; }
html.desktop #stars .stars-themes button[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: none; }
html.desktop #stars #stars-line { margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--muted); }
html.desktop #stars .dk-side > p { margin: 0; }
html.desktop #stars #stars-make { width: 100%; }
html.desktop #stars .been-rows { border-top: 0; }
html.desktop #stars .been-rows li { border-bottom-color: var(--panel-line); }
html.desktop #stars .been-row { grid-template-columns: 2.4rem minmax(0, 1fr) auto; padding: 0.3rem 0.5rem; gap: 0.7rem; }
html.desktop #stars .been-row:hover { background: rgb(255 255 255 / 0.03); }
html.desktop #stars .been-row .cover { width: 2.4rem; height: 2.4rem; }
/* The weather: the place, the sky and the sound in a pane on the left,
   the records picked beside them */
html.desktop #weather .dk-panes { grid-template-columns: 19rem minmax(0, 1fr); gap: 1.25rem; }
html.desktop #weather .dk-side { display: flex; flex-direction: column; gap: 0.9rem; padding-right: 0.2rem; }
html.desktop #weather .weather-bar { margin: 0; min-height: 0; gap: 0.5rem; }
html.desktop #weather .weather-bar #weather-place { font-size: 0.82rem; line-height: 1.45; color: var(--muted); font-weight: 500; }
html.desktop #weather .weather-bar #weather-zone { width: 100%; }
html.desktop #weather .weather-form { width: 100%; }
html.desktop #weather .weather-now { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; margin: 0; }
html.desktop #weather .weather-temp { font-size: 2.4rem; }
html.desktop #weather .weather-line { font-size: 0.95rem; line-height: 1.45; }
html.desktop #weather .weather-details { font-size: 0.78rem; line-height: 1.45; }
html.desktop #weather .weather-pick { margin: 0 0 1.2rem; }
html.desktop #weather .weather-pick h2, html.desktop #weather .weather-twins-box h2 { margin: 0 0 0.15rem; }
html.desktop #weather .weather-why { font-size: 0.8rem; margin-bottom: 0.4rem; }
html.desktop #weather .been-rows { border-top: 0; }
html.desktop #weather .been-rows li { border-bottom-color: var(--panel-line); }
html.desktop #weather .been-row { grid-template-columns: 2.4rem minmax(0, 1fr) auto; padding: 0.3rem 0.5rem; gap: 0.7rem; }
html.desktop #weather .been-row:hover { background: rgb(255 255 255 / 0.03); }
html.desktop #weather .been-row .cover { width: 2.4rem; height: 2.4rem; }
html.desktop #weather .weather-twins { margin-bottom: 0.5rem; }
html.desktop #weather .weather-twin { border-color: var(--panel-line); background: var(--raised); }

/* the maps: the map and the continents, the country and all of them
   beside */
html.desktop #been .dk-panes { grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); gap: 1.25rem; }
html.desktop #been .been-box { border-radius: 0.5rem; background: var(--panel); border-color: var(--panel-line); }
html.desktop #been .been-map path { stroke: var(--panel); }
html.desktop .been-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; margin: 0.45rem 0 0; font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
html.desktop .been-legend .small { margin-right: 0.2rem; }
html.desktop .been-key { display: inline-flex; align-items: center; gap: 0.3rem; }
html.desktop .been-key::before { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 0.2rem; background: var(--accent); }
html.desktop .been-key[data-level="1"]::before { opacity: 0.4; }
html.desktop .been-key[data-level="2"]::before { opacity: 0.6; }
html.desktop .been-key[data-level="3"]::before { opacity: 0.8; }
html.desktop #been .been-line { margin: 0.7rem 0 0; font-size: 0.88rem; }
html.desktop #been .been-continents { margin: 0.8rem 0 0; }
html.desktop #been .been-cont-grid { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.45rem; }
html.desktop #been .been-cont { gap: 0.3rem; padding: 0.55rem 0.7rem; }
html.desktop #been .been-cont-figure { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.74rem; }
html.desktop #been .been-cont-figure strong { font: 650 1.1rem/1.1 var(--sans); }
html.desktop #been .been-cont .small { font-size: 0.72rem; line-height: 1.35; }
html.desktop #been .been-bar { height: 0.3rem; }
html.desktop #been .dk-countries { display: flex; flex-direction: column; }
html.desktop #been .been-panel { position: relative; margin: 0 0 0.8rem; padding: 0.8rem 0.9rem; }
html.desktop #been .been-panel-head h2 { margin: 0; font: 650 1rem/1.25 var(--sans); letter-spacing: 0; text-transform: none; color: var(--text); }
html.desktop #been .been-covers { grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); gap: 0.3rem; }
html.desktop #been .been-cover { transition: none; }
html.desktop #been .been-cover:hover { transform: none; }
html.desktop #been .been-head { margin: 0.2rem 0 0.4rem; }
html.desktop #been .been-list { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; margin: 0 0 0.8rem; }
html.desktop #been .been-list > * { display: flex; justify-content: space-between; gap: 0.6rem; width: 100%; min-height: 0; margin: 0; padding: 0.28rem 0.55rem; border: 0; border-bottom: 1px solid var(--panel-line); border-radius: 0; background: none; color: var(--text); font-size: 0.85rem; font-weight: 500; text-align: left; box-shadow: none; }
html.desktop #been .been-list > *:hover { background: rgb(255 255 255 / 0.03); }
html.desktop #been .been-list > *[data-level="4"] { box-shadow: inset 3px 0 0 var(--accent); }
html.desktop #been .been-list > *[data-level="3"] { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 75%, transparent); }
html.desktop #been .been-list > *[data-level="2"] { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
html.desktop #been .been-list > *[data-level="1"] { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 30%, transparent); }
html.desktop #been .game-actions { margin: 0; }

/* the curiosities: a dashboard of small tiles */
html.desktop #curios .dk-bar .cu-line { flex: none; margin: 0; font-size: 0.82rem; font-weight: 500; color: var(--muted); max-width: 30rem; }
html.desktop #curios .dk-tiles > p.small { margin: -0.2rem 0 0.5rem; max-width: 60rem; font-size: 0.78rem; line-height: 1.45; }
html.desktop #curios .cu-grid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.5rem; margin: 0 0 0.5rem; }
html.desktop #curios .cu-grid.cu-asked { grid-template-columns: 2fr 1fr; }
html.desktop #curios .cu-fact { gap: 0.7rem; padding: 0.65rem 0.8rem; }
html.desktop #curios .cu-big { font: 650 1.1rem/1.25 var(--sans); }
html.desktop #curios .cu-wide .cu-big, html.desktop #curios .cu-big.cu-long { font-size: 0.95rem; }
html.desktop #curios .cu-text .small, html.desktop #curios .cu-sub { font-size: 0.76rem; line-height: 1.4; }
html.desktop #curios .cu-sub { margin-top: 0.1rem !important; }
html.desktop #curios .cu-cover { width: 3rem; border-radius: 0.3rem; }
html.desktop #curios .cu-hours { margin-top: 0.5rem; padding: 0.7rem 0.9rem; }
html.desktop #curios .cu-hour-bars { height: 5rem; }
html.desktop #curios .cu-hour-ticks { font-size: 0.72rem; }
html.desktop #curios .cu-hours h3, html.desktop #curios .cu-rank-box h3 { margin: 0 0 0.4rem; font: 650 0.9rem/1.25 var(--sans); }
html.desktop #curios .cu-rank-box { padding: 0.6rem 0.85rem; }
html.desktop #curios .cu-rank li { padding: 0.15rem 0 0.2rem; font-size: 0.85rem; }
html.desktop #curios .cu-table-box { padding: 0.2rem 0.85rem; margin-bottom: 0.5rem; }
html.desktop #curios .cu-table th, html.desktop #curios .cu-table td { padding: 0.3rem 0.6rem 0.3rem 0; font-size: 0.84rem; border-bottom-color: var(--panel-line); }
html.desktop #curios .cu-table thead th { font-size: 0.7rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }
html.desktop #curios .cu-under { display: inline; margin-left: 0.4rem; font-size: 0.78rem; }

/* a lower window: the panes a little closer */
@media (max-height: 760px) {
  html.desktop #together .cal-day { min-height: 3rem; }
  html.desktop .dk-bar { padding-bottom: 0.55rem; margin-bottom: 0.55rem; }
}

/* the backstage: the site's blog in a pane of the window, its own head
   and foot left out */
html.desktop #notes { display: block; max-width: none; }
html.desktop #notes[hidden] { display: none; }
html.desktop .notes-head { display: none; } /* the pane's own bar has the way back */
/* the bar across the whole page, on top while the page scrolls under it */
html.desktop .notes-bar {
  --pad: clamp(1.25rem, 3vw, 2.75rem);
  position: sticky;
  top: -1.25rem; /* over main's padding too */
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 3.4rem;
  margin: -1.25rem calc(-1 * var(--pad)) 0;
  padding: 0.55rem var(--pad);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
html.desktop .notes-frame { display: block; width: 100%; min-height: 60vh; border: 0; background: var(--bg); overflow: hidden; }
html.desktop .notes-btn { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 2rem; padding: 0 0.7rem 0 0.5rem; border: 1px solid var(--line); border-radius: 0.45rem; background: var(--panel, transparent); color: var(--text); font: 500 0.84rem var(--sans); cursor: pointer; }
html.desktop .notes-btn:hover { background: rgb(255 255 255 / 0.06); }
html.desktop .notes-btn[hidden] { display: none; }
html.desktop .notes-btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html.desktop .notes-title { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; }
html.desktop .notes-name { padding: 0; border: 0; background: none; color: var(--text); font: 650 1rem var(--sans); cursor: pointer; }
html.desktop .notes-name:disabled { cursor: default; color: var(--text); opacity: 1; }
html.desktop .notes-name:not(:disabled):hover { color: var(--accent); }
html.desktop .notes-page { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; overflow: hidden; color: var(--muted); font-size: 0.86rem; }
html.desktop .notes-crumb { flex: none; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; }
html.desktop .notes-crumb::before { content: "›"; margin-right: 0.4rem; color: var(--muted); opacity: 0.7; }
html.desktop button.notes-crumb { cursor: pointer; }
html.desktop button.notes-crumb:hover { color: var(--text); }
html.desktop .notes-crumb[aria-current] { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
html.in-app body > header, html.in-app .site-footer { display: none !important; }
html.in-app body { min-height: 0; max-width: none; margin: 0; padding: 0; } /* left, as the window's other pages */

/* the backstage's pages, as the window's other pages: a bar on top, the
   categories as a segmented control, the posts as tiles */
html.in-app { --serif: var(--sans); --panel: #1a1917; --panel-line: #2b2825; --raised: #2d2a27; }
html.in-app main { max-width: 78rem; margin: 0; padding: 1.25rem 0 2rem; }
html.in-app h1, html.in-app h2, html.in-app h3 { font-family: var(--sans); letter-spacing: -0.005em; }
html.in-app .label { font-size: 0.68rem; letter-spacing: 0.08em; }
html.in-app .small { font-size: 0.82rem; color: var(--muted); }

html.in-app .blog-hero h1 { display: none; } /* the pane's bar names it */
html.in-app .blog-hero .lead { margin: 0.2rem 0 0.6rem; max-width: 62rem; font-size: 0.85rem; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
html.in-app .blog-hero { display: contents; }
html.in-app .blog-cats { display: flex; flex-wrap: wrap; gap: 0 0.15rem; margin: 0 0 0.4rem; padding: 0.15rem 0 0; border-bottom: 1px solid var(--panel-line); background: var(--bg); }
html.in-app .blog-cats .tag { position: relative; min-height: 2.3rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0 0.7rem; border: 0; border-radius: 0.35rem 0.35rem 0 0; background: transparent; color: var(--muted); font-size: 0.85rem; font-weight: 500; text-decoration: none; }
html.in-app .blog-cats .tag::after { content: ""; position: absolute; left: 0.55rem; right: 0.55rem; bottom: -1px; height: 2px; border-radius: 2px; background: transparent; }
html.in-app .blog-cats .tag:hover { color: var(--text); background: rgb(255 255 255 / 0.04); }
html.in-app .blog-cats .tag[aria-current="true"] { color: var(--text); font-weight: 600; }
html.in-app .blog-cats .tag[aria-current="true"]::after { background: var(--accent); }
html.in-app .blog-cats .tag:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
html.in-app .blog-cats .tag-n { min-width: 1.4rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: rgb(255 255 255 / 0.06); font-size: 0.7rem; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
html.in-app .blog-cats .tag[aria-current="true"] .tag-n { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }

html.in-app .blog-cat { margin: 0; }
html.in-app .blog-cat > h2 { margin: 1.4rem 0 0.1rem; font-size: 0.72rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
html.in-app .blog-cat > .small { margin: 0 0 0.55rem; }
html.in-app .post-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0.75rem; margin-top: 0.5rem; }
html.in-app .post-card { position: relative; flex-direction: column; align-items: stretch; gap: 0.7rem; padding: 0.75rem 0.9rem 0.85rem; border: 1px solid var(--panel-line); border-radius: 0.5rem; background: var(--panel); transition: background 0.12s, border-color 0.12s; }
html.in-app .post-card:hover { background: var(--raised); border-color: #3a3632; }
/* the row of covers across the tile, as many as fit; the rest wrap into
   rows of no height and are cut off */
html.in-app .post-card .mosaic { flex: none; grid-template-columns: repeat(6, 1fr); gap: 3px; background: none; } /* one row of six */
html.in-app .post-card .mosaic img { display: block; border-radius: 0.25rem; }
html.in-app .post-card-text { padding: 0; min-width: 0; gap: 0.2rem; }
html.in-app .post-card .label { margin: 0; font-size: 0.7rem; }
html.in-app .post-card h2 { margin: 0; font: 600 1.05rem/1.3 var(--sans); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.in-app .post-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole tile opens the post */
html.in-app .post-card h2 a:hover { text-decoration: none; }
html.in-app .post-card-text > p:not(.label):not(.byline):not(.downloads) { margin: 0.15rem 0 0; font-size: 0.9rem; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.in-app .post-card :is(.byline, .genre-legend, .downloads) { display: none; }
html.in-app .post-card .genre-bar { display: block; width: 100%; height: 3px; margin-top: 0.5rem; border-radius: 2px; }

/* a post: a reading pane */
html.in-app .crumbs { display: none; } /* the pane's bar has them */
/* a post's head: the covers beside the title, on a panel of its own */
html.in-app article.post:has(> .mosaic-wide) { margin-top: 0.9rem; }
html.in-app article.post { display: grid; grid-template-columns: 10.6rem minmax(0, 1fr); column-gap: 1.4rem; align-items: center; }
html.in-app article.post > :not(.post-head, .mosaic-wide) { grid-column: 1 / -1; }
html.in-app article.post:has(> .mosaic-wide) > .post-head { grid-column: 2; grid-row: 1; }
html.in-app article.post > .post-head { grid-column: 1 / -1; max-width: none; margin: 0; padding: 0.2rem 0; border: 0; }
html.in-app article.post:has(> .mosaic-wide)::before { content: ""; grid-column: 1 / -1; grid-row: 1; align-self: stretch; margin: -0.9rem 0; border: 1px solid var(--panel-line); border-radius: 0.6rem; background: linear-gradient(to right, var(--raised), var(--panel) 60%); }
html.in-app .mosaic-wide { grid-column: 1; grid-row: 1; position: relative; display: grid; grid-template-columns: repeat(2, 1fr); width: 9.5rem; height: 9.5rem; margin: 0 0 0 1.1rem; gap: 2px; background: none; border-radius: 0.4rem; overflow: hidden; box-shadow: 0 4px 14px rgb(0 0 0 / 0.45); }
html.in-app .mosaic-wide img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
html.in-app .mosaic-wide img:nth-child(n + 5) { display: none; }
html.in-app .post-head, html.in-app .post-head + * { position: relative; }
html.in-app .post-head .label { display: inline-block; margin: 0 0 0.45rem; padding: 0.15rem 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 0.66rem; }
html.in-app .post-head h1 { margin: 0 0 0.4rem; font: 680 1.85rem/1.2 var(--sans); text-wrap: balance; }
html.in-app .post-head .byline { margin: 0; font-size: 0.88rem; color: var(--muted); }
html.in-app article.post > .post-body, html.in-app article.post > .post-text { margin-top: 2.6rem; } /* the text set off from the header card, on the lists' posts and the blog's own pages alike */
html.in-app article.post:not(:has(> .mosaic-wide)) > .post-body, html.in-app article.post:not(:has(> .mosaic-wide)) > .post-text { margin-top: 1.2rem; }
html.in-app .post-body { grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.75rem; }
html.in-app .post-text { font-size: 1.06rem; line-height: 1.7; max-width: 44rem; }
html.in-app .wheel .post-text { max-width: none; } /* the wheel and the songs side by side */
html.in-app .post-text > p:first-child, html.in-app .post-text .lead { font-size: 1.14rem; line-height: 1.65; margin-bottom: 2.6rem; }
html.in-app .post-text h2, html.in-app .group h2 { margin: 1.8rem 0 0.6rem; padding: 0; border: 0; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
html.in-app .post-aside .card { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 0.5rem; padding: 0.85rem 1rem; box-shadow: none; }
html.in-app .post-aside h2 { margin: 0 0 0.3rem; font: 600 1.02rem/1.3 var(--sans); text-transform: none; letter-spacing: 0; color: var(--text); }
html.in-app .post-aside :is(.album-join, .button) { display: none; } /* what the site offers: here is the app already */
html.in-app .post-aside .finished { font-size: 0.92rem; }
html.in-app .entries { column-gap: 0.75rem; }
html.in-app .entries li { padding: 0.3rem 0.4rem; border-bottom-color: var(--panel-line); border-radius: 0.35rem; }
html.in-app .entries li:hover { background: rgb(255 255 255 / 0.03); }
html.in-app .entry-cover { width: 2.8rem; height: 2.8rem; border-radius: 0.25rem; overflow: hidden; }
html.in-app .entries strong { font-size: 0.97rem; }
html.in-app .entries strong + span { font-size: 0.86rem; }

/* -- the web: what the site's foot had, under the sidebar's -------------- */
.sb-legal, .tabbar, .sb-scrim { display: none; }
/* the site's head and foot not shown while the account is loading: it may
   be the program that comes */
html.web body.loading > header, html.web body.loading .site-footer { visibility: hidden; }
html.desktop .sb-legal { order: 9; }
html.desktop .sb-legal { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; padding: 0.2rem 0.55rem 0; font-size: 0.74rem; }
html.desktop .sb-legal a { color: var(--muted); text-decoration: none; }
html.desktop .sb-legal a:hover { color: var(--text); text-decoration: underline; }
html.desktop .sb-legal a[hidden] { display: none; }

/* -- a narrower screen: the panes one under the other, the page scrolling
   as one ------------------------------------------------------------------ */
@media (max-width: 64rem) {
  html.desktop body > main:has(> .dk-page:not([hidden])) { overflow-y: auto; padding-bottom: 3rem; }
  html.desktop .dk-page:not([hidden]) { display: block; height: auto; }
  html.desktop .dk-page .dk-panes { display: block; }
  html.desktop .dk-pane { overflow: visible; }
  html.desktop .dk-pane + .dk-pane { margin-top: 1.5rem; }
  html.desktop #curios .cu-grid.cu-asked { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 48rem) {
  html.desktop #list { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  html.desktop #list .side { position: static; }
}

/* -- a phone: the tabs at the foot, the sidebar a drawer ----------------- */
@media (max-width: 40rem) {
  html.desktop { --side-w: 0px; --tab-h: 3.6rem; }
  html.desktop body { grid-template-columns: minmax(0, 1fr); height: 100vh; height: 100dvh; font-size: 0.97rem; }
  html.desktop body:has(> .tabbar[hidden]) { --tab-h: 0px; }
  html.desktop body > main, html.desktop body > .loader {
    grid-column: 1;
    height: calc(100vh - var(--tab-h) - env(safe-area-inset-bottom));
    height: calc(100dvh - var(--tab-h) - env(safe-area-inset-bottom));
    padding: 1rem 1rem 2.5rem;
  }
  /* inputs at the size a phone does not zoom into */
  html.desktop :is(input, select, textarea) { font-size: 16px; }
  html.desktop button, html.desktop .button { min-height: 2.5rem; }
  html.desktop h1 { font-size: 1.3rem; }

  /* the sidebar, as it is on a wide screen, in a drawer */
  html.desktop .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 70;
    width: min(18rem, 86vw);
    height: 100%;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 0 0 40px rgb(0 0 0 / 0.6);
    padding-bottom: env(safe-area-inset-bottom);
  }
  html.desktop.sb-open .sidebar { transform: none; }
  html.desktop .sb-link span, html.desktop .sb-brand span { display: inline; }
  html.desktop .sb-head { display: flex; }
  html.desktop .sb-foot .chevron { display: inline-block; }
  html.desktop .sb-link { justify-content: flex-start; padding: 0.55rem 0.6rem; font-size: 0.98rem; }
  html.desktop .sb-brand { padding: 1.1rem 1.1rem 0.85rem; text-align: left; justify-content: flex-start; }
  html.desktop .sb-brand b { font-size: inherit; }
  html.desktop .sb-foot .menu-button { justify-content: space-between; padding: 0.3rem 0.5rem 0.3rem 0.3rem; }
  html.desktop .sb-group + .sb-group { margin-top: 0.9rem; padding-top: 0; border-top: 0; }
  html.desktop .sb-foot .menu { width: calc(min(18rem, 86vw) - 1.2rem); }
  html.desktop .sb-foot .lang-menu summary { justify-content: flex-start; width: auto; padding: 0.2rem 0.5rem; font-size: 0.85rem; gap: 0.35rem; }
  html.desktop .sb-foot .lang-menu summary::after { display: block; }
  html.desktop .sb-legal { justify-content: flex-start; padding: 0.2rem 0.55rem 0; font-size: 0.74rem; text-align: left; }
  html.desktop .sb-legal a[href="/blog"] { display: inline !important; }
  html.desktop .sb-scrim { position: fixed; inset: 0; z-index: 65; display: block; background: rgb(0 0 0 / 0.55); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  html.desktop.sb-open .sb-scrim { opacity: 1; pointer-events: auto; }

  html.desktop .tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    height: calc(var(--tab-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: #100f0e;
    border-top: 1px solid var(--line);
  }
  html.desktop .tabbar[hidden], html.desktop .tab[hidden] { display: none; }
  html.desktop .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 0;
    padding: 0.3rem 0.1rem;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--muted);
    font: 500 0.68rem/1.1 var(--sans);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  html.desktop .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
  html.desktop .tab .sb-icon { width: 1.35rem; height: 1.35rem; }
  html.desktop .tab[aria-current], html.desktop .tab-more[aria-expanded="true"] { color: var(--text); }
  html.desktop .tab[aria-current] .sb-icon { color: var(--accent); }

  html.desktop #notice {
    left: 50%;
    bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 0.75rem);
    transform: translateX(-50%);
    width: calc(100vw - 2rem);
    max-width: 36rem;
  }
  html.desktop .notes-bar { --pad: 1rem; top: -1rem; margin-top: -1rem; gap: 0.4rem; }
  html.desktop .notes-btn { padding: 0 0.55rem; }
  html.desktop :is(.notes-top, .notes-share) span { display: none; }
  html.desktop .notes-crumb:not([aria-current]) { display: none; }
  html.desktop .hub { grid-template-columns: minmax(0, 1fr); }
  html.desktop #badges .badge-tiles { grid-template-columns: minmax(0, 1fr); }
  html.desktop #badges .badges-sum { flex-wrap: wrap; }
  html.desktop #stars .stars-born { grid-template-columns: 4.5rem minmax(0, 1fr) 5.5rem; }
  html.desktop dialog.desk-cert { width: calc(100vw - 1.5rem); max-height: calc(100dvh - 1.5rem); }
}

/* the backstage's pages in a narrow pane */
@media (max-width: 40rem) {
  html.in-app main { padding: 0.9rem 0 2rem; }
  html.in-app article.post { grid-template-columns: 6.3rem minmax(0, 1fr); column-gap: 0.8rem; }
  html.in-app .mosaic-wide { width: 5.5rem; height: 5.5rem; margin-left: 0.8rem; }
  html.in-app article.post:has(> .mosaic-wide)::before { margin: -0.7rem 0; }
  html.in-app article.post:has(> .mosaic-wide) { margin: 0.7rem 0 0; }
  html.in-app .post-head h1 { font-size: 1.35rem; }
  html.in-app .post-text { font-size: 1rem; }
  html.in-app .post-head .byline { font-size: 0.74rem; }
  html.in-app .post-body { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  html.in-app .mosaic-wide img:nth-child(n + 5) { display: none; }
  html.in-app .blog-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  html.in-app .blog-cats .tag { flex: none; }
}
/* the page of the music of one's fourteenth year: the numbers on tiles,
   the picker of one's years with its timeline, the radio of fourteen,
   the rows of lists and the examples in the article */
.years .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.years-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 1.75rem; }
.years-fact { padding: 0.9rem 1rem; min-width: 0; }
.years-fact p { margin: 0; }
.years-big { font: 700 2rem/1.1 var(--serif); color: var(--accent); letter-spacing: -0.01em; margin-bottom: 0.3rem !important; }
.years-mine { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 1rem 0 0.5rem; }
.years-mine .years-fact { padding: 0; }
.years-mine .years-big { font-size: 1.6rem; color: var(--text); }

.years-pick { padding: 1.4rem 1.5rem 1.2rem; margin: 0 0 2rem; scroll-margin-top: 1rem; border: 1px solid var(--line); }
.years-pick h2 { margin: 0 0 0.9rem; }
.years-form { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }
.years-mode { display: inline-flex; flex-wrap: wrap; margin: 0; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }
.years-mode label { cursor: pointer; }
.years-mode input { position: absolute; opacity: 0; pointer-events: none; }
.years-mode span { display: block; padding: 0.4rem 0.9rem; border-radius: 999px; color: var(--muted); font-size: 0.92rem; }
.years-mode input:checked + span { background: var(--soft); color: var(--text); }
.years-mode input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.years-go { display: flex; gap: 0.5rem; }
.years-year input { width: 6.5rem; font: 600 1.15rem/1 var(--sans); padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--bg); color: var(--text); }
.years-year input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.years-chips { margin: 0.9rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.years-error { margin: 0.9rem 0 0; color: var(--accent); }
.years-summary { margin: 1.1rem 0 0; font: 600 1.2rem/1.3 var(--serif); }

.years-timeline { margin: 1.25rem 0 0; }
.yt-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.yt-head { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 0.3rem; font-size: 0.9rem; color: var(--muted); }
.yt-years { font-variant-numeric: tabular-nums; white-space: nowrap; }
.yt-track { position: relative; display: block; height: 0.5rem; border-radius: 999px; background: var(--soft); }
.yt-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--muted); }
.yt-peak .yt-head { color: var(--text); font-weight: 600; }
.yt-peak .yt-fill { background: var(--accent); }
.yt-scale { display: flex; justify-content: space-between; margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.years-covers { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 1rem; }
.years-covers a { display: flex; flex-direction: column; gap: 0.15rem; color: inherit; text-decoration: none; min-width: 0; }
.years-covers img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 0.5rem; background: var(--soft); margin-bottom: 0.35rem; transition: transform 0.15s; }
.years-covers a:hover img { transform: translateY(-2px); }
.years-covers strong { font-size: 0.9rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.years-covers span { font-size: 0.82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.years-covers-small { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }

.years-radio, .years-row { margin: 0 0 2rem; }
.years-radio h3, .years-row h3 { margin: 0 0 0.2rem; font-size: 1.2rem; }
.years-row > .small { margin: 0; }
.years-row-peak h3::before { content: ""; display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--accent); margin-right: 0.5rem; vertical-align: 0.1em; }
.years-lists { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 0.6rem; }
.years-lists a { display: flex; gap: 0.75rem; align-items: center; padding: 0.5rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--card); color: inherit; text-decoration: none; min-width: 0; transition: border-color 0.15s; }
.years-lists a:hover { border-color: var(--muted); }
.years-mini { flex: none; display: grid; grid-template-columns: repeat(2, 1.9rem); grid-auto-rows: 1.9rem; gap: 1px; border-radius: 0.4rem; overflow: hidden; background: var(--line); }
.years-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.years-list-text { display: flex; flex-direction: column; min-width: 0; }
.years-list-text strong { font-size: 0.95rem; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.years-list-text .small { margin: 0.15rem 0 0; }

.years-examples { display: grid; gap: 1.25rem; margin: 1.25rem 0 0.5rem; }
.years-example .label { margin: 0; }
.years-sources li { margin-bottom: 0.35rem; }

@media (max-width: 48rem) {
  .years-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .years-big { font-size: 1.6rem; }
  .years-pick { padding: 1.1rem 1rem; }
  .years-mode { display: flex; flex-direction: column; width: 100%; border-radius: 0.8rem; }
  .years-mode span { border-radius: 0.6rem; }
  .years-go { width: 100%; }
  .years-year { flex: 1; }
  .years-year input { width: 100%; }
  .years-mine .years-big { font-size: 1.35rem; }
  .years-covers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .years-covers-small { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
  .years-covers-small strong, .years-covers-small span { display: none; }
}
/* giving: the figures on tiles, the listener's points and the giver's
   card side by side, the causes with their share of the points as a bar,
   the music that helped most, the givers by their faces and the latest
   donations */
.hub-pic .hub-giving { display: block; width: 100%; height: 100%; background: var(--card); }
.hub-pic .hub-giving .disc { fill: var(--text); }
.hub-pic .hub-giving .groove { fill: none; stroke: var(--card); stroke-opacity: 0.25; stroke-width: 0.8; }
.hub-pic .hub-giving .heart { fill: var(--accent); }

.giving h2 { margin-top: 2rem; }
.giving-why { margin: -0.2rem 0 0.9rem; max-width: 60ch; }

.giving-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 1.25rem; }
.giving-figure { padding: 0.9rem 1rem; min-width: 0; }
.giving-figure p { margin: 0; }
.giving-big { font: 700 1.9rem/1.1 var(--serif); color: var(--accent); letter-spacing: -0.01em; margin-bottom: 0.3rem !important; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.giving-label { font-size: 0.92rem; }

.giving-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.giving-you h2, .giving-give h2 { margin: 0 0 0.6rem; }
.giving-you p, .giving-give p { margin: 0 0 0.6rem; }
.giving-you-points { font-size: 1rem; }
.giving-you-points strong { font: 700 1.6rem/1 var(--serif); margin-right: 0.15rem; font-variant-numeric: tabular-nums; }
.giving-you-helped { font-weight: 600; color: var(--accent); }
.giving-you select { width: 100%; }

.giving-form { margin: 0.9rem 0 0; }
.giving-form > select, .giving-form > input { display: block; width: 100%; margin: 0 0 0.6rem; }
.giving-form [hidden] { display: none; }
.giving-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.giving-row input { flex: 1 1 8rem; min-width: 0; }
.giving-row select { flex: 2 1 10rem; min-width: 0; }
.giving-plan { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.45rem; }
.giving-plan li { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 0.6rem; }
.giving-plan li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.giving-plan button { flex: none; }
.giving-change { margin: 1rem 0 0; }
.giving-change summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }
.giving-change .small-button { margin-top: 0.75rem; }

.giving-causes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.75rem; }
.giving-cause { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem; min-width: 0; }
.giving-cause p { margin: 0; }
.giving-voted { border-color: var(--accent); }
.giving-cause-head { display: flex; gap: 0.7rem; align-items: center; min-width: 0; }
.giving-logo { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 0.5rem; overflow: hidden; background: var(--soft); font: 700 1.1rem var(--sans); color: var(--muted); }
.giving-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.giving-cause-name { min-width: 0; }
.giving-cause-name h3 { margin: 0; font-size: 1rem; line-height: 1.25; }
.giving-cause-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.giving-bar { position: relative; height: 0.5rem; border-radius: 999px; background: var(--soft); overflow: hidden; margin-top: auto; }
.giving-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--accent); }
.giving-cause-figures { font-variant-numeric: tabular-nums; }
.giving-cause-links { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: center; }
.giving-cause-give { margin-top: auto; }
.giving-cause-give input { flex: 1 1 5rem; }
.giving-hidden { grid-column: 1 / -1; }
.giving-hidden summary { cursor: pointer; color: var(--muted); margin-bottom: 0.6rem; }
.giving-hidden .giving-cause { margin-bottom: 0.6rem; opacity: 0.75; }

.giving-music { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.6rem; }
.giving-album { display: flex; gap: 0.75rem; align-items: center; padding: 0.5rem; border: 1px solid var(--line); border-radius: 0.75rem; background: var(--card); color: inherit; text-decoration: none; min-width: 0; }
.giving-album:hover { border-color: var(--muted); }
.giving-album-text { display: flex; flex-direction: column; min-width: 0; }
.giving-album-text strong, .giving-album-text .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.giving-album-text .small { margin: 0; }
.giving-helped { font-size: 0.85rem; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }

.giving-givers, .giving-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.giving-giver, .giving-donation { display: flex; gap: 0.7rem; align-items: center; min-width: 0; }
.giving-giver img, .giving-donation img { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--soft); }
.giving-giver-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.giving-giver-text .small { margin: 0; }
.giving-me strong { color: var(--accent); }

@media (max-width: 48rem) {
  .giving-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .giving-big { font-size: 1.5rem; }
  .giving-cols { grid-template-columns: minmax(0, 1fr); }
}