/* Explore mode, on top of style.css (the whole map's page): the same map, glass panels, card,
   sheet and player. Only what explore mode adds is here: the start, your artists in the bar,
   the note under it, the Your artists card's parts. Colours are style.css's --s-* properties;
   nothing here redefines one. Sizes are tokens.css's, as on every page. */

#field {
  position: fixed;
  inset: 0;
  display: block;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
#field:active { cursor: grabbing; }
body.explore:not(.has-view) #field { pointer-events: none; }
body.explore:not(.has-view) .x-bar,
body.explore:not(.has-view) .x-ctrl,
body.explore:not(.has-view) .s-card,
body.explore:not(.has-view) .s-hint { display: none; }

/* ------------------------------------------------------------ the start */

.x-start {
  position: fixed; inset: 0;
  z-index: 10;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid; justify-items: center; align-items: start;
  padding: 20px var(--pad-lg) 64px;
  /* The start's one accent, for its actions: the map's own colours stay for its dots. */
  --x-acc: #3fd0a4; --x-acc-ink: #04140f; --x-acc-soft: rgba(63, 208, 164, 0.14);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .x-start { --x-acc: #0f8a6a; --x-acc-ink: #fff; --x-acc-soft: rgba(15, 138, 106, 0.1); }
}
:root[data-theme="light"] .x-start { --x-acc: #0f8a6a; --x-acc-ink: #fff; --x-acc-soft: rgba(15, 138, 106, 0.1); }
.x-start[hidden] { display: none; }
/* One grid for both visits. A first one: the import, then search, then three ways in. A later one
   (.x-back): search, your artists beside a friend, Try next, your imports beside the whole map. */
.x-start-in {
  width: min(1160px, 100%);
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--pad-lg);
  grid-template-areas: "head head" "import import" "search search" "mine mine" "modes modes";
}
.x-back .x-start-in { grid-template-areas: "head head" "search search" "mine mine" "yours friend" "next next" "imps map" "import import"; }
.x-head { grid-area: head; }
.x-import { grid-area: import; }
.x-search-row { grid-area: search; }
.x-mine { grid-area: mine; }
.x-modes-sec { grid-area: modes; }
#back-yours { grid-area: yours; }
#back-friend { grid-area: friend; }
#back-next { grid-area: next; }
#back-imports { grid-area: imps; }
#back-map { grid-area: map; }
.x-back .x-modes-sec, .x-back:not(.x-importing) .x-import { display: none; }

.x-head { display: flex; align-items: center; justify-content: space-between; gap: var(--pad); min-height: var(--control-h); }
/* The name over the start screen; the bar that carries it elsewhere is hidden there. */
.x-brand { margin: 0; font-size: var(--fs-xl); }
.x-start .x-brand span { display: inline; }
.x-links { display: flex; flex-wrap: wrap; gap: var(--gap-half); }
.x-links a, .x-links button {
  height: var(--control-h); padding: 0 12px;
  display: inline-flex; align-items: center;
  border: 0; border-radius: var(--round); background: transparent;
  color: var(--s-muted); font-size: var(--fs-md); font-weight: 600; text-decoration: none;
}
.x-links a:hover, .x-links button:hover { background: var(--s-raise); color: var(--s-text); }
.x-title { margin: 0; font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }

.x-big {
  /* Above the import panel: its list drops over it (each glass panel is its own stacking context). */
  position: relative; z-index: 2;
  height: var(--control-h);
  border-radius: var(--corner);
  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);
}
.x-big:focus-within { background: var(--s-panel); }
/* The box shows the focus, not the field inside it. */
.solo .s-search input:focus-visible { outline: none; }
.x-big:focus-within { outline: 2px solid var(--s-you); outline-offset: 2px; }
.x-big > svg { width: 16px; height: 16px; margin: 0 var(--gap-half) 0 12px; }
.x-big .s-opts { left: 0; right: 0; }

