/* Duet, on top of Soundfield's style.css and explore.css: the same glass panels, card, sheet,
   chips, search and player. Only what Duet adds is here: the two pictures, the bar with the
   view buttons, each person's row, the start's two columns, the Compare panel.
   A is Soundfield's --s-you, B its --s-like, what both share its --s-both; nothing here
   redefines a colour. Sizes are tokens.css's: the bar sits where Explore's search panel sits,
   as tall, and every button in it is one control high. */

/* ------------------------------------------------------------ the pictures */

.d-panes { position: fixed; inset: 0; }
.d-pane {
  position: absolute; left: 0; top: 0;
  display: block;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
.d-pane:active { cursor: grabbing; }
.d-pane[hidden] { display: none; }
/* The line between the two pictures: they are two pictures, side by side. */
.d-split { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--s-line); pointer-events: none; }
.d-split.across { left: 0; right: 0; bottom: auto; width: auto; height: 1px; }
.d-split[hidden] { display: none; }

body.duet:not(.has-view) .d-pane { pointer-events: none; }
body.duet:not(.has-view) .d-bar,
body.duet:not(.has-view) .d-who,
body.duet:not(.has-view) .d-split { display: none; }

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

.d-bar {
  position: fixed; top: var(--edge); left: var(--edge);
  z-index: 20;
  display: flex; align-items: center; gap: var(--gap);
  padding: var(--gap-half) var(--gap-half) var(--gap-half) var(--pad);
  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);
}
.d-views { display: flex; gap: var(--gap-half); padding: var(--gap-half); border-radius: var(--corner-in); background: var(--s-raise); box-sizing: border-box; height: var(--control-h); }
.d-views button, .d-plain {
  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;
  transition: background 0.15s, color 0.15s;
}
.d-plain { height: var(--control-h); text-decoration: underline; text-underline-offset: 2px; }
.d-views button:hover, .d-plain:hover { color: var(--s-text); }
.d-views button[aria-pressed="true"] { background: var(--s-raise-3); color: var(--s-text); }

/* Back and Clear, one pair a view while Link has a chain there: Explore's (explore.css .x-path), placed by
   duet.js over its own pane's foot. Link and Lock views: Explore's Link button (explore.css .x-link). */
.d-path { position: fixed; left: 0; top: 0; z-index: 19; }
.d-lock[hidden] { display: none; }
body.duet:not(.has-view) .d-path { display: none; }

/* ---------------------------------------------------- each person's row */

.d-who {
  position: fixed; z-index: 19;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap);
  max-width: calc(100vw - 2 * var(--edge));
  pointer-events: none;
}
.d-who > * { pointer-events: auto; }
.d-who-nm {
  margin: 0;
  height: var(--chip-h); padding: 0 12px;
  display: inline-flex; align-items: center; gap: var(--gap);
  border-radius: var(--round);
  font-size: var(--fs-md); font-weight: 700;
  background: var(--s-panel);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 0.5px solid var(--s-line);
}
.d-who-nm i, .d-name i { width: 10px; height: 10px; border-radius: 50%; background: var(--s-you); flex: none; }
.d-chips { display: contents; }
.d-who .chip-you { padding-right: 0; }
.d-who .cy-go { padding-right: 12px; max-width: 200px; }
.d-who .cy-nm { overflow: hidden; text-overflow: ellipsis; }

/* B wears its own colour wherever A wears --s-you. */
.d-who[data-side="b"] .d-who-nm i, .d-who[data-side="b"] .cy-go i,
.d-person[data-side="b"] .d-name i, .d-person[data-side="b"] .cy-go i { background: var(--s-like); }
.d-person[data-side="b"] .x-drop.over { background: var(--s-like-soft); border-color: var(--s-like); }
.d-person[data-side="b"] .x-big:focus-within { outline-color: var(--s-like); }

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

