/* concepts/baby-zen/app/css/sheet-music.css
   ---------------------------------------------------------------------------
   Screen 2 — the Music sheet.

   The sheet has no height of its own: the chassis pins it to the bottom and
   lets the content decide where the lip lands. Every margin below is therefore
   load-bearing twice over — once for the element it precedes, and once for the
   y 328.6 the fasit puts the lip at. They were measured off Sound.png at a
   390 x 844 viewport, not chosen; before nudging one, run

       node concepts/baby-zen/app/dev/fasit.mjs sound --boxes

   Fractional pixels are deliberate. Rounding all of them the same way walks the
   lip four points up the screen.
   --------------------------------------------------------------------------- */

.bz-sheet--music .bz-sheet-body {
  padding: 0 28px 28px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */
.bz-music-head {
  position: relative;
  margin-top: 7px;
}

.bz-music-title {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 2px 16px rgba(150, 170, 255, 0.18));
}

/* The fasit's X sits in a 30 pt circle flush with the content edge, not the
   38 pt one the chassis defaults to. */
.bz-sheet--music .bz-sheet-close {
  position: absolute;
  top: 3px;
  right: 0;
  width: 30px;
  height: 30px;
  background: rgba(126, 140, 224, 0.11);
  border-color: var(--stroke-soft);
}
.bz-sheet--music .bz-sheet-close svg { width: 13px; height: 13px; }

.bz-music-sub {
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1;
  color: var(--ink-dim);
}

.bz-music-section {
  margin-top: 14.5px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.002em;
  color: var(--ink);
}
.bz-music-section--playlist { margin-top: 14.4px; }

/* ── The 3 x 2 sound grid ─────────────────────────────────────────────────── */
.bz-music-grid {
  margin-top: 6.4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6.7px 7.2px;
}

.bz-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 60px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--stroke-soft);
  color: var(--ink);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background var(--dur-ui) var(--ease), transform 140ms var(--ease);
}
.bz-tile:active { transform: scale(0.98); }

.bz-tile-icon {
  display: grid;
  place-items: center;
  height: 24px;
  margin-top: 9.4px;
}
.bz-tile-icon svg { display: block; }

.bz-tile-label {
  margin-top: 6.2px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: -0.002em;
}

/* Selected: a gradient hairline round the tile plus its own glow. The ring is
   painted as a masked-out border rather than a real one, so the tile keeps the
   translucent fill the glass depends on. 1.4 px is measured, not rounded down —
   at 1.5 the ring's own flanks start registering as content in the fasit's
   tile-label band, which is how you find out the mockup's ring is a hairline
   with a halo rather than a thick stroke. */
.bz-tile.is-selected {
  background: linear-gradient(160deg, rgba(79, 224, 236, 0.1), rgba(139, 92, 246, 0.13));
  border-color: transparent;
  box-shadow: 0 0 14px rgba(79, 224, 236, 0.16), 0 0 20px rgba(167, 98, 240, 0.14);
}
.bz-tile.is-selected::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(135deg, #4fe0ec 0%, #6ea8f8 46%, #c162f0 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.bz-tile-check {
  position: absolute;
  top: 3.9px;
  right: 2.6px;
  width: 14.5px;
  height: 14.5px;
  display: none;
  filter: drop-shadow(0 0 6px rgba(82, 228, 252, 0.55));
}
.bz-tile.is-selected .bz-tile-check { display: block; }
.bz-tile-check svg { width: 100%; height: 100%; display: block; }

/* ── "Controlled via iPhone" ──────────────────────────────────────────────── */
.bz-music-info {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 29px;
  margin-top: 7.2px;
  padding: 0 5.5px 0 11px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--stroke-soft);
}

.bz-music-info-icon {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--ink-dim);
}

.bz-music-info-text {
  font-size: 11px;
  line-height: 1;
  color: var(--ink-dim);
}

.bz-music-info-btn {
  margin-left: auto;
  height: 18px;
  padding: 0 7.7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke-soft);
  font-size: 10.5px;
  line-height: 1;
  color: var(--cyan-bright);
  transition: background var(--dur-ui) var(--ease);
}
.bz-music-info-btn:hover { background: rgba(79, 224, 236, 0.1); }

