/* The phone's Shapes view, Instrument sheet and Capo strip (P352, frame PPWEG, D463): src/studio/phone-song/shapes. */

/* ---- The view: carousel, lyrics (P405); the instrument is the view tab's (controls.ts) ------------------------------------------------- */

/* The landing's display face (public/assets/landing/tokens.css) for the chord names, as on the landing player. */
@font-face {
  font-family: 'Big Shoulders';
  src: url('/assets/fonts/BigShoulders-Variable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* Fills the host between the view row and the play bar, so nothing scrolls: the centre card takes what the
   lyrics leave, and the gaps grow with the height (cqh). Under 240px tall the host scrolls
   instead (its overflow-y), so the diagram never drops under a readable size. */
.ph-shapes {
  container: ph-shapes / size;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-height: 240px;
  padding: 0 var(--ph-gutter, 16px);
  color: var(--st-text);
  font-family: var(--st-font);
  /* "Current" here is the landing's gold, never red: red is the playing chord in the row above. */
  --ph-now: light-dark(var(--st-chord-ink-played), var(--st-chord-lit));
  --ph-now-edge: var(--st-chord-ink);
}
.ph-shapes__panel {
  --ph-shapes-gap: clamp(8px, 2.5cqh, 20px);
  display: grid;
  flex: 1;
  grid-template-rows: minmax(0, 1fr) auto auto;
  row-gap: var(--ph-shapes-gap);
  min-height: 0;
  padding: clamp(6px, 2cqh, 16px) 0 clamp(8px, 3cqh, 24px);
}
.ph-shapes__pick { display: grid; gap: 8px; padding: 8px 0 12px; }
.ph-shapes [hidden] { display: none; }

/* The carousel (landing/hero.css .lp-rail): the playing chord in the centre, its card wrapping its diagram, and the
   chords before and after, whole and faded, in what width is left. Where the height limits the diagram they come
   close to the landing's 70%; where the width does (video Hidden), they narrow and the diagram keeps its size. It
   runs past the gutter, to 8px from the screen's edges. */
.ph-shapes__carousel {
  display: grid;
  container: ph-carousel / size;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
  min-height: 0;
  margin-inline: calc(8px - var(--ph-gutter, 16px));
}

/* Vertical moves stay the page's scroll; a sideways one inside the centre card is the shape swipe (swipe.ts). */
.ph-shapes__big {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  row-gap: clamp(6px, 2cqh, 14px);
  max-height: 100%;
  min-height: 0;
  padding: clamp(10px, 2.5cqh, 20px) 16px clamp(10px, 2cqh, 16px);
  border: 1.5px solid var(--ph-now-edge);
  border-radius: 16px;
  background: color-mix(in srgb, var(--st-chord-lit-back) 55%, transparent);
  box-shadow: 0 0 32px color-mix(in srgb, var(--st-chord-lit-glow) 45%, transparent);
  color: var(--ph-now);
  touch-action: pan-y;
  user-select: none;
}
.ph-shapes[data-preview] .ph-shapes__big { border-color: var(--st-line-strong); background: var(--st-surface); box-shadow: none; color: var(--st-text-strong); }
/* As tall as the carousel allows once the card's name, dots, gaps and padding are in (80px plus 5cqh, as they grow
   with the height), and no wider than leaves the side cards 52px each (with the gaps and padding, 172px) at a
   fretboard's 86:101; the card wraps it. 80px at least: 360 wide with the video Full keeps two lyric lines. */
.ph-shapes__dia {
  display: flex;
  justify-content: center;
  min-width: 128px;
  min-height: 0;
  height: clamp(80px, min(95cqh - 80px, (100cqw - 172px) * 1.17), 380px);
}
.ph-shapes__dia > svg { display: block; width: auto; max-width: calc(100cqw - 172px); height: 100%; overflow: visible; }
.ph-shapes__none { align-self: center; color: var(--st-text-faint); font-size: 36px; }
.ph-shapes__title { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.ph-shapes__name { font: 900 clamp(34px, 9cqh, 64px)/0.9 'Big Shoulders', var(--st-font); }
.ph-shapes__note { color: var(--st-text-dim); font-size: 13px; }
.ph-shapes__shapes { display: flex; align-items: center; gap: 8px; min-height: 8px; margin: 0; }
.ph-shapes__dots { display: inline-flex; gap: 7px; }
.ph-shapes__dots > span { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, currentColor 30%, transparent); }
.ph-shapes__dots > span.is-on { background: var(--ph-now-edge); }
.ph-shapes__count { color: var(--st-text-faint); font-size: 12px; }
.ph-shapes__count:empty { display: none; }

.ph-shapes__side {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  max-width: 132px;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 4px 10px;
  border: 1px solid var(--st-line);
  border-radius: 14px;
  /* Plain cards: white in light, the panel in dark; the gold is the centre card's alone. */
  background: var(--st-surface);
  color: var(--st-text);
  opacity: 0.8;
}
.ph-shapes__side--before { justify-self: end; }
.ph-shapes__side--after { justify-self: start; }
.ph-shapes__side-name { max-width: 100%; font: 900 26px/0.9 'Big Shoulders', var(--st-font); white-space: nowrap; }
/* Narrow side cards (video Hidden on a small phone) keep the whole name: a size down, never cut. */
@container ph-carousel (width < 380px) {
  .ph-shapes__side-name { font-size: 21px; }
}
.ph-shapes__side-art { display: flex; justify-content: center; width: 100%; height: clamp(44px, 16cqh, 110px); }
.ph-shapes__side-art > svg { display: block; width: auto; max-width: 100%; height: 100%; overflow: visible; }
.ph-shapes__side-time { color: var(--st-text-dim); font: 500 11px/1 var(--st-font-mono); }
.ph-shapes__side[data-playing] .ph-shapes__side-time { color: var(--st-text-strong); }

/* Back, while a side chord is previewed, or the hint (capo, piano); no row at all when both are empty. */
.ph-shapes__meta { display: flex; justify-content: center; }
.ph-shapes__meta:has(.ph-shapes__back[hidden]):has(.ph-shapes__hint:empty) { display: none; }
.ph-shapes__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--st-line-strong);
  border-radius: 999px;
  background: var(--st-surface-2);
  color: var(--st-text-strong);
  font: 500 14px/1 var(--st-font);
}
.ph-shapes__back .st-icon { width: 16px; height: 16px; }
.ph-shapes__hint { overflow: hidden; color: var(--st-text-faint); font-size: 13px; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }

