/* Chord Lens — the extension's panel, as it floats over a video.

   Worn by the hero demo and by the overlay product shots, so every picture of
   the panel on the page is the same panel. The components inside it (bar,
   chips, cards, lyric) are defined in home.css; this file is their skin, the
   chord diagrams, and how the panel gives way as it narrows. */

/* ---- The surface ------------------------------------------------------- */

/* The panel is the extension's overlay: translucent, blurring what plays
   behind it, and sized to its own width so it can be dragged and resized.
   The edge is an inset outline because the width queries below measure the
   content box, and a border would take 2px off every threshold. */
.panel {
  outline: 1px solid var(--panel-edge);
  outline-offset: -1px;
  border-radius: 14px;
  background: var(--panel-glass);
  box-shadow: 0 26px 60px rgb(0 0 0 / 0.5);
  overflow: hidden;
  container-type: inline-size;
}

@supports (backdrop-filter: blur(13px)) {
  .panel { backdrop-filter: blur(13px); }
}

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

/* The bar, chips, cards and lyric are the shared components in home.css;
   inside a panel they take the extension's own look. */
/* The two groups share a row while they fit and wrap, actions beneath, when
   they do not: at the narrowest widths, or when a badge makes the transport
   group wider than usual. */
.panel > .demo__bar {
  justify-content: space-between;
  gap: 6px 0.3rem;
  padding: 5px 7px;
  border-bottom-color: var(--panel-line);
  background: none;
  font-size: 11px;
  line-height: 1.25;
}

.demo__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.demo__grip, .demo__icon, .demo__caret {
  flex: none;
  width: 11.5px;
  height: 11.5px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.demo__grip { color: var(--panel-faint); }

.panel .demo__stat { color: var(--panel-dim); font-weight: 500; }

.panel .set {
  gap: 8px;
  padding: 4px 6px;
  border-color: var(--panel-line);
  border-radius: 8px;
  background: var(--panel-chip);
}

.panel .set__step { width: auto; height: auto; background: none; color: var(--panel-dim); }
.panel .set__val { min-width: 0; padding: 0; color: var(--panel-text); font-size: 11.5px; font-weight: 700; }

.panel .demo__chips { gap: 5px; }

.panel .demo__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-color: var(--panel-line);
  border-radius: 8px;
  background: var(--panel-chip);
  color: var(--panel-text);
  font-size: 11px;
  font-weight: 600;
}

/* However small the pill draws, the pointer gets at least 32px to land on. */
.panel .demo__chip::after {
  content: "";
  position: absolute;
  inset: min(0px, (100% - 32px) / 2);
}

.demo__chip--menu .demo__caret { width: 8px; height: 8px; margin-inline-start: -2px; color: var(--panel-dim); }
.demo__chip--act .demo__icon { color: var(--panel-dim); }
.panel .demo__chip--close { padding: 5px; }

.panel .demo__chip--sheet { border-color: var(--panel-red); color: var(--panel-red); font-weight: 700; }
.panel .demo__chip--sheet .demo__icon { color: inherit; }

.panel .demo__chip--coffee {
  border-color: var(--amber-edge);
  background: var(--amber);
  color: var(--amber-ink);
  font-weight: 700;
}

.panel .demo__chip--coffee .demo__icon { color: inherit; }

/* ---- Diagram cards ----------------------------------------------------- */

/* Every card holds the same slot, so the strip's centring maths sees the
   same widths whichever chord is playing. The playing chord grows inside its
   slot and gets a raised body drawn behind it, outside the layout. */
.panel .demo__strip {
  --slot: 20cqi;
  --dia-idle: 60.76px;
  --dia-active: 86.24px;
  --chrome: 206px;
  padding-block: 16px;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.panel .demo__track { gap: 0; }

.card--diagram {
  --dia: var(--dia-idle);
  --card-ink: var(--panel-text);
  --card-ground: var(--ink-900);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  inline-size: var(--slot);
  block-size: calc(3rem + var(--dia-active) * 1.52);
  padding: 0;
}

.card--diagram[data-state] { border: 0; background: none; box-shadow: none; }
.card--diagram[data-state="active"] { --dia: var(--dia-active); }

.card--diagram::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: var(--chrome);
  translate: -50% 0;
  border: 1px solid var(--panel-line);
  border-radius: 16px;
  background: var(--panel-raised);
  /* Only fades the body in as the chord lands; once there it is opaque. */
  opacity: 0;
  transition: opacity 0.3s;
}