.s-opts li { align-items: center; }
.s-opts li .o-meta { margin-left: auto; }
.o-add {
  width: var(--pad-lg); height: var(--pad-lg); flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; padding: 0;
  background: var(--s-raise-2); color: var(--s-text);
}
.o-add svg { width: 14px; height: 14px; }
.o-add:hover { background: var(--s-you-soft); color: var(--s-you); }
.s-opts li.o-look { justify-content: flex-start; gap: 8px; font-size: var(--fs-md); color: var(--s-muted); }
.s-opts li.o-look .spin { color: var(--s-you); }
.s-opts li.o-tip { justify-content: flex-start; gap: 4px; padding: 8px 12px 4px; cursor: default; font-size: var(--fs-sm); color: var(--s-faint); }
.s-opts li.o-tip svg { width: 12px; height: 12px; }
.s-opts .o-head {
  padding: 8px 12px 4px; cursor: default;
  font-size: var(--fs-sm); font-weight: 600; color: var(--s-faint);
}

.x-try { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); color: var(--s-muted); font-size: var(--fs-md); }
.x-try button {
  height: var(--chip-h); padding: 0 12px;
  border: 0.5px solid var(--s-line); 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;
}
.x-try button:hover { background: var(--s-raise-3); }
.x-try[hidden] { display: none; }
.x-try-names { display: contents; }
.x-plus-tip { display: inline-flex; align-items: center; gap: var(--gap-half); }
.x-plus-tip svg { width: 12px; height: 12px; padding: var(--gap-half); border-radius: 50%; background: var(--s-raise-2); color: var(--s-text); box-sizing: content-box; }

.x-mine { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); }
.x-mine[hidden] { display: none; }
.x-seeds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gap); }
.x-seeds .chip-you {
  display: inline-flex; align-items: center;
  height: var(--chip-h); max-width: 100%;
  padding: 0 4px 0 0;
  border-radius: var(--round);
  background: var(--s-raise-2);
}
.x-seeds span.cy-go { cursor: default; }
.x-go {
  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-you-soft); color: var(--s-you);
  font-size: var(--fs-md); font-weight: 700;
}
.x-go svg { width: 16px; height: 16px; }

/* Panels on the start: the import, and each part of a later visit. */
.x-import, .x-panel, .x-mode {
  border-radius: var(--corner);
  background: var(--s-panel-solid);
  border: 0.5px solid var(--s-line);
  box-shadow: var(--s-shadow);
}
.x-panel { padding: var(--pad-lg); display: grid; gap: var(--pad); align-content: start; min-width: 0; }
.x-panel[hidden] { display: none; }
.x-panel h2, .x-modes-sec h2 { margin: 0; display: flex; align-items: center; gap: 12px; font-size: var(--fs-xl); font-weight: 700; }
.x-panel h2::before, .x-modes-sec h2::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--x-acc); }
.x-panel > p { margin: -4px 0 0; font-size: var(--fs-md); color: var(--s-muted); }
.x-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* The start's actions: one accent, or soft. */
.x-act {
  height: var(--control-h); padding: 0 var(--pad);
  display: inline-flex; align-items: center; gap: 8px; justify-self: start;
  border: 0; border-radius: var(--round);
  background: var(--x-acc); color: var(--x-acc-ink);
  font-size: var(--fs-md); font-weight: 700; text-decoration: none; cursor: pointer;
}
.solo a.x-act { color: var(--x-acc-ink); }
.solo a.x-act.x-soft { color: var(--x-acc); }
.x-act svg { width: 14px; height: 14px; }
.x-act.x-soft { background: var(--x-acc-soft); color: var(--x-acc); }

/* The import: the big line, two steps, the other ways. */
.x-import { position: relative; overflow: hidden; border-radius: var(--corner); padding: 32px; display: grid; gap: 28px; }
.x-import > :not(.x-sky) { position: relative; }
.x-sky {
  position: absolute; top: 0; right: 0; width: 46%; height: 152px; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.x-lede { margin: 12px 0 0; max-width: 640px; font-size: var(--fs-lg); line-height: 1.5; color: var(--s-muted); text-wrap: pretty; }
.x-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pad); counter-reset: step; }
.x-step {
  counter-increment: step;
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-content: start;
  padding: 20px; border-radius: var(--corner); background: var(--s-raise);
}
.x-step::before {
  content: counter(step); width: 28px; height: 28px; border-radius: 50%; grid-row: span 2;
  display: grid; place-items: center;
  background: var(--x-acc); color: var(--x-acc-ink); font-size: var(--fs-md); font-weight: 700;
}
.x-step p { margin: 4px 0 0; font-size: var(--fs-lg); text-wrap: pretty; }
.x-steps .x-drop { padding: 20px; gap: 12px; border-color: var(--x-acc); background: var(--x-acc-soft); }
.x-steps .x-drop.over { background: var(--s-you-soft); }
.x-steps .x-file-btn { padding: 0 var(--pad); background: var(--x-acc); color: var(--x-acc-ink); }
.x-other { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); font-size: var(--fs-md); color: var(--s-muted); }
.x-chip {
  height: var(--chip-h); padding: 0 12px;
  border: 0; border-radius: var(--round); background: var(--s-raise); color: var(--s-text);
  font-size: var(--fs-md); font-weight: 600;
}
.x-chip:hover { background: var(--s-raise-2); }
.x-chip[hidden] { display: none; }
.x-result { margin: -12px 0 0; }
.x-result[hidden] { display: none; }
.x-result .why .spin, .cd-scroll .why .spin { color: var(--s-you); margin-right: 4px; }

