/* Soundfield. A night sky of artists: the map fills the screen, the controls float over it.
   The design system's tokens come from base.css (linked first) and are never
   redefined here. Every size (spacing, control height, radius, type) comes from tokens.css,
   linked next, shared by Explore, Demo and Duet. The page's own colours are --s-* properties: in the dark they are the
   system's tokens or sit beside them; in the light they are their daytime counterparts. */

:root {
  --s-dark: 1;
  --s-sky: #04060c;
  --s-star: #dfe6ff;
  --s-text: var(--text);
  --s-muted: var(--muted);
  --s-faint: var(--faint);
  --s-line: var(--line);
  --s-you: var(--a);
  --s-like: var(--b);
  --s-near: #f4e3b5;
  --s-both: #ffb347;
  --s-cloud: #5b6dff;
  --s-scene: #ff8f66;
  --s-scene-text: rgba(255, 196, 160, 0.72);
  --s-panel: rgba(14, 16, 24, 0.74);
  --s-panel-solid: #0e1018;
  --s-card: rgba(12, 14, 21, 0.92);
  --s-raise: rgba(255, 255, 255, 0.07);
  --s-raise-2: rgba(255, 255, 255, 0.12);
  --s-raise-3: rgba(255, 255, 255, 0.18);
  --s-you-soft: var(--a-soft);
  --s-like-soft: var(--b-soft);
  --s-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  --s-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Light: the system's choice unless the person chose dark, or the person's choice (theme.js). The two blocks match (page.test.mjs). */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --s-dark: 0;
    --s-sky: #f2f3f7;
    --s-star: #1c2440;
    --s-text: #0c0f1c;
    --s-muted: #3d4257;
    --s-faint: #5d6276;
    --s-line: rgba(12, 18, 40, 0.12);
    --s-you: #0a7fc0;
    --s-like: #c81f72;
    --s-near: #9a5b00;
    --s-both: #c86b00;
    --s-cloud: #8796e6;
    --s-scene: #f39a6b;
    --s-scene-text: rgba(160, 72, 24, 0.75);
    --s-panel: rgba(255, 255, 255, 0.82);
    --s-panel-solid: #fff;
    --s-card: rgba(255, 255, 255, 0.94);
    --s-raise: rgba(12, 18, 40, 0.05);
    --s-raise-2: rgba(12, 18, 40, 0.09);
    --s-raise-3: rgba(12, 18, 40, 0.14);
    --s-you-soft: rgba(10, 127, 192, 0.12);
    --s-like-soft: rgba(200, 31, 114, 0.1);
    --s-shadow: 0 16px 48px rgba(20, 28, 60, 0.16);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --s-dark: 0;
  --s-sky: #f2f3f7;
  --s-star: #1c2440;
  --s-text: #0c0f1c;
  --s-muted: #3d4257;
  --s-faint: #5d6276;
  --s-line: rgba(12, 18, 40, 0.12);
  --s-you: #0a7fc0;
  --s-like: #c81f72;
  --s-near: #9a5b00;
  --s-both: #c86b00;
  --s-cloud: #8796e6;
  --s-scene: #f39a6b;
  --s-scene-text: rgba(160, 72, 24, 0.75);
  --s-panel: rgba(255, 255, 255, 0.82);
  --s-panel-solid: #fff;
  --s-card: rgba(255, 255, 255, 0.94);
  --s-raise: rgba(12, 18, 40, 0.05);
  --s-raise-2: rgba(12, 18, 40, 0.09);
  --s-raise-3: rgba(12, 18, 40, 0.14);
  --s-you-soft: rgba(10, 127, 192, 0.12);
  --s-like-soft: rgba(200, 31, 114, 0.1);
  --s-shadow: 0 16px 48px rgba(20, 28, 60, 0.16);
  color-scheme: light;
}

html:has(body.solo), body.solo {
  height: 100%;
  overflow: hidden;
  background: var(--s-sky);
  color: var(--s-text);
  overscroll-behavior: none;
}
body.solo { font-size: var(--fs-md); line-height: 1.45; }
/* Every control speaks in the page's type, never the browser's. */
.solo button, .solo input { font-family: var(--font); }
/* The ring follows each control's own corners (round on a round button), so it never sets a radius of its own. */
.solo :focus-visible { outline: 2px solid var(--s-text); outline-offset: 2px; }
.solo a { color: inherit; }

