/*  The quick search panel, on the shop page rather than over a DAW.
 *
 *  Everything about how it looks comes from the application's own
 *  src/spotlight.css, which is copied here untouched. This file only says the
 *  handful of things that are true of a frame on a web page and false of a
 *  floating window: it has a background of its own, it is already open, it sits
 *  where the frame puts it, and it cannot hand a file to another application.
 *
 *  Not overwritten by tools/refresh-sonus-demo.cjs. It belongs to the demo.
 */

html, body {
  /* The colour of the page it is embedded in, which is paper and not a dark
     band. It was painted near-black on the assumption that this section sat on
     the same dark island as the application above it. It does not: the frame
     became a slab of black across a light page. The panel itself stays dark,
     because that is what it is, and floats on the paper like a photograph. */
  background: #f4f4f6;
  height: 100%;
}

:root {
  /* Ten pixels of air above the bar, and the frame cut to the panel.
   
     It was centred in a frame sized for a window, which left a band of empty
     paper between the keys and the thing they open. The panel now starts at the
     top of its frame and the frame is only as tall as the panel needs, so the
     two read as one gesture. */
  --top: 10px;
}

body.is-demo .scrim {
  justify-content: flex-start;
  padding: var(--top) 20px 0;
}

body.is-demo .panel {
  /* Its own colour, unchanged; only the shadow differs. A dark object on a light
     page wants a softer, shorter one than the same object over a DAW, and short
     matters here because the frame clips it. */
  box-shadow:
    0 14px 34px rgba(14, 15, 19, 0.18),
    0 2px 8px rgba(14, 15, 19, 0.10);
}

/* Dragging a file out of a browser tab and into a digital audio workstation is
   not something a web page can do. Saying so where the drag was attempted is
   better than a gesture that appears to fail. */
.panel {
  position: relative;
}

.panel::after {
  content: "Dragging into your DAW works in the application, not in a browser tab.";
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translate(-50%, 8px);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: var(--text);
  background: rgba(var(--glow-rgb), 0.14);
  border: 1px solid rgba(var(--glow-rgb), 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms linear, transform 220ms var(--ease);
}

.panel.is-demo-nudge::after {
  opacity: 1;
  transform: translate(-50%, 0);
}


/* ── On a phone ─────────────────────────────────────────────────────────────
   The frame is now as wide as the screen rather than a scaled-down copy of a
   desktop one, so the panel has to give something up. The same things the
   application's list gives up as its window narrows: the shape first, then the
   tempo and the key, until what is left is the name, what it is, and how long.

   The panel itself keeps its size. A smaller panel would be a picture of one. */
@media (max-width: 620px) {
  :root { --top: 8px; }

  .panel { border-radius: 12px; }

  .row {
    grid-template-columns: 30px 20px minmax(0, 1fr) 44px;
    gap: 9px;
    height: 46px;
    padding: 0 11px 0 9px;
  }

  .row-wave { display: none; }

  /* One column of the three, and the one that always has something in it. */
  .row-meta { grid-template-columns: 44px; }
  .row-meta .m-bpm,
  .row-meta span:nth-child(1),
  .row-meta span:nth-child(2) { display: none; }

  .bar { padding: 0 12px 0 14px; }
  .bar-input { font-size: 16px; }
  .bar-esc { display: none; }

  .hint { gap: 11px; font-size: 10px; padding: 0 11px; }
  .hint span:nth-child(3),
  .hint span:nth-child(4) { display: none; }
}