/* Larger rehearsal controls. Load after theme.css and library-view.css. */
:root {
  --play-ready-bg: #7deb42;
  --play-ready-fg: #133107;
  --play-playing-bg: #b42336;
  --play-playing-fg: #ffffff;
  --play-paused-bg: #ffc16a;
  --play-paused-fg: #432500;
  --play-neutral-bg: #c5cdd3;
  --play-neutral-fg: #24343f;
  --loop-off-bg: #30304c;
  --loop-off-fg: #e0d8ff;
  --loop-off-line: #8580a4;
  --loop-on-bg: #ddc5ff;
  --loop-on-fg: #352053;
  --loop-on-line: #ddc5ff;
}
html[data-theme=light] {
  --play-ready-bg: #87e74c;
  --play-ready-fg: #133107;
  --play-playing-bg: #ae1d31;
  --play-playing-fg: #ffffff;
  --play-paused-bg: #ffbc62;
  --play-paused-fg: #432500;
  --play-neutral-bg: #d0c8bd;
  --play-neutral-fg: #3e453f;
  --loop-off-bg: #e5dfee;
  --loop-off-fg: #55416f;
  --loop-off-line: #9585a9;
  --loop-on-bg: #65448b;
  --loop-on-fg: #ffffff;
  --loop-on-line: #65448b;
}

/* Keep the brand, but let the rehearsal take most of the screen. */
.hero {
  grid-template-columns: minmax(265px, .9fr) minmax(0, 1.1fr) 124px;
  gap: 20px;
  padding: 18px 0;
}
.hero-navigation { gap: 14px; }
.hero .classic-nav { gap: 6px; flex-wrap: wrap; }
.hero .classic-nav button {
  min-height: 44px;
  padding: 8px 10px;
  font-size: 13px;
  white-space: normal;
}
.hero .hero-copy h1 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.08; }
.hero .eyebrow { margin: 0 0 8px; font-size: 9px; }
.hero .hero-copy p:last-child { margin-top: 9px; font-size: 12px; line-height: 1.4; }
.hero img { width: 124px; height: 124px; flex-basis: 124px; border-radius: 18px; }

/* Minimum touch area is 48px in the transport; labels remain visible. */
.transport {
  display: grid;
  grid-template-columns: max-content minmax(150px, 1fr) max-content;
  grid-template-areas: 'controls seek tools';
  gap: 14px;
  align-items: center;
  min-height: 88px;
  padding: 16px;
  border-radius: 14px;
}
.transport .transportleft {
  grid-area: controls;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  order: initial;
}
.transport button {
  min-width: 48px;
  min-height: 48px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 22px;
  line-height: 1.2;
  touch-action: manipulation;
}
.transport button:focus-visible { outline-width: 3px; outline-offset: 3px; }
.transport small { font-size: 12px; margin-left: 2px; font-weight: 750; }
.transport .playbutton {
  min-width: 134px;
  font-size: 15px;
  font-weight: 750;
  border-radius: 999px;
  padding: 12px 16px;
}
.transport #play,
html[data-theme=light] .transport #play {
  background: var(--play-neutral-bg);
  color: var(--play-neutral-fg);
  border-color: transparent;
}
.transport #play[data-state=ready] {
  background: var(--play-ready-bg);
  color: var(--play-ready-fg);
}
.transport #play[data-state=playing] {
  background: var(--play-playing-bg);
  color: var(--play-playing-fg);
}
.transport #play[data-state=paused] {
  background: var(--play-paused-bg);
  color: var(--play-paused-fg);
}
html[data-theme=light] .transport #play[data-state=ready] {
  background: var(--play-ready-bg);
  color: var(--play-ready-fg);
}
html[data-theme=light] .transport #play[data-state=playing] {
  background: var(--play-playing-bg);
  color: var(--play-playing-fg);
}
html[data-theme=light] .transport #play[data-state=paused] {
  background: var(--play-paused-bg);
  color: var(--play-paused-fg);
}
.transport #play:disabled { opacity: .65; }
.transport #wholeLoop,
html[data-theme=light] .transport #wholeLoop {
  position: relative;
  background: var(--loop-off-bg);
  color: var(--loop-off-fg);
  border-color: var(--loop-off-line);
  font-size: 27px;
}
.transport #wholeLoop[aria-pressed=true],
html[data-theme=light] .transport #wholeLoop[aria-pressed=true] {
  background: var(--loop-on-bg);
  color: var(--loop-on-fg);
  border-color: var(--loop-on-line);
  box-shadow: inset 0 -4px 0 currentColor;
}
.transport #wholeLoop[aria-pressed=true]::after {
  content: '✓';
  position: absolute;
  right: 4px;
  top: 2px;
  font-size: 12px;
  font-weight: 800;
}
@media(hover:hover) {
  .transport #play:not(:disabled):hover,
  .transport #wholeLoop:not(:disabled):hover { filter: brightness(1.08); }
}
.transport .seekline {
  grid-area: seek;
  min-width: 0;
  width: 100%;
  flex-basis: auto;
  padding: 0;
  gap: 8px;
  font-size: 12px;
  order: initial;
}
.transport .seekline > span { flex: 0 0 auto; }
.transport .seekwrap { min-width: 0; }
.transport .seekwrap input { display: block; height: 44px; }
.transport .bottomtools {
  grid-area: tools;
  gap: 6px;
  min-width: 0;
  order: initial;
}
.transport .bottomtools button {
  min-width: 0;
  font-size: 15px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: normal;
}
.transport .bottomtools span { font-size: 13px; }
.studioheader button { min-height: 44px; }