/* ── Playlist ─────────────────────────────────────────────────────────────── */
.bz-music-playlist {
  margin-top: 5.7px;
  padding-bottom: 3.2px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--stroke-soft);
}

.bz-plrow {
  display: flex;
  align-items: center;
  gap: 12.4px;
  width: 100%;
  height: 40.65px;
  padding: 0 14px 0 11px;
  text-align: left;
  transition: background var(--dur-ui) var(--ease);
}
.bz-plrow + .bz-plrow { border-top: 1px solid var(--stroke-soft); }
.bz-plrow:hover { background: rgba(126, 140, 224, 0.06); }

.bz-plrow-logo { flex: none; width: 22.6px; height: 22.6px; }
.bz-plrow-logo svg { width: 100%; height: 100%; display: block; }

.bz-plrow-text { display: flex; flex-direction: column; gap: 2px; }
.bz-plrow-title { font-size: 11.5px; font-weight: 600; line-height: 1; }
.bz-plrow-sub { font-size: 11px; line-height: 1; color: var(--ink-dim); }

/* One box for both trailing glyphs so the chevron and the external-link mark
   line up with each other rather than with their own bounding boxes. */
.bz-plrow-go {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  color: var(--ink-dim);
}
.bz-plrow-go svg { display: block; }
.bz-plrow[data-service='spotify'] .bz-plrow-go svg { width: 6.5px; height: 10.6px; }
.bz-plrow[data-service='ytmusic'] .bz-plrow-go svg { width: 12px; height: 12px; }

/* The chosen playlist. Only rendered when there is one (DESIGN-SPEC kap. 3.2). */
.bz-plcard {
  display: flex;
  align-items: center;
  gap: 8.6px;
  height: 48.6px;
  margin: 0 5.5px;
  padding: 0 5.3px 0 4.4px;
  border-radius: 11px;
  background: rgba(126, 140, 224, 0.06);
  border: 1px solid var(--stroke-soft);
}
.bz-plcard[hidden] { display: none; }

.bz-plcard-art {
  flex: none;
  width: 39.3px;
  height: 39.3px;
  border-radius: 9.5px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.bz-plcard-art svg { width: 100%; height: 100%; display: block; }

.bz-plcard-text { display: flex; flex-direction: column; gap: 4.45px; }
.bz-plcard-title { font-size: 11.5px; font-weight: 600; line-height: 1; }
.bz-plcard-sub { font-size: 10.5px; line-height: 1; color: var(--ink-dim); }

.bz-plcard-change {
  margin-left: auto;
  height: 26px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid var(--stroke-soft);
  font-size: 11px;
  line-height: 1;
  color: var(--cyan-bright);
  transition: background var(--dur-ui) var(--ease);
}
.bz-plcard-change:hover { background: rgba(79, 224, 236, 0.1); }

/* ── The honest footnote ──────────────────────────────────────────────────────
   Hidden until the user reaches for something a PWA cannot do (deviations A3
   and A4), so the resting sheet is exactly the fasit and the explanation
   arrives at the moment it is needed instead of as permanent small print. */
.bz-music-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(126, 140, 224, 0.09);
  border: 1px solid var(--stroke);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-dim);
}
.bz-music-note[hidden] { display: none; }
.bz-music-note-dismiss {
  flex: none;
  align-self: center;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke);
  font-size: 12px;
  color: var(--ink);
}

/* ── CTA ──────────────────────────────────────────────────────────────────── */
/* The fasit's pill is glossy, not flat: sampled across it, luminance falls
   from 167 at the top to 145 at the bottom and lifts again on the last row.
   Without that vertical pass the right-hand violet never clears the threshold
   the fasit check measures the button by, and the button reads as a sticker. */
.bz-sheet--music .bz-cta {
  margin-top: 8.6px;
  height: 46px;
  font-size: 13.5px;
  line-height: 1;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.02) 44%,
      rgba(0, 0, 0, 0.13) 96%,
      rgba(255, 255, 255, 0.05) 100%),
    var(--gradient-cta);
}

@media (prefers-reduced-motion: reduce) {
  .bz-tile, .bz-plrow, .bz-music-info-btn, .bz-plcard-change { transition: none; }
}