/* Shared with Duet's start (../duet/index.html): its drop zones, file button, login and foot. */
.x-drop {
  display: grid; gap: 12px;
  padding: var(--pad);
  border: 1px dashed var(--s-raise-3);
  border-radius: var(--corner);
  transition: background 0.15s, border-color 0.15s;
}
.x-drop.over { background: var(--s-you-soft); border-color: var(--s-you); }
.x-file { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; cursor: pointer; }
.x-file-btn {
  height: var(--control-h); padding: 0 var(--pad);
  display: inline-flex; align-items: center;
  border-radius: var(--round);
  background: var(--s-text); color: var(--s-sky);
  font-size: var(--fs-md); font-weight: 700;
}
.x-file:focus-within .x-file-btn { outline: 2px solid var(--s-text); outline-offset: 2px; }
.x-file-or { color: var(--s-muted); }
.x-spotify {
  margin-top: auto; align-self: flex-start;
  height: var(--control-h); padding: 0 var(--pad);
  border: 0; border-radius: var(--round);
  background: var(--play); color: #000;
  font-size: var(--fs-md); font-weight: 700;
}
.x-spotify[hidden] { display: none; }
.x-private { margin: 12px 0 0; font-size: var(--fs-sm); color: var(--s-faint); }
.x-foot { margin: var(--gap) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--pad); font-size: var(--fs-md); }
.x-foot a, .x-foot button, .x-card-foot a, .x-card-foot button {
  border: 0; background: none; padding: 0;
  color: var(--s-muted); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.x-foot a:hover, .x-foot button:hover, .x-card-foot a:hover, .x-card-foot button:hover { color: var(--s-text); }

/* Or type an artist: one row, the Try buttons kept together. */
.x-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--pad); padding: 0 var(--gap); }
.x-or { font-size: var(--fs-lg); }
.x-search-row .s-search { flex: 1 1 320px; max-width: 520px; }
.x-start .x-big:focus-within { outline-color: var(--x-acc); }
.x-back .x-search-row { padding: 0; }
.x-back .x-or { display: none; }
.x-back .x-search-row .s-search { max-width: 640px; }

/* Your artists: the five you have most of. */
.x-faces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--pad); align-items: start; }
.x-face { display: grid; justify-items: center; gap: 8px; text-align: center; min-width: 0; }
.x-face b { font-size: var(--fs-md); font-weight: 700; line-height: 1.25; }
.x-face > span:not(.x-pic) { margin-top: -4px; font-size: var(--fs-sm); color: var(--s-muted); }
.x-pic {
  width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: var(--s-raise-2); color: var(--s-text); font-size: var(--fs-2xl); font-weight: 700;
}
.x-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.x-from { font-size: var(--fs-md); color: var(--s-muted); }

/* Try next. */
.x-nexts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.x-next {
  width: 100%; display: grid; align-content: start; gap: 8px; padding: 12px; text-align: left;
  border: 0; border-radius: var(--corner); background: var(--s-raise); color: inherit;
}
.x-next:hover { background: var(--s-raise-2); }
.x-next .x-pic { border-radius: var(--corner-in); }
.x-next b { font-size: var(--fs-md); font-weight: 700; }
.x-next > span:not(.x-pic) { margin-top: -4px; font-size: var(--fs-sm); color: var(--x-acc); }