/* The lyric lines (live/view.ts buildLyrics), per line as the Live chords card shows them (live.css .live__line):
   the line being sung strong, the next muted. A long sung line wraps rather than "…", and takes the next line's room
   (data-wrapped, view.ts). It sets smaller by its length (--ph-lyric-len, view.ts; about half an em a character) to
   fit its lines, 16px down to 12px: two, or three where it's tall. One still cut at 12px sets tight (data-tight,
   view.ts): 14px lines, one more of them in the same room. The box keeps one height whatever the words, so the
   diagram keeps still. */
.ph-shapes .ph-shapes__lyrics { --ph-lyric-lines: 2; gap: 2px; height: 42px; padding: 0 8px; overflow: hidden; border: 0; }
.ph-shapes .ph-shapes__lyrics .live__line { flex: none; color: var(--st-text-faint); font: 500 14px/1.3 var(--st-font); }
.ph-shapes .ph-shapes__lyrics .live__line[data-line='current'] {
  color: var(--st-text-strong);
  font: 600 clamp(12px, (100cqw - 16px) * var(--ph-lyric-lines) / (var(--ph-lyric-len, 1) * 0.5 + 1), 16px)/1.3 var(--st-font);
  -webkit-line-clamp: var(--ph-lyric-lines);
}
.ph-shapes .ph-shapes__lyrics[data-wrapped] .live__line[data-line='next'] { display: none; }
.ph-shapes .ph-shapes__lyrics[data-tight] .live__line[data-line='current'] { font-size: 12px; line-height: 14px; -webkit-line-clamp: calc(var(--ph-lyric-lines) + 1); }
.ph-shapes[data-no-lyrics] .ph-shapes__lyrics { display: none; }
@container ph-shapes (height >= 520px) {
  .ph-shapes .ph-shapes__lyrics { --ph-lyric-lines: 3; height: 63px; }
}

/* ---- Pick your instrument ------------------------------------------------------------------------------- */