#sky {
  position: fixed;
  inset: 0;
  display: block;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
#sky:active { cursor: grabbing; }

/* Floating glass panels: the bar, the card, the player, the controls. */
.s-find, .s-card, .s-player, .s-zoom, .s-src-btn, .s-legend, .s-hint, .s-yours .chip-you, .s-yours .ex-note {
  background: var(--s-panel);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 0.5px solid var(--s-line);
  box-shadow: var(--s-shadow);
}

.icon-btn {
  width: var(--chip-h); height: var(--chip-h);
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--s-muted);
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--s-raise-2); color: var(--s-text); }
.icon-btn svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------- the bar */

.s-bar {
  position: fixed;
  top: var(--edge); left: var(--edge);
  width: 360px;
  z-index: 20;
  display: flex; flex-direction: column; gap: var(--gap);
  pointer-events: none;
}
.s-bar > * { pointer-events: auto; }

.s-find {
  /* Above your artists' row: the search's list drops over it. Each glass panel is its own stacking
     context (backdrop-filter), so without this the chips, later in the page, paint over the list. */
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: var(--gap);
  padding: var(--gap-half) var(--gap-half) var(--gap-half) var(--pad);
  border-radius: var(--corner);
}
.s-brand {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none;
  font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.01em;
  white-space: nowrap;
  flex: none;
}

.s-search {
  position: relative;
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  height: var(--control-h);
  border-radius: var(--corner-in);
  background: var(--s-raise);
  transition: background 0.15s;
}
.s-search:focus-within { background: var(--s-raise-2); }
.s-search > svg { width: 16px; height: 16px; margin: 0 4px 0 8px; color: var(--s-faint); flex: none; }
.s-search input {
  flex: 1 1 auto; min-width: 0;
  height: 100%;
  border: 0; background: none; outline: none;
  font-size: var(--fs-lg); color: var(--s-text);
  padding: 0 4px;
}
.s-search input::placeholder { color: var(--s-faint); }
.s-search input::-webkit-search-cancel-button { display: none; }
.s-search kbd {
  font: 600 var(--fs-xs)/1 var(--font);
  color: var(--s-faint);
  border: 0.5px solid var(--s-line);
  border-radius: var(--corner-xs);
  padding: var(--gap-half);
  margin-right: var(--gap);
}
.s-search:focus-within kbd { display: none; }

