/* Chord Lens — the chord sheet, as the "See it running" shots draw it.

   The extension's own sheet (sheet.html, sheet-grid.css) rebuilt in markup:
   Chrome's side panel frame, the Lead / Lyrics / Grid bar, the row of the
   song's chord shapes, then the Lead view's words or the bar grid, and the
   Key and BPM bar at the foot. Colours, sizes and type are the extension's. */

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

.cs {
  width: min(100%, 36rem);
  margin-inline: auto;
  overflow: hidden;
  border-radius: 12px;
  outline: 1px solid rgb(255 255 255 / 0.14);
  outline-offset: -1px;
  background: #0c0c11;
  box-shadow: 0 44px 90px -40px rgb(0 0 0 / 0.95);
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
}

/* ---- Chrome's side panel header ------------------------------------------ */

.cs__title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #3a2a31;
  font-size: 13px;
  font-weight: 600;
}

.cs__title > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs__logo { width: 16px; height: 16px; border-radius: 4px; }

.cs__icon {
  flex: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cs__title .cs__icon { opacity: 0.7; }

/* ---- The two bars: controls on top, key and tempo at the foot ------------- */

.cs__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  background: #14141a;
}

.cs__foot { gap: 14px; border-top: 1px solid rgb(255 255 255 / 0.1); border-bottom: 0; }

.cs__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.1);
  font-weight: 500;
  white-space: nowrap;
}

.cs__glyph { width: 14px; height: 14px; }
.cs__caret { font-size: 9px; opacity: 0.8; }

/* Lead, Lyrics and Grid as one control, the view showing in a white pill. */
.cs__views {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.1);
}

.cs__views > span { padding: 5px 8px; border-radius: 4px; font-weight: 500; text-align: center; }
.cs__views > .is-on { background: rgb(255 255 255 / 0.92); color: #0c0c11; }

.cs__field { display: inline-flex; align-items: center; gap: 6px; color: rgb(255 255 255 / 0.62); font-weight: 500; }

.cs__step {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 26px;
  padding: 2px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.1);
}

.cs__step i { padding: 4px 8px; color: #fff; font-style: normal; }
.cs__step b { min-width: 3ch; color: #fff; font-weight: 600; text-align: center; }
.cs__coffee { width: auto; height: 22px; border-radius: 6px; }

/* ---- The row of the song's chord shapes ---------------------------------- */

.cs__chords {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 6px 10px;
  overflow: hidden;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  background: #14141a;
  list-style: none;
}

.cs__chord {
  --dia: 64px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px;
  border: 1px solid transparent;
  border-radius: 14px;
  opacity: 0.72;
}

.cs__chord strong { margin-top: 4px; font-size: 13px; font-weight: 700; line-height: 1; }
.cs__chord small, .cs__line small, .cs__beat small { font-size: 0.58em; vertical-align: super; }

/* A raised quality must not grow its line, or the words under it drop. */
.cs__line small { line-height: 0; }

/* The chord playing now, raised on glass. */
.cs__chord--now {
  opacity: 1;
  border-color: rgb(255 255 255 / 0.18);
  background: linear-gradient(160deg, rgb(255 255 255 / 0.12), rgb(9 11 18 / 0.32));
  box-shadow: 0 12px 26px rgb(0 0 0 / 0.34);
}

/* ---- Lead: the song, and the words with the chords over them -------------- */

.cs__body { padding: 10px 12px 16px; }

.cs__song { padding: 8px 8px 4px; }

.cs__artist {
  margin-bottom: 6px;
  color: #f5b342;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cs__name { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }

.cs__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.cs__facts > span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.8);
  font-weight: 500;
  line-height: 1;
}

.cs__block { --tint: #b9bfcd; margin-top: 16px; padding-inline: 8px; }

.cs__label {
  display: block;
  padding: 0 4px 6px 10px;
  color: var(--tint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cs__line {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
}

.cs__seg { display: inline-flex; flex-direction: column; }

.cs__seg b, .cs__line--chords b {
  min-height: 20px;
  padding-right: 0.6em;
  color: #f5b342;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
}

.cs__seg span { color: rgb(255 255 255 / 0.92); font-size: 14px; line-height: 1.5; white-space: pre; }

/* The line being sung is lit, and its chord glows. */
.cs__line--now { background: rgb(255 255 255 / 0.08); }
.cs__line--now .cs__seg span { color: #fff; font-weight: 700; }
.cs__line--now .cs__seg:first-child b { color: #ffe1a3; text-shadow: 0 0 12px rgb(255 179 66 / 0.75); }
.cs__line--chords { gap: 0 1.6ch; }

/* ---- Grid: every bar, grouped under its section --------------------------- */

.cs__group { --tint: #b9bfcd; display: flex; gap: 10px; }

/* Each kind of section keeps its own tint, in the words and in the grid.
   After both rules above, so it wins over their neutral default. */
.cs__block--verse { --tint: #8fbcff; }
.cs__block--chorus { --tint: #ff9db4; }
.cs__group + .cs__group { margin-top: 10px; }
.cs__group > div { flex: 1; min-width: 0; }

.cs__rail {
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  padding: 6px 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--tint) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tint) 26%, transparent);
  color: var(--tint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Read bottom to top, as the extension draws it. */
.cs__rail > span { white-space: nowrap; writing-mode: vertical-rl; rotate: 180deg; }

@supports (writing-mode: sideways-lr) {
  .cs__rail > span { writing-mode: sideways-lr; rotate: none; }
}

.cs__row { display: grid; grid-template-columns: 34px repeat(16, minmax(0, 1fr)); margin-bottom: 6px; }

.cs__num {
  padding: 12px 8px 0 0;
  color: rgb(255 255 255 / 0.4);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  text-align: right;
}

.cs__beat {
  position: relative;
  height: 34px;
  border-right: 1px solid rgb(255 255 255 / 0.13);
  background: rgb(255 255 255 / 0.02);
}

/* A bar opens on every fourth beat, with a stronger line than a beat's. */
.cs__beat:nth-child(4n + 2) { border-left: 1px solid rgb(255 255 255 / 0.38); }
.cs__beat:nth-child(4n + 1) { border-right: 0; }
.cs__beat:last-child { border-right: 1px solid rgb(255 255 255 / 0.38); }

.cs__beat b {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  display: flex;
  align-items: center;
  padding: 0 5px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.9);
  white-space: nowrap;
}

.cs__beat--now { background: rgb(255 43 43 / 0.55); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.45); }