/* Your imports. */
.x-imps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.x-imp { display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px var(--pad); border-radius: var(--corner); background: var(--s-raise); }
.x-imp > div { display: grid; gap: 4px; min-width: 0; flex: 1; }
.x-imp b { font-size: var(--fs-md); font-weight: 700; }
.x-imp span { font-size: var(--fs-sm); color: var(--s-muted); }
.x-imp button {
  height: var(--chip-h); padding: 0 12px; flex: none;
  border: 0; border-radius: var(--round); background: transparent;
  color: var(--s-muted); font-size: var(--fs-sm); font-weight: 600;
}
.x-imp button.x-open { background: var(--x-acc-soft); color: var(--x-acc); }
.x-imp button:not(.x-open):hover { background: var(--s-raise-2); color: var(--s-text); }

/* Small pictures of the map, a picture, a duet. */
.x-preview { width: 100%; height: 120px; display: block; border-radius: var(--corner-in); background: var(--s-sky); }

/* Three ways in. */
.x-modes-sec { display: grid; gap: var(--pad); margin-top: var(--gap); }
.x-modes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pad-lg); }
.x-mode {
  width: 100%; height: 100%; padding: var(--pad-lg);
  display: grid; gap: 12px; align-content: start; text-align: left;
  color: inherit; text-decoration: none; font-size: var(--fs-md);
}
.x-mode:hover { border-color: var(--s-raise-3); }
.x-mode b { font-size: var(--fs-lg); font-weight: 700; }
.x-mode > span:not(.x-act) { margin-top: -4px; color: var(--s-muted); }
.x-mode .x-act { margin-top: 4px; }

@media (max-width: 900px) {
  .x-start-in, .x-back .x-start-in { grid-template-columns: minmax(0, 1fr); }
  .x-start-in { grid-template-areas: "head" "import" "search" "mine" "modes"; }
  .x-back .x-start-in { grid-template-areas: "head" "search" "mine" "yours" "next" "friend" "imps" "map" "import"; }
  .x-steps, .x-modes { grid-template-columns: minmax(0, 1fr); }
  .x-nexts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .x-sky { width: 70%; }
}

/* ------------------------------------------- your artists, the note */

/* Your artists in the bar, as on the whole map; "All" opens them together. */
.x-yours:empty { display: none; }
.x-yours .cy-go { max-width: 200px; }
.x-yours .cy-nm { overflow: hidden; text-overflow: ellipsis; }
.x-all {
  height: var(--chip-h); padding: 0 12px 0 var(--gap);
  display: inline-flex; align-items: center; gap: var(--gap-half);
  border-radius: var(--round);
  font-size: var(--fs-md); font-weight: 600; color: var(--s-you);
}
.x-all svg { width: 16px; height: 16px; }
.x-all, .x-note {
  border: 0.5px solid var(--s-line);
  background: var(--s-panel);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--s-shadow);
}
.x-note {
  margin: 0;
  display: flex; align-items: center; gap: var(--gap);
  padding: var(--gap) 12px;
  border-radius: var(--corner);
  font-size: var(--fs-md); color: var(--s-muted);
}
.x-note[hidden] { display: none; }
.x-note .spin { color: var(--s-near); }

/* The tip sits at the left, clear of the card on the right, and stays while the card is open beside it. */
body.explore .s-hint { left: var(--edge); transform: none; }
body.explore .s-hint.gone { transform: translateY(8px); }
@media (min-width: 640px) { body.explore.card-open .s-hint:not([hidden]) { display: flex; } }