.s-opts {
  position: absolute; top: calc(100% + 8px); left: -8px; right: -8px;
  list-style: none; margin: 0; padding: 4px;
  background: var(--s-panel-solid);
  border: 0.5px solid var(--s-line);
  border-radius: var(--corner);
  box-shadow: var(--s-shadow);
  max-height: min(60vh, 384px); overflow-y: auto;
}
.s-opts li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 12px;
  border-radius: var(--corner-in);
  cursor: pointer;
}
.s-opts li[aria-selected="true"] { background: var(--s-raise-2); }
.s-opts .o-name { font-size: var(--fs-lg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-opts .o-meta { font-size: var(--fs-sm); color: var(--s-faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.s-opts .o-none { color: var(--s-muted); cursor: default; }

.s-yours {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--gap);
}
.s-yours .chip-you {
  display: inline-flex; align-items: center;
  height: var(--chip-h);
  border-radius: var(--round);
  padding: 0 4px 0 0;
  max-width: 100%;
}
.cy-go {
  display: inline-flex; align-items: center; gap: 8px;
  height: 100%;
  border: 0; border-radius: var(--round); background: none;
  padding: 0 4px 0 12px;
  font-size: var(--fs-md); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cy-go i { width: 8px; height: 8px; border-radius: 50%; background: var(--s-you); flex: none; }
.cy-x { width: var(--pad-lg); height: var(--pad-lg); border: 0; border-radius: 50%; background: none; color: var(--s-faint); display: grid; place-items: center; padding: 0; }
.cy-x:hover { background: var(--s-raise-2); color: var(--s-text); }
.solo .cy-x:focus-visible { outline-offset: 0; }
.cy-x svg { width: 12px; height: 12px; }
.s-yours .ex-note {
  height: var(--chip-h); display: inline-flex; align-items: center;
  padding: 0 12px; border-radius: var(--round);
  font-size: var(--fs-sm); color: var(--s-muted);
}

/* --------------------------------------------------------- controls */

.s-ctrl {
  position: fixed; left: var(--edge); bottom: var(--edge);
  z-index: 15;
  display: flex; align-items: flex-end; gap: var(--gap);
  transition: opacity 0.2s;
}
.s-zoom { display: flex; gap: var(--gap-half); padding: var(--gap-half); border-radius: var(--corner); box-sizing: border-box; height: var(--control-h); }
.s-src-btn {
  height: var(--control-h); padding: 0 var(--pad);
  box-sizing: border-box;
  border-radius: var(--corner);
  font-size: var(--fs-md); font-weight: 600; color: var(--s-muted);
}
.s-src-btn:hover { color: var(--s-text); }
/* The link between the two modes looks like the Sources button beside it. */
.s-mode { display: inline-flex; align-items: center; text-decoration: none; }
.s-legend {
  height: var(--control-h); margin: 0; padding: 0 var(--pad) 0 12px;
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: var(--corner);
  font-size: var(--fs-sm); font-weight: 600; color: var(--s-muted);
  white-space: nowrap;
}
.s-legend i { display: inline-block; border-radius: 50%; background: var(--s-star); flex: none; }
.s-legend .l1 { width: 3px; height: 3px; opacity: 0.5; }
.s-legend .l2 { width: 5px; height: 5px; opacity: 0.75; }
.s-legend .l3 { width: 7px; height: 7px; margin-right: 4px; }

.s-hint {
  position: fixed; left: 50%; bottom: calc(var(--edge) + var(--control-h) + var(--pad));
  transform: translateX(-50%);
  z-index: 16;
  margin: 0;
  display: flex; align-items: center; gap: 12px;
  width: max-content;
  max-width: min(520px, calc(100vw - 32px));
  padding: var(--gap) var(--gap) var(--gap) var(--pad);
  border-radius: var(--corner);
  font-size: var(--fs-md); color: var(--s-muted);
  transition: opacity 0.4s, transform 0.4s var(--s-ease);
}
.s-hint b { color: var(--s-text); font-weight: 600; }
.s-hint.gone { opacity: 0; transform: translate(-50%, 8px); }
.s-hint[hidden] { display: none; }
body.card-open .s-hint { display: none; }

.s-status {
  position: fixed; inset: 0; margin: auto;
  width: fit-content; height: fit-content;
  padding: var(--pad); border-radius: var(--corner);
  background: var(--s-panel-solid); color: var(--s-text);
  font-size: var(--fs-lg);
}
.s-status[hidden] { display: none; }

/* ------------------------------------------------------------ the card */

.s-card {
  position: fixed;
  top: var(--edge); right: var(--edge); bottom: var(--edge);
  width: 384px;
  z-index: 25;
  border-radius: var(--corner);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateX(16px);
  pointer-events: none;
  transition: opacity 0.24s, transform 0.32s var(--s-ease);
}
.s-card.open { opacity: 1; transform: none; pointer-events: auto; }
/* The card holds the most reading: nearly solid, so the map never shows through its text. */
.s-card { background: var(--s-card); }
.cd-scroll { overflow-y: auto; padding: var(--pad); flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
.cd-grab { display: none; }
.cd-close { position: absolute; top: var(--pad); right: var(--pad); z-index: 2; }

/* The photo is the card's hero, full width, with its credit right under it. Most artists have none: initials then. */
.cd-close { background: var(--s-panel); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cd-hero { margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--pad); }
.cd-hero-img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--s-raise); }
.cd-hero img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 22%;
  opacity: 0; transition: opacity 0.3s;
}
.cd-hero img.in { opacity: 1; }
.cd-hero figcaption.cd-credit { margin: var(--gap) var(--pad) 0; }

.cd-head {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: var(--pad);
  margin-right: calc(var(--chip-h) + var(--gap));
}
.cd-head.has-photo { display: block; margin-right: 0; }
.cd-head.has-photo .cd-photo { display: none; }
.cd-photo {
  position: relative;
  width: 64px; height: 64px; border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #2c3a78, #121732 70%);
  display: grid; place-items: center;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .cd-photo { background: radial-gradient(circle at 35% 30%, #c9d3ff, #93a2e4 75%); }
}
:root[data-theme="light"] .cd-photo { background: radial-gradient(circle at 35% 30%, #c9d3ff, #93a2e4 75%); }
.cd-photo .ini { font-size: var(--fs-2xl); font-weight: 700; color: #f4e3b5; letter-spacing: 0.02em; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .cd-photo .ini { color: #0c0f1c; }
}
:root[data-theme="light"] .cd-photo .ini { color: #0c0f1c; }
.cd-head h2 { margin: 0; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.cd-head.has-photo h2 { font-size: var(--fs-3xl); font-weight: 800; line-height: 1.1; }

.cd-facts { margin: 16px 0 0; display: grid; gap: 4px; }
.cd-facts div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.cd-facts dt { color: var(--s-faint); font-size: var(--fs-sm); font-weight: 600; }
.cd-facts dd { margin: 0; font-size: var(--fs-md); }
.cd-facts .num { font-weight: 700; font-variant-numeric: tabular-nums; }
/* The day a count was taken sits on its own line under it, so the year never wraps alone. */
.cd-facts .when { display: block; color: var(--s-faint); font-size: var(--fs-sm); white-space: nowrap; }

.cd-acts { margin-top: var(--pad); display: flex; gap: var(--gap); }
.pill {
  height: var(--chip-h); padding: 0 12px 0 var(--gap);
  display: inline-flex; align-items: center; gap: var(--gap-half);
  border: 0; border-radius: var(--round);
  background: var(--s-raise-2); color: var(--s-text);
  font-size: var(--fs-md); font-weight: 600;
  transition: background 0.15s;
}
.pill svg { width: 16px; height: 16px; }
.pill:hover { background: var(--s-raise-3); }
.pill.on { background: var(--s-you-soft); color: var(--s-you); }
.pill:disabled { opacity: 0.5; cursor: default; }

.cd-sec { margin-top: 24px; padding-top: 16px; border-top: 0.5px solid var(--s-line); }
.cd-sec h3 {
  margin: 0 0 8px;
  font-size: var(--fs-md); font-weight: 600;
  color: var(--s-muted);
}
.cd-sec h4 { margin: 12px 0 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--s-faint); }
.why { margin: 0 0 8px; color: var(--s-muted); font-size: var(--fs-md); }
.quiet { margin: 0; color: var(--s-muted); font-size: var(--fs-md); }

.s-songs { list-style: none; margin: 0 -8px; padding: 0; }
.s-songs li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 8px; border-radius: var(--corner-in); }
.s-songs li.focus { background: var(--s-like-soft); }

/* A play button says what the player does: plays (filled), Apple's player is up and waits for its Play,
   finding a preview, paused. Never a pause sign before sound. */
.play {
  width: var(--chip-h); height: var(--chip-h); border-radius: 50%;
  border: 0; padding: 0; flex: none;
  display: grid; place-items: center;
  background: var(--s-raise-2); color: var(--s-text);
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.play svg { width: 14px; height: 14px; transform: translateX(1px); }
.play:hover { transform: scale(1.06); }
.play.playing { background: var(--s-like); color: #fff; }
.play.playing svg, .play.ready svg, .play.apple svg { transform: none; }
.play.ready, .play.apple, .play.paused { background: var(--s-like-soft); color: var(--s-like); }
.play.loading { color: var(--s-like); }
.spin {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: none;
  animation: spin-pulse 0.7s ease-in-out infinite alternate;
}
@keyframes spin-pulse { from { transform: scale(0.55); opacity: 0.45; } to { transform: scale(1.1); opacity: 1; } }

.song {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 0;
  border: 0; border-radius: var(--corner-in); background: none; padding: 4px 0;
  text-align: left;
}
.song .tt { display: flex; flex-direction: column; min-width: 0; }
.song .t { font-size: var(--fs-lg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.note { font-size: var(--fs-sm); font-weight: 600; color: var(--s-like); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note.loading, .note.none { color: var(--s-faint); font-weight: 500; }
.song .go { color: var(--s-faint); flex: none; display: grid; place-items: center; align-self: center; }
.song .go svg, .why svg { width: 12px; height: 12px; color: var(--s-near); }
.why svg { display: inline-block; vertical-align: -1px; }
button.song:hover .go svg, .focus .song .go svg { color: var(--s-like); }

.like { margin-top: 12px; }
.like-list { list-style: none; margin: 0 -8px; padding: 0; }
.like-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 8px; border-radius: var(--corner-in); }
.like-list li.up { background: var(--s-like-soft); }
.like-list .lk { display: flex; flex-direction: column; min-width: 0; }
.like-list .t { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.like-list .by {
  align-self: flex-start; max-width: 100%;
  border: 0; background: none; padding: 0; text-align: left;
  font-size: var(--fs-sm); font-weight: 600; color: var(--s-like);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.like-list button.by:hover { text-decoration: underline; text-underline-offset: 2px; }
.like-list .by.off { color: var(--s-faint); font-weight: 500; }
.cd-scroll .more {
  border: 0; padding: 0; margin-top: 4px;
  background: none; color: var(--s-text);
  font-size: var(--fs-sm); font-weight: 700;
  text-decoration: underline; text-underline-offset: 2px;
}
.like .more { margin-top: 8px; }

.near { list-style: none; margin: 4px -8px 0; padding: 0; counter-reset: n; }
.near button {
  width: 100%;
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: center;
  border: 0; background: none; text-align: left;
  padding: 4px 8px; border-radius: var(--corner-in);
}
.near button:hover { background: var(--s-raise); }
.near .rk { font-size: var(--fs-xs); color: var(--s-faint); font-variant-numeric: tabular-nums; }
.near .nm { font-size: var(--fs-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.s-intro {
  margin: 0; font-size: var(--fs-md); line-height: 1.55; color: var(--s-text);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.s-intro.open { display: block; }
.s-genres { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.s-genres li { height: var(--pad-lg); padding: 0 12px; border-radius: var(--round); background: var(--s-raise-2); font-size: var(--fs-sm); font-weight: 600; display: inline-flex; align-items: center; }

.cd-credit { margin: 8px 0 0; color: var(--s-faint); font-size: var(--fs-xs); line-height: 1.6; }
.cd-credit.cd-end { margin-top: 24px; }
.cd-credit a { color: var(--s-muted); }
.cd-links { display: flex; gap: 16px; margin-top: 8px; font-size: var(--fs-sm); }
.cd-links a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; color: var(--s-muted); }
.cd-links a:hover { color: var(--s-text); }
.cd-links svg { width: 12px; height: 12px; }

/* ------------------------------------------------------------ player */

.s-player {
  position: fixed; left: var(--edge); bottom: calc(var(--edge) + var(--control-h) + var(--pad));
  width: 360px;
  z-index: 18;
  border-radius: var(--corner);
  padding: var(--gap) var(--gap) 12px;
  animation: rise 0.3s var(--s-ease) both;
}
.s-player[hidden] { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.pl-head { display: flex; align-items: center; gap: 8px; padding: 0 0 8px 8px; }
.pl-what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pl-title { font-size: var(--fs-md); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-by { font-size: var(--fs-sm); color: var(--s-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-embed { display: block; width: 100%; height: 175px; border: 0; border-radius: var(--corner); overflow: hidden; background: var(--s-raise); }
.pl-wait { margin: 0; padding: 12px 8px; color: var(--s-muted); }
.pl-wait { display: flex; align-items: center; gap: 8px; }
.pl-wait .spin { color: var(--s-like); }
.pl-audio { display: block; width: 100%; height: var(--control-h); }
.pl-foot { margin: 8px 8px 0; font-size: var(--fs-sm); color: var(--s-muted); }
.pl-foot a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; color: var(--s-text); }
.pl-foot svg { width: 12px; height: 12px; }
/* Under Apple's player: its link and the close button on one line, the same in every state. */
.pl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 0 8px; }
.pl-row .pl-close svg { width: 16px; height: 16px; }
body.has-player .s-hint { display: none; }

/* ----------------------------------------------------------- sources */

/* The dialog keeps its round corners and its inside scrolls: a scrollbar on the dialog itself cut its right corners square. */
.s-sources {
  width: min(560px, calc(100vw - 2 * var(--edge)));
  max-height: min(80vh, 720px);
  margin: auto;
  overflow: hidden;
  padding: 0;
  border: 0.5px solid var(--s-line);
  border-radius: var(--corner);
  background: var(--s-panel-solid); color: var(--s-text);
  box-shadow: var(--s-shadow);
}
.s-sources::backdrop { background: rgba(0, 0, 0, 0.45); }
.s-sources[open] { display: flex; flex-direction: column; }
.s-sources-in { position: relative; padding: var(--pad-lg); overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; }
.s-sources h2 { margin: 0 calc(var(--chip-h) + var(--gap)) var(--gap) 0; font-size: var(--fs-xl); font-weight: 700; }
#sources-close { position: absolute; top: var(--pad); right: var(--pad); }
.s-sources-lead { margin: 0 0 16px; color: var(--s-muted); }
.src-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.src-list li { display: grid; gap: 4px; padding-top: 12px; border-top: 0.5px solid var(--s-line); }
.src-name { font-weight: 700; font-size: var(--fs-md); }
.src-name a { text-decoration: none; }
.src-name a:hover { text-decoration: underline; }
.src-lic { font-size: var(--fs-sm); color: var(--s-muted); }
.src-note { font-size: var(--fs-sm); color: var(--s-faint); }
.src-card { margin: 0 0 24px; }
.src-card h3 { margin: 0 0 4px; font-size: var(--fs-md); font-weight: 700; }
.src-card-how { margin: 0 0 16px; font-size: var(--fs-sm); color: var(--s-muted); }

/* --------------------------------------------- a laptop with less room */

@media (max-width: 1100px) and (min-width: 640px) {
  .s-card { width: 344px; }
  .s-bar { width: 336px; }
  .s-player { width: 336px; }
}

/* -------------------------------------------------------------- phone */

@media (max-width: 639px) {
  .s-bar {
    top: 0; left: 0; right: 0; width: auto;
    padding: var(--gap) var(--edge) 0;
    padding-top: max(var(--gap), env(safe-area-inset-top));
  }
  .s-find { padding: var(--gap-half) var(--gap-half) var(--gap-half) var(--gap); }
  .s-bar .s-brand { display: none; }
  .s-search kbd { display: none; }
  .s-yours { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--edge)); padding: 0 var(--edge) var(--gap); }
  .s-yours::-webkit-scrollbar { display: none; }
  .s-yours .chip-you, .s-yours .ex-note { flex: none; box-shadow: none; }
  .cy-go { max-width: 160px; }

  .s-ctrl { left: var(--edge); right: var(--edge); bottom: max(var(--edge), env(safe-area-inset-bottom)); justify-content: space-between; }
  .s-zoom { order: 2; }
  #zoom-in, #zoom-out { display: none; }
  body.card-open .s-ctrl { opacity: 0; pointer-events: none; }

  .s-card {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto;
    max-height: 62vh;
    border-radius: var(--corner) var(--corner) 0 0;
    border-bottom: 0;
    transform: translateY(24px);
  }
  .s-card.open { transform: none; }
  /* The handle has its own strip of the sheet above the photo, never on it. */
  .cd-grab { display: block; width: var(--control-h); height: var(--gap-half); border-radius: var(--corner-xs); background: var(--s-raise-3); margin: var(--gap) auto; flex: none; }
  .cd-scroll { padding: var(--pad); padding-bottom: max(var(--pad), env(safe-area-inset-bottom)); }
  .cd-close { top: var(--pad); right: var(--pad); }
  .cd-head { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .cd-hero { margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--pad); }
  .cd-hero-img { aspect-ratio: 5 / 2; }
  .cd-hero figcaption.cd-credit { margin: var(--gap) var(--pad) 0; }
  .cd-head.has-photo h2 { font-size: var(--fs-2xl); }
  .cd-photo { width: 48px; height: 48px; }
  .cd-photo .ini { font-size: var(--fs-xl); }

  .s-player { left: 0; right: 0; bottom: 0; width: auto; border-radius: var(--corner) var(--corner) 0 0; padding-bottom: max(var(--pad), env(safe-area-inset-bottom)); z-index: 30; }
  /* The player docks under the sheet; together they keep the top third of the screen for the map. */
  body.has-player .s-card { bottom: var(--player-h, 0px); border-radius: var(--corner) var(--corner) 0 0; max-height: max(160px, calc(66vh - var(--player-h, 0px))); box-shadow: none; }
  body.has-player .s-ctrl { opacity: 0; pointer-events: none; }
  .s-hint { left: var(--edge); right: var(--edge); width: auto; transform: none; }
  .s-legend { padding: 0 12px; }
  .s-hint.gone { transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .s-card, .s-hint, .s-ctrl, .cd-hero img, .play { transition: none; }
  .spin { animation: none; }
  .s-player { animation: none; }
}