.d-start-in { width: min(920px, 100%); display: flex; flex-direction: column; gap: var(--pad); }
.d-lead { margin: 0; max-width: 640px; font-size: var(--fs-lg); color: var(--s-muted); }
.d-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pad); margin-top: var(--gap); }
.d-person {
  display: flex; flex-direction: column; gap: 12px;
  padding: var(--pad-lg);
  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);
}
/* The search's list drops over the chips and the import under it. */
.d-person .d-search { position: relative; z-index: 2; }
.d-name { display: flex; align-items: center; gap: 12px; }
.d-name i { width: 12px; height: 12px; }
.d-name input {
  flex: 1 1 auto; min-width: 0;
  height: var(--control-h); padding: 0 var(--gap); margin-left: calc(-1 * var(--gap));
  border: 0; border-radius: var(--corner-in);
  background: none; color: var(--s-text);
  font: 700 var(--fs-xl)/1 var(--font);
}
.d-name input::placeholder { color: var(--s-faint); }
.d-name input:hover { background: var(--s-raise); }
.d-name input:focus-visible { outline: 2px solid var(--s-text); outline-offset: 0; background: var(--s-raise); }
.d-seeds:empty { display: none; }
.d-drop .x-file { gap: var(--gap) 12px; }
.d-drop .x-file-or { font-size: var(--fs-sm); }
.d-drop .x-file-or a { color: var(--s-text); }
.d-drop .x-spotify { justify-self: start; }
.d-drop .x-spotify[hidden] { display: none; }
.d-person .x-result { margin-top: 0; }
.d-person .x-result .why { margin: 0; }

.d-go-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--pad); margin-top: var(--gap); }
.d-go {
  height: var(--control-h); padding: 0 var(--pad-lg);
  border: 0; border-radius: var(--round);
  background: var(--s-text); color: var(--s-sky);
  font-size: var(--fs-md); font-weight: 700;
}
.d-go:disabled { background: var(--s-raise-2); color: var(--s-muted); cursor: default; }

/* ------------------------------------------------------- the Compare panel */

.d-pair { background: var(--s-raise); display: flex; align-items: center; justify-content: center; gap: var(--gap-half); }
.d-pair i { width: 16px; height: 16px; border-radius: 50%; }
.d-a-dot { background: var(--s-you); }
.d-b-dot { background: var(--s-like); }
.d-both-dot { background: var(--s-both); }
.d-legend { list-style: none; margin: var(--pad) 0 0; padding: 0; display: grid; gap: var(--gap-half); font-size: var(--fs-md); color: var(--s-muted); }
.d-legend li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--gap); align-items: baseline; }
.d-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; transform: translateY(1px); }
.d-a { color: var(--s-you); font-weight: 600; }
.d-b { color: var(--s-like); font-weight: 600; }
.d-list button { align-items: start; }
.d-list .rk { padding-top: var(--gap-half); }
.d-li { display: flex; flex-direction: column; min-width: 0; }
.d-why { font-size: var(--fs-sm); color: var(--s-muted); overflow-wrap: anywhere; }
.d-where { margin: 12px 0 0; }
.pill.d-pill-a.on { background: var(--s-you-soft); color: var(--s-you); }
.pill.d-pill-b.on { background: var(--s-like-soft); color: var(--s-like); }
.cd-acts { flex-wrap: wrap; }


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

@media (max-width: 639px) {
  .d-bar {
    top: 0; left: 0; right: 0;
    border-radius: 0; border-width: 0 0 0.5px;
    padding: var(--gap) var(--edge);
    padding-top: max(var(--gap), env(safe-area-inset-top));
    box-shadow: none;
    gap: var(--gap-half);
  }
  .d-bar .s-brand { display: none; }
  .d-views button, .d-plain { padding: 0 12px; }
  .d-bar .d-plain { margin-left: auto; }
  .d-people { grid-template-columns: minmax(0, 1fr); }
  .d-person { padding: var(--pad); }
  .d-who { gap: var(--gap-half); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .d-who::-webkit-scrollbar { display: none; }
  .d-who .chip-you, .d-who-nm { flex: none; }
  .d-who .cy-go { max-width: 140px; }
  .d-go { width: 100%; }
  body.duet .d-ctrl { gap: var(--gap); justify-content: flex-start; flex-wrap: wrap-reverse; align-items: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .d-views button, .d-plain { transition: none; }
}
.d-both { color: var(--s-both); font-weight: 600; }