@media(max-width:1100px) {
  .hero { grid-template-columns: minmax(260px, 1fr) minmax(0, 1fr) 104px; gap: 16px; }
  .hero img { width: 104px; height: 104px; flex-basis: 104px; }
  .hero .hero-copy h1 { font-size: 28px; }
  .transport {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas: 'controls tools' 'seek seek';
    gap: 8px 12px;
    padding: 14px;
  }
  .transport .transportleft { justify-content: flex-start; }
}
@media(max-width:800px) {
  .hero { grid-template-columns: minmax(0, 1fr) 104px; gap: 12px 16px; padding: 16px 0; }
  .hero-navigation { grid-column: 1/-1; grid-row: 1; gap: 12px; }
  .hero .classic-nav { flex-wrap: wrap; }
  .hero .classic-nav button { flex: 1; font-size: 13px; padding: 8px; }
  .hero-copy { grid-column: 1; grid-row: 2; }
  .hero img { grid-column: 2; grid-row: 2; }
}
@media(max-width:860px) {
  .transport {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'controls' 'seek' 'tools';
    gap: 8px;
  }
  .transport .transportleft { justify-content: center; }
  .transport .bottomtools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media(max-width:600px) {
  /* Only the player stays sticky: a tall phone header must be scrollable away. */
  .studioheader { position: relative; padding: 10px; }
  .headtools { gap: 6px; }
  .headtools button { min-width: 0; min-height: 44px; white-space: normal; overflow: visible; text-overflow: clip; }
  .transport { top: 0; }
  main { padding-left: 10px; padding-right: 10px; }
  .hero { grid-template-columns: minmax(0, 1fr) 86px; gap: 12px; padding: 12px 0; }
  .hero img { width: 86px; height: 86px; flex-basis: 86px; border-radius: 14px; }
  .hero .hero-copy h1 { font-size: 25px; }
  .hero .hero-copy p:last-child { font-size: 11px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .08em; }
}
@media(max-width:480px) {
  .transport { padding: 10px; gap: 6px; }
  .transport .transportleft {
    display: grid;
    grid-template-columns: repeat(5, minmax(44px, 1fr));
    gap: 6px;
  }
  .transport .transportleft #play {
    grid-column: 1/-1;
    grid-row: 1;
    min-width: 0;
    width: 100%;
    min-height: 50px;
    font-size: 16px;
  }
  .transport .transportleft > button:not(#play) {
    grid-row: 2;
    min-width: 44px;
    width: 100%;
    padding: 8px 4px;
  }
  .transport .bottomtools { gap: 6px; }
  .transport .bottomtools button { padding: 8px 4px; font-size: 14px; }
  .transport .seekline { font-size: 12px; gap: 6px; }
  .hero .classic-nav button { font-size: 12px; padding: 8px 5px; }
}
@media(max-width:360px) {
  .hero { grid-template-columns: minmax(0, 1fr) 72px; gap: 10px; }
  .hero img { width: 72px; height: 72px; flex-basis: 72px; }
  .hero .hero-copy h1 { font-size: 23px; }
}
@media(max-height:520px) and (max-width:900px) {
  /* In short landscape views, leave room for the song list below the player. */
  .studioheader, .transport { position: relative; top: auto; }
}