/* The names as buttons over the canvas: see-through, for the keyboard; the canvas draws the name. */
.x-names { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.x-name {
  position: absolute; left: 0; top: 0;
  margin: 0; padding: 0; border: 0;
  background: none; color: transparent;
  border-radius: var(--corner-in);
  pointer-events: none;
}
.solo .x-name:focus-visible { outline: 2px solid var(--s-you); outline-offset: 2px; }

.x-off-nm { font-style: italic; }
.x-seeds-card .chip-you { height: auto; min-height: var(--chip-h); }
.x-seeds-card .cy-go { gap: var(--gap-half); max-width: none; }
.x-count { margin-left: 4px; font-size: var(--fs-sm); font-weight: 500; color: var(--s-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.x-short { display: none; }

/* Link, beside the zoom buttons: a plain word; on, it is marked by its background, nothing round it. */
.x-link { white-space: nowrap; }
.x-link[aria-pressed="true"] { color: var(--s-you); background: linear-gradient(var(--s-you-soft), var(--s-you-soft)), var(--s-panel); }

/* Back and Clear beside Link while there is a chain, and Whole picture or Previous picture: plain words in one panel. */
.x-path {
  height: var(--control-h); padding: var(--gap-half);
  display: flex; gap: var(--gap-half);
  border-radius: var(--corner);
  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);
  box-sizing: border-box;
}
.x-path[hidden] { display: none; }
.x-path button[hidden] { display: none; }
.x-path button {
  height: var(--chip-h); padding: 0 12px;
  border: 0; border-radius: var(--corner-in);
  background: none; color: var(--s-muted);
  font-size: var(--fs-md); font-weight: 600;
  white-space: nowrap;
}
.x-path button:hover { color: var(--s-text); background: var(--s-raise); }

/* ------------------------------------------------------------ the popover */

/* Beside the clicked artist's dot (explore.js placePop moves it), over the map and under the card. */
.x-pop {
  position: fixed; left: 0; top: 0;
  z-index: 22;
  width: 288px;
  box-sizing: border-box;
  padding: var(--pad);
  border-radius: var(--corner);
  background: var(--s-card);
  -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);
  display: grid; gap: 12px;
}
.x-pop[hidden], .x-pop.off { display: none; }
.pp-head { display: grid; grid-template-columns: 48px minmax(0, 1fr) var(--chip-h); gap: 12px; align-items: center; }
.pp-photo {
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #2c3a78, #121732 70%);
}
.pp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.pp-photo .ini { font-size: var(--fs-lg); font-weight: 700; color: #f4e3b5; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .pp-photo { background: radial-gradient(circle at 35% 30%, #c9d3ff, #93a2e4 75%); }
  :root:not([data-theme="dark"]) .pp-photo .ini { color: #0c0f1c; }
}
:root[data-theme="light"] .pp-photo { background: radial-gradient(circle at 35% 30%, #c9d3ff, #93a2e4 75%); }
:root[data-theme="light"] .pp-photo .ini { color: #0c0f1c; }
.pp-what { min-width: 0; }
.pp-name { margin: 0; font-size: var(--fs-xl); font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.pp-why { margin: var(--gap-half) 0 0; font-size: var(--fs-sm); color: var(--s-muted); line-height: 1.35; }
.pp-close { align-self: start; }
.pp-song { display: grid; grid-template-columns: var(--chip-h) minmax(0, 1fr); gap: var(--gap); align-items: center; padding: var(--gap); margin: 0; border-radius: var(--corner-in); background: var(--s-raise); }
.pp-t { display: flex; flex-direction: column; min-width: 0; }
.pp-label { font-size: var(--fs-xs); font-weight: 600; color: var(--s-faint); }
.pp-t .t { font-size: var(--fs-lg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-credit { margin: 0; font-size: var(--fs-xs); color: var(--s-faint); }
.x-pop .quiet { margin: 0; font-size: var(--fs-md); color: var(--s-faint); }
.pp-acts { display: flex; gap: var(--gap); flex-wrap: wrap; }
.pp-acts .pill:first-child { padding: 0 12px; }
/* What can be done with it in the picture: plain words in one row, under a hairline. */
.pp-node { display: flex; flex-wrap: wrap; gap: var(--gap-half); margin: 0 calc(-1 * var(--gap)); padding-top: var(--gap); border-top: 0.5px solid var(--s-line); }
.pp-node button {
  height: var(--chip-h); padding: 0 var(--gap);
  border: 0; border-radius: var(--corner-in);
  background: none; color: var(--s-muted);
  font-size: var(--fs-md); font-weight: 600;
  white-space: nowrap;
}
.pp-node button:hover { color: var(--s-text); background: var(--s-raise); }
.pp-node button[aria-pressed="true"] { color: var(--s-text); background: var(--s-raise-2); }

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

.x-card-foot { margin: var(--pad) 0 0; display: flex; flex-wrap: wrap; gap: var(--pad); font-size: var(--fs-sm); }
.cd-photo.x-you { background: var(--s-you-soft); }
.cd-photo.x-you svg { width: 28px; height: 28px; color: var(--s-you); }
.cd-sec.x-first { margin-top: 16px; }
.x-offmap { margin-top: 12px; }
.near button .nm { overflow-wrap: anywhere; }

.x-switch {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px;
  font-size: var(--fs-md); font-weight: 600;
  cursor: pointer;
}
.x-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.x-track {
  position: relative; flex: none;
  width: 36px; height: 20px;
  border-radius: var(--round);
  background: var(--s-raise-3);
  transition: background 0.15s;
}
.x-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--s-text);
  transition: transform 0.15s var(--s-ease);
}
.x-switch.off { color: var(--s-faint); cursor: default; }
.x-switch.off .x-track { opacity: 0.5; }
.x-hide-why { margin: 8px 0 0; font-size: var(--fs-sm); }
.x-switch input:checked + .x-track { background: var(--s-you); }
.x-switch input:checked + .x-track::after { transform: translateX(16px); background: #fff; }
.x-switch input:focus-visible + .x-track { outline: 2px solid var(--s-text); outline-offset: 2px; }

details.x-off { margin-top: 8px; font-size: var(--fs-md); }
details.x-off summary { cursor: pointer; font-weight: 600; color: var(--s-text); }
details.x-off ul { margin: var(--gap) 0 0; padding: 0 0 0 var(--pad); color: var(--s-muted); display: grid; gap: 4px; }
details.x-off .quiet { display: inline; font-size: var(--fs-sm); color: var(--s-faint); }

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

@media (max-width: 639px) {
  .x-start { padding: 12px var(--edge) 48px; }
  .x-head { flex-wrap: wrap; row-gap: 0; }
  .x-links { width: 100%; margin-left: -8px; gap: 0; }
  .x-links a, .x-links button { padding: 0 8px; }
  .x-sky { display: none; }
  .x-title { font-size: var(--fs-2xl); }
  .x-import { padding: var(--pad-lg) var(--pad); gap: var(--pad-lg); }
  .x-faces { display: flex; overflow-x: auto; gap: 12px; margin: 0 calc(-1 * var(--pad-lg)); padding: 0 var(--pad-lg); scrollbar-width: none; }
  .x-face { flex: 0 0 76px; }
  .x-face b { font-size: var(--fs-sm); }
  .x-nexts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two rows: the picture's own controls at the foot (zoom, Link, the chain's Back and Clear), the links above. */
  body.explore .x-ctrl { gap: var(--gap); justify-content: flex-start; flex-wrap: wrap-reverse; align-items: flex-end; }
  body.explore .x-ctrl::before { content: ""; order: 3; flex-basis: 100%; height: 0; margin-top: calc(-1 * var(--gap)); }
  body.explore .x-ctrl .x-link { order: 1; }
  body.explore .x-ctrl .s-mode, body.explore .x-ctrl #sources-open { order: 4; }
  body.explore .s-hint { bottom: calc(var(--edge) + 2 * var(--control-h) + var(--gap) + var(--pad)); }
  body.explore .x-ctrl .s-zoom { order: 0; }
  body.explore .x-ctrl .s-src-btn, body.duet .x-ctrl .s-src-btn { padding: 0 12px; }
  .x-long { display: none; }
  .x-short { display: inline; }
  .x-yours { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--edge)); padding: 0 var(--edge) var(--gap); }
  .x-yours::-webkit-scrollbar { display: none; }
  .x-yours .chip-you, .x-all, .x-note { flex: none; box-shadow: none; }
  .x-yours .cy-go { max-width: 160px; }
  /* A phone's popover is a small sheet at the foot, over the controls, as the card is. */
  .x-pop {
    left: 0; right: 0; top: auto; bottom: 0;
    width: auto; transform: none !important;
    border-radius: var(--corner) var(--corner) 0 0; border-bottom: 0;
    padding: var(--pad) var(--pad) max(var(--pad), env(safe-area-inset-bottom));
    z-index: 26;
  }
  body.has-player .x-pop { bottom: var(--player-h, 0px); border-radius: var(--corner) var(--corner) 0 0; box-shadow: none; }
  body.pop-open .x-ctrl { opacity: 0; pointer-events: none; }
  body.explore .x-ctrl .x-path { order: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .x-track, .x-track::after, .x-drop { transition: none; }
}