/* Chord Lens — the "See it running" section.

   The three shots are not screenshots: they are the extension's own UI rebuilt
   in markup, sitting on a stylised video stage. That keeps them crisp at any
   size, honest about the dark theme, and cheap to correct when the product
   moves. The overlay bar and chord cards are the hero's components (home.css);
   what lives here is the stage, diagram mode and the detached sheet window. */

.shots { display: grid; gap: clamp(3rem, 7vw, 5rem); }

.shot { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center; margin: 0; }

.shot__body h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); margin-bottom: 0.6rem; }
.shot__body p { color: var(--text-dim); }

@media (min-width: 900px) {
  .shot { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); }
  /* Alternate which side the stage sits on, so the column does not march.
     The wide track moves with it — the stage always gets the room. */
  .shot:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.62fr); }
  .shot:nth-child(even) > .stage { order: 2; }
}

/* ---- The video stage --------------------------------------------------- */

.stage {
  position: relative;
  container-type: inline-size;
  padding: clamp(0.5rem, 1.4vw, 0.9rem) clamp(0.5rem, 1.4vw, 0.9rem) clamp(3.4rem, 7vw, 5.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(80% 130% at 14% 4%, rgba(64, 132, 255, 0.62), transparent 58%),
    radial-gradient(72% 115% at 86% 10%, rgba(150, 78, 245, 0.58), transparent 60%),
    radial-gradient(65% 95% at 58% 108%, rgba(255, 92, 126, 0.34), transparent 62%),
    linear-gradient(180deg, #1d2a63, #121a46 56%, #0c1130);
  box-shadow: 0 40px 80px -46px rgba(0, 0, 0, 0.9);
}

/* Stand-in for the stage lighting in the video, so the panel has something to
   sit against without shipping a photograph. */
.stage::before {
  content: "";
  position: absolute;
  inset: 30% -8% -14% -8%;
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, 0.22), transparent 72%) 24% 55% / 44% 78% no-repeat,
    radial-gradient(closest-side, rgba(120, 205, 255, 0.24), transparent 72%) 76% 82% / 38% 66% no-repeat,
    radial-gradient(closest-side, rgba(255, 150, 90, 0.16), transparent 72%) 52% 96% / 30% 50% no-repeat;
  filter: blur(8px);
  pointer-events: none;
}

.stage__player {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 clamp(0.6rem, 1.6vw, 1rem) clamp(0.55rem, 1.4vw, 0.85rem);
}

.stage__seek {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
  position: relative;
}

.stage__seek::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6%;
  border-radius: inherit;
  background: var(--accent-hot);
}

.stage__seek::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 6%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  translate: -50% -50%;
  background: var(--accent-hot);
}

.stage__time {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* ---- The overlay panel ------------------------------------------------- */

.ovl {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: rgba(12, 16, 30, 0.92);
  overflow: hidden;
}

@supports (backdrop-filter: blur(6px)) {
  .ovl {
    background: rgba(12, 16, 30, 0.74);
    backdrop-filter: blur(12px) saturate(1.3);
  }
}

/* The bar and cards come from the hero component; only the ground changes. */
.ovl .demo__bar { background: transparent; border-bottom-color: rgba(255, 255, 255, 0.09); }
.ovl .demo__strip { padding-block: clamp(0.6rem, 1.8cqi, 1.1rem); }

.demo__chip--buy {
  border-color: rgba(255, 221, 0, 0.5);
  background: rgba(255, 221, 0, 0.16);
  color: #ffe873;
}

/* The strip is still, so the beat clock on the current card is drawn part-run
   rather than animated. CSP blocks style attributes, hence a class. */
.ovl .card[data-state="active"] .card__fill { width: 42%; }

/* ---- Diagram mode ------------------------------------------------------ */

.frets {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.3rem, 1.4cqi, 1rem);
  padding: clamp(0.7rem, 2.2cqi, 1.4rem) clamp(0.4rem, 1.5cqi, 1rem);
}

.fret {
  margin: 0;
  width: clamp(44px, 10.5cqi, 96px);
  text-align: center;
  opacity: 0.6;
}

.fret svg { width: 100%; height: auto; display: block; }

.fret__name {
  margin-top: 0.35rem;
  font-weight: 700;
  font-size: clamp(0.68rem, 1.9cqi, 1.05rem);
  letter-spacing: -0.02em;
}

.fret__name sup { font-size: 0.55em; vertical-align: super; }

/* The chord the video is on: bigger, lit, and running its own beat clock. */
.fret--now {
  opacity: 1;
  width: clamp(66px, 15.5cqi, 140px);
  padding: clamp(0.4rem, 1.4cqi, 0.9rem) clamp(0.4rem, 1.4cqi, 0.9rem) clamp(0.55rem, 1.6cqi, 1rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: rgba(6, 8, 16, 0.72);
  box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 0.9);
}

.fret__rail {
  display: block;
  margin-top: 0.55rem;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.fret__fill { display: block; height: 100%; width: 34%; background: var(--accent-hot); }

/* ---- The detached sheet window ----------------------------------------- */

.stage--sheet { padding: clamp(1rem, 3.5vw, 2.4rem) clamp(0.6rem, 2.5vw, 2rem); }

.win {
  width: min(100%, 44rem);
  margin-inline: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 11px;
  overflow: hidden;
  background: var(--ink-900);
  box-shadow: 0 44px 90px -40px rgba(0, 0, 0, 0.95);
}

.win__bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: #22262f;
}

.win__dots { display: flex; gap: 0.4rem; }
.win__dots i { width: 0.66rem; height: 0.66rem; border-radius: 50%; }
.win__dots i:nth-child(1) { background: #ff5f57; }
.win__dots i:nth-child(2) { background: #febc2e; }
.win__dots i:nth-child(3) { background: #28c840; }

.win__title {
  text-align: center;
  font-size: clamp(0.7rem, 1.7cqi, 0.84rem);
  font-weight: 600;
  color: var(--text-dim);
}

/* Balances the traffic lights so the title lands in the middle. */
.win__bar::after { content: ""; width: 2.9rem; }

.win__tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--ink-800);
  font-size: clamp(0.66rem, 1.6cqi, 0.78rem);
}

.win__name { font-weight: 700; }
.win__meta { color: var(--text-faint); }
.win__tools .demo__chips { gap: 0.35rem; }

/* ---- The bar grid ------------------------------------------------------ */

.sheet {
  padding: 0.6rem 0.75rem 0.85rem;
  font-size: clamp(0.5rem, 1.45cqi, 0.78rem);
}

.sheet__row {
  display: grid;
  grid-template-columns: 2.6em repeat(16, minmax(0, 1fr));
}

.sheet__num {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: 0.7em;
  color: var(--text-faint);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}

.sheet__beat {
  display: flex;
  align-items: center;
  min-height: 2.7em;
  padding-inline-start: 0.3em;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-weight: 700;
  white-space: nowrap;
}

/* Every fourth cell opens a bar, so its edge is the one you read down. */
.sheet__beat:nth-child(4n + 2) { border-left-color: rgba(255, 255, 255, 0.17); }
.sheet__beat:last-child { border-right: 1px solid rgba(255, 255, 255, 0.17); }
.sheet__row:first-child .sheet__beat { border-top: 1px solid rgba(255, 255, 255, 0.17); }

.sheet__beat--now {
  background: var(--accent);
  box-shadow: 0 0 22px -4px var(--accent-hot);
}