/* Deliberately minimal: system fonts, default colors, OS light/dark. */
:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, sans-serif;
  max-width: 1000px; margin: 0 auto; padding: 1rem 1.25rem 4rem; line-height: 1.5;
}
.muted { opacity: 0.65; }
.border { border: 1px solid; border-color: color-mix(in srgb, currentColor 22%, transparent); }

header { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; align-items: baseline;
  border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  padding-bottom: 0.7rem; margin-bottom: 1.4rem; }
.logo { font-weight: 700; font-size: 1.15rem; }
nav { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; min-width: 0; }
nav a { white-space: nowrap; }
nav a.active { font-weight: 700; text-decoration: underline; }
@media (max-width: 640px) { nav .c { display: none; } }

h1 { font-size: 1.4rem; margin: 0.2rem 0; }
h2 { font-size: 1.1rem; margin: 1.8rem 0 0.7rem; }
.sub { opacity: 0.65; font-size: 0.9rem; margin-bottom: 1.2rem; }
.sect { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; margin: 1.6rem 0 0.6rem; }
input.search { width: 100%; font: inherit; padding: 0.55rem 0.7rem; margin-bottom: 0.3rem; }

ul.list { list-style: none; margin: 0; padding: 0; }
ul.list li { padding: 0.35rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
ul.list .n { float: right; opacity: 0.55; font-variant-numeric: tabular-nums; }
ul.list .pl { display: inline-block; width: 1.2em; opacity: 0.65; }

/* 3-column mix-in / track / mix-out flow: narrower sides, a gap, and a curved
   SVG connector from each in/out box to the center (drawn in app.js). 3 cols on mobile. */
.tri { position: relative; display: grid; grid-template-columns: 0.8fr 1.4fr 0.8fr; column-gap: 2.2rem; align-items: center; }
.conn-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.tri .side, .tri .center { position: relative; z-index: 1; }
.tri .side { font-size: 0.82rem; }
.tri h2 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.55; margin: 0 0 0.5rem; }
.center { padding: 0.9rem; border: 2px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 6px; }
.center .ti { font-size: 1.15rem; font-weight: 700; }
.center .by { opacity: 0.75; }
.play { font: inherit; background: none; border: none; padding: 0; cursor: pointer; color: LinkText; text-decoration: underline; }
.chip { display: block; padding: 0.4rem 0.5rem; margin-bottom: 0.35rem; border-radius: 5px; }
.chip .n { float: right; opacity: 0.55; }
@media (max-width: 640px) {
  .tri { column-gap: 1rem; }
  .center { padding: 0.6rem; }
  .tri .side { font-size: 0.72rem; }
  .chip { padding: 0.3rem 0.35rem; }
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; }
.card { display: block; padding: 0.7rem 0.8rem; border-radius: 6px; }

details.set { margin-bottom: 0.5rem; padding: 0.3rem 0.6rem; border-radius: 5px; }
details.set summary { cursor: pointer; }
details.set .date { float: right; opacity: 0.55; }
details.set ol { margin: 0.4rem 0 0.2rem; }

button.linklike { font: inherit; background: none; border: none; padding: 0; cursor: pointer;
  color: LinkText; text-decoration: underline; }

/* playback (YouTube) + genre mix */
.export { margin: 0.5rem 0 1.1rem; font-size: 0.85rem; }
.play { font: inherit; background: none; cursor: pointer; white-space: nowrap;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 5px; padding: 0.1rem 0.5rem; }
.yt { position: relative; aspect-ratio: 16 / 9; max-width: 480px; margin: 0.5rem 0; border-radius: 6px; overflow: hidden; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
ol.mix { list-style: none; margin: 0; padding: 0; }
ol.mix li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
  padding: 0.4rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
ol.mix .num { opacity: 0.5; font-variant-numeric: tabular-nums; min-width: 1.6rem; text-align: right; }
ol.mix .trk { flex: 1; min-width: 12rem; }
ol.mix .yt { flex-basis: 100%; }

/* modal for the full "played by" list */
dialog { max-width: 520px; width: 90%; border-radius: 8px; padding: 1rem 1.2rem; }
dialog ul { columns: 2; }
dialog::backdrop { background: rgba(0,0,0,0.4); }

footer { margin-top: 3rem; padding-top: 0.8rem;
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); opacity: 0.55; font-size: 0.8rem; }