.card--diagram[data-state="active"]::before { opacity: 1; }

.card--diagram .card__name {
  margin-top: 2px;
  font-size: calc(var(--dia) * 0.2857);
  transition: color 0.3s, font-size 0.35s var(--ease);
}

.card--diagram .card__rail {
  flex: none;
  inline-size: calc(var(--chrome) * 0.815);
  height: 4px;
  margin-top: 12px;
  background: var(--panel-rail);
  visibility: hidden;
}

.card--diagram[data-state="active"] .card__rail { visibility: visible; }
.card--diagram .card__fill { background: var(--panel-red); }

.dia {
  width: var(--dia);
  height: auto;
  font-family: inherit;
  transition: width 0.35s var(--ease);
}

/* Every fretted instrument draws on the guitar's canvas, its grid centred in
   it, so all of them share one scale. The keyboard's canvas is 74 of those
   86.24 units wide, and is sized to match. */
.dia--keyed { width: calc(var(--dia) * 74 / 86.24); }

.dia__grid { fill: none; stroke: var(--grid-idle); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dia__nut, .dia__dot { fill: var(--dot-idle); }
.dia__num { fill: var(--dot-ink); font-size: 7.37px; font-weight: 700; }
.dia__string { fill: var(--panel-faint); font-size: 7.48px; }
.dia__mark { fill: var(--panel-faint); font-size: 8.4px; }
.dia__open { fill: none; stroke: var(--panel-faint); stroke-width: 1; vector-effect: non-scaling-stroke; }

.dia__key { fill: var(--dot-idle); stroke: var(--dot-ink); stroke-width: 0.6; }
.dia__key--black { fill: var(--dot-ink); }
.dia__tone { fill: var(--ink-600); }
.dia__tone--black { fill: var(--dot-idle); }
.dia__tone--root { fill: var(--accent); }

/* Lit: the playing chord, or any diagram shown on its own (.dia-lit). */
:is(.card--diagram[data-state="active"], .dia-lit) .dia__grid { stroke: var(--grid-active); }
:is(.card--diagram[data-state="active"], .dia-lit) :is(.dia__nut, .dia__dot) { fill: var(--dot); }
:is(.card--diagram[data-state="active"], .dia-lit) .dia__string { fill: var(--panel-dim); }
:is(.card--diagram[data-state="active"], .dia-lit) .dia__key:not(.dia__key--black) { fill: var(--dot); }

/* ---- The instrument cycle ------------------------------------------------ */

/* The drawing sits in its own slot, and a swap stacks the new one over the
   old in the same cell to crossfade. The card, name and rail hold still. */
.card__art { display: grid; place-items: center; }
.card__art > * { grid-area: 1 / 1; }
.card__art > .is-entering { animation: art-in 120ms ease-out both; }
.card__art > .is-leaving { animation: art-out 120ms ease-in both; }

@keyframes art-in { from { opacity: 0; } }
@keyframes art-out { to { opacity: 0; } }

.card--diagram .card__meta { display: none; }

/* Names only: every card is a small name card, the playing one rose-tinted
   and crimson-edged as in the motion spec. It centres in the diagram card's
   slot, so the strip is already its full height when the shapes arrive. */
.panel[data-instrument="names"] .card--diagram { --card-ground: var(--panel-chip); }

.panel[data-instrument="names"] .card--diagram::before {
  inset-block: 50% auto;
  inline-size: 5.75rem;
  block-size: 74px;
  translate: -50% -50%;
  border-radius: 10px;
  background: var(--panel-chip);
  opacity: 1;
}

.panel[data-instrument="names"] .card--diagram[data-state="active"] {
  --card-ground: color-mix(in srgb, var(--panel-red) 16%, var(--panel-chip));
}

.panel[data-instrument="names"] .card--diagram[data-state="active"]::before {
  border-color: var(--panel-red);
  background: var(--card-ground);
  box-shadow: inset 0 0 0 0.5px var(--panel-red), 0 10px 26px -10px rgb(255 42 69 / 0.55);
}

.panel[data-instrument="names"] .card--diagram .card__name { margin-top: 0; font-size: 1.3rem; }

.panel[data-instrument="names"] .card--diagram .card__meta {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.62rem;
  color: var(--panel-faint);
}

.panel[data-instrument="names"] .card--diagram[data-state="active"] .card__meta { color: #ffc9d0; }

.panel[data-instrument="names"] .card--diagram .card__rail {
  inline-size: 4.5rem;
  height: 2px;
  margin-top: 0.45rem;
  visibility: visible;
}

/* The pill says what is drawn, and steps back while nothing is. Every face
   sits in one cell, so the pill keeps the width of the widest. */
.demo__faces { display: grid; }
.demo__face { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; visibility: hidden; }
.demo__face.is-current { visibility: visible; }
.panel[data-instrument="names"] .demo__chip--instrument { background: none; color: var(--panel-faint); }

/* A keyboard has no capo. Hidden in place, so nothing beside it moves. */
.panel[data-kind="keyed"] .demo__chip--capo { visibility: hidden; }

.panel > .demo__lyric { padding: 15px 0.9rem 17px; border-top: 1px solid var(--panel-line); line-height: 1.25; }
.panel .demo__lyric-now { font-size: clamp(0.95rem, 2.6cqi, 1.0625rem); color: var(--panel-text); }
.panel .demo__lyric-next { margin-top: 7px; font-size: clamp(0.8rem, 2.1cqi, 0.84rem); color: var(--panel-dim); }

/* ---- Name cards -------------------------------------------------------- */

/* The name strip, per the motion spec: neutral bodies whose ink carries the
   tier, and a playing card that is rose-tinted, crimson-edged and glowing. */
.panel .card:not(.card--diagram) {
  --card-ink: var(--panel-text);
  --card-ground: var(--panel-chip);
  border-color: var(--panel-line);
  background: var(--panel-chip);
}

.panel .card:not(.card--diagram)[data-state="active"] {
  --card-ground: color-mix(in srgb, var(--panel-red) 16%, var(--panel-chip));
  border-color: var(--panel-red);
  background: var(--card-ground);
  box-shadow: inset 0 0 0 0.5px var(--panel-red), 0 10px 26px -10px rgb(255 42 69 / 0.55);
}

.panel .card:not(.card--diagram) .card__meta { color: var(--panel-faint); }
.panel .card:not(.card--diagram)[data-state="active"] .card__meta { color: #ffc9d0; }
.panel .card:not(.card--diagram) .card__rail { background: var(--panel-rail); }
.panel .card:not(.card--diagram) .card__fill { background: var(--panel-red); }

/* ---- The panel at its own width ---------------------------------------- */

/* Labels go before controls, controls before chords; the playing chord and
   the lyric never go. A label that goes is hidden from sight only, and every
   chip carries a title, so it keeps its name and its tooltip. */
@container (max-width: 839px) {
  .panel .demo__strip { --dia-idle: 50px; --dia-active: 72px; --chrome: 168px; }
  .demo__chip--act .demo__chip-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .panel .demo__chips { gap: 7px; }
}

@container (max-width: 639px) {
  .panel .demo__strip { --slot: calc(100cqi / 3); --dia-idle: 56px; --dia-active: 80px; --chrome: 188px; }
  .demo__chip--menu .demo__chip-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@container (max-width: 479px) {
  .panel .demo__strip { --slot: 100cqi; --dia-active: 86.24px; --chrome: 206px; }
}


/* ---- The instrument menu ------------------------------------------------- */

/* The pill is the panel's one real control: a menu button over a list of
   instruments. It opens over the strip, inside the panel. */
.demo__menu-holder { position: relative; z-index: 2; display: inline-flex; }

.panel button.demo__chip {
  margin: 0;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

.demo__chip--instrument[aria-expanded="true"] { border-color: var(--panel-red); }

.demo__menu {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  min-inline-size: 11rem;
  padding: 4px;
  border: 1px solid var(--panel-line);
  border-radius: 10px;
  background: var(--panel-chip);
  box-shadow: var(--shadow-pop);
}

.demo__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  color: var(--panel-dim);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}

.demo__item:hover,
.demo__item:focus-visible { background: var(--panel-raised); color: var(--panel-text); }
.demo__item:focus-visible { outline-offset: -2px; }

.demo__item[aria-checked="true"] {
  background: color-mix(in srgb, var(--panel-text) 8%, var(--panel-chip));
  color: var(--panel-text);
  font-weight: 600;
}

.demo__tick {
  width: 12px;
  height: 12px;
  margin-inline-start: auto;
  fill: none;
  stroke: var(--sect-text);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  visibility: hidden;
}

.demo__item[aria-checked="true"] .demo__tick { visibility: visible; }