.ph-shapes__pick-title { margin: 8px 0 0; color: var(--st-text-strong); font: 700 19px/24px var(--st-font); }
.ph-shapes__pick-text { margin: 0; color: var(--st-text-dim); font-size: 14px; line-height: 20px; }
.ph-shapes__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ph-shapes__tile {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 76px;
  padding: 14px 6px;
  border: 1px solid var(--st-line);
  border-radius: 12px;
  background: var(--st-surface);
  color: var(--st-text-strong);
  font: 500 15px/1 var(--st-font);
}
.ph-shapes__tile .st-icon { width: 24px; height: 24px; }

/* ---- Diagram inks: live.css's (its :is([data-slot='live'], .ph-shapes)), in the card's own colour here ------- */

.ph-shapes .ph-shapes__carousel .dia__grid { stroke: currentColor; stroke-opacity: 0.55; }
.ph-shapes .ph-shapes__carousel :is(.dia__nut, .dia__dot) { fill: currentColor; }
.ph-shapes .ph-shapes__carousel :is(.dia__mark, .dia__string) { fill: currentColor; opacity: 0.7; }
.ph-shapes .ph-shapes__carousel .dia__open { stroke: currentColor; }
.ph-shapes .ph-shapes__carousel .dia__num { fill: var(--st-bg); }
.ph-shapes .ph-shapes__carousel .dia__tone--root { fill: var(--ph-now-edge); }
.ph-shapes__dia .dia__grid { stroke-width: 1.5; }
.ph-shapes__side :is(.dia__string, .dia__num) { display: none; }

/* ---- The Instrument sheet's body ------------------------------------------------------------------------ */
/* The instruments, one row of five tiles (the picker's .ph-shapes__tile, smaller); the chosen one outlined. */
.ph-shapes__choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; }
.ph-shapes__choice {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  padding: 10px 2px;
  border: 1px solid var(--st-line);
  border-radius: 12px;
  background: var(--st-surface);
  color: var(--st-text-dim);
  font: 500 12px/1 var(--st-font);
}
.ph-shapes__choice .st-icon { width: 22px; height: 22px; }
.ph-shapes__choice[aria-checked='true'] { border: 1.5px solid var(--st-text-strong); color: var(--st-text-strong); font-weight: 600; }

:is(.ph-body--instrument, .ph-body--key-tempo) [hidden] { display: none; }
.ph-shapes__suggest {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  padding: 14px;
  border-radius: 12px;
  background: var(--st-surface-2);
}
.ph-shapes__sparkle { flex: none; color: var(--st-warn); }
.ph-shapes__suggest-words { display: grid; flex: 1; gap: 2px; min-width: 0; }
.ph-shapes__suggest-title { color: var(--st-text-strong); font: 600 15px/20px var(--st-font); }
.ph-shapes__suggest-text { color: var(--st-text-dim); font-size: 13px; line-height: 18px; }
.ph-shapes__use {
  flex: none;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--st-line-strong);
  border-radius: 10px;
  background: var(--st-surface);
  color: var(--st-text-strong);
  font: 500 15px/1 var(--st-font);
}
.ph-shapes__best { display: flex; align-items: center; gap: 8px; margin: 12px 0; color: var(--st-text-dim); font-size: 14px; }
.ph-shapes__check { color: var(--st-ok); }
.ph-shapes__foot { margin: 16px 0 0; color: var(--st-text-faint); font-size: 13px; line-height: 18px; }

/* ---- The Capo strip, over Lead, Lyrics and Grid --------------------------------------------------------- */

.ph-capo-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--st-accent);
  border-radius: 10px;
  background: var(--st-accent-soft);
  color: var(--st-text-strong);
  font: 400 13px/1 var(--st-font);
  text-align: start;
}
.ph-capo-strip__icon .st-icon { width: 16px; height: 16px; }
.ph-capo-strip__icon:empty { display: none; }
.ph-capo-strip__capo { flex: none; font: 600 14px/1 var(--st-font); }
.ph-capo-strip__sounds { flex: 1; overflow: hidden; color: var(--st-text-dim); text-overflow: ellipsis; white-space: nowrap; }
.ph-capo-strip__chev { flex: none; width: 16px; height: 16px; color: var(--st-text-dim); }