/* Web presentation. All colors and controls come from Woodshed's shared theme. */
.studio-rail { position: fixed; inset: 0 auto 0 0; z-index: 5; width: var(--studio-rail-width); padding: 28px 18px; display: flex; flex-direction: column; gap: 10px; background: var(--card); border-right: 1px solid var(--border); }
.studio-rail .wordmark { font-size: 19px; margin: 0 0 42px; gap: 8px; }
.studio-rail .wordmark svg { width: 28px; height: 28px; }
.studio-rail .eyebrow { padding: 0 12px; margin-bottom: 8px; font-size: 10px; }
.rail-link { display: block; text-align: left; padding: 12px 14px; background: transparent; border: 1px solid transparent; border-radius: 10px; color: var(--muted); font-weight: 600; text-decoration: none; }
.rail-link.active { background: var(--accent-soft); color: var(--text); border-color: var(--border-strong); }
button.rail-link:hover { background: var(--card-hover); color: var(--text); }
.rail-note { margin-top: auto; padding: 14px 8px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.rail-privacy { color: var(--muted); font-size: 12px; padding: 8px; }
.studio-layout { --studio-rail-width: 176px; padding-left: var(--studio-rail-width); min-height: 100dvh; display: flex; flex-direction: column; }
.studio .web-nav { max-width: none; padding: 20px 32px; min-height: 70px; }
.studio .web-nav .wordmark { font-size: 18px; visibility: hidden; }
.studio .studio-shell { max-width: none; width: 100%; margin: 0; flex: 1; padding: 24px 32px 44px; }
.studio .song-heading { background: transparent; border: 0; padding: 0; gap: 20px; margin: 4px 0 26px; }
.studio .song-artwork { width: 88px; aspect-ratio: 1; }
.studio .song-heading-title h1 { font-size: clamp(22px, 2.2vw, 30px); margin: 7px 0; }
.studio .song-heading-actions { flex-direction: row; }
.studio .song-heading-actions .secondary-action { display: none; }
.studio .song-heading-actions .text-link { color: var(--muted); font-size: 12px; }
.studio .studio-heading h1 { font-size: clamp(28px, 3vw, 40px); }
.studio .source-picker { padding: 28px; }
.studio .library-grid { grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); }
.studio .web-footer { max-width: none; width: 100%; margin: 0; padding: 12px 32px 24px; }
.studio-layout:has(.web-app .studio-transport) .web-footer { padding-bottom: 120px; }
.studio-layout:has(.web-app .studio-transport) .studio-shell { padding-bottom: 12px; }
.mode-prompt { margin: 28px 0; }
.mode-prompt h2 { font-size: 18px; margin-bottom: 8px; }
.mode-prompt p { color: var(--muted); font-size: 14px; }
.web-app { padding: 0; border: 0; background: transparent; }
.web-app > .header { padding: 0 0 16px; border-bottom: 1px solid var(--border); }
.workspace-label { font-weight: 650; font-size: 15px; }
.web-app .header .brand-link { display: none; }
.web-app .strip, .demo-studio .strip { padding: 18px 20px; margin: 18px 0; gap: 18px 24px; }
.web-app .knob.speed { max-width: 380px; }
.studio-timing-settings { flex-basis: 100%; border-top: 1px solid var(--border); padding-top: 14px; color: var(--muted); }
.studio-timing-settings summary { cursor: pointer; font-size: 12px; width: fit-content; }
.studio-timing-settings[open] summary { color: var(--text); margin-bottom: 18px; }
.studio-timing-content { display: flex; flex-wrap: wrap; gap: 18px; }
.studio-timing-content .practice-musical-settings { padding: 0; border: 0; }
.studio-player { margin-top: 20px; }
.studio-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.studio-workspace:not(:has(.studio-mix)) { grid-template-columns: 1fr; }
.studio-mix, .studio-timeline { min-width: 0; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 20px; }
.studio-mix .mix-section { padding: 0; margin-top: 14px; border: 0; }
.studio-mix .mix-section:first-child { margin-top: 0; }
.studio-mix .mix-title, .workspace-heading > span:first-child { color: var(--text); font-size: 14px; font-weight: 650; }
.studio-mix .mix-head { gap: 14px; margin-bottom: 18px; }
.studio-mix .presets { gap: 6px; }
.studio-mix .chip { font-size: 11px; padding: 6px 10px; }
.studio-mix .stem-volume-action { border-bottom: 1px solid var(--border); margin: 0 0 14px; padding-bottom: 14px; font-size: 12px; }
.studio-mix .mixer { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); background: transparent; border: 0; padding: 0; gap: 12px; }
.studio-mix .mixer-row { grid-template-columns: minmax(0, 1fr) 38px 30px 30px; gap: 10px; padding: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; }
.studio-mix .mixer-row .mixer-name { grid-column: 1; grid-row: 1; }
.studio-mix .mixer-row .mixer-percent { grid-column: 2; grid-row: 1; }
.studio-mix .mixer-row button { grid-row: 1; }
.studio-mix .mixer-row input[type=range] { grid-row: 2; grid-column: 1 / -1; width: 100%; margin: 2px 0 0; accent-color: var(--accent); }
.studio-mix .master-volume { max-width: 300px; margin-bottom: 18px; background: transparent; }
.studio-mix .no-solo { grid-template-columns: minmax(0, 1fr) 38px 30px; }
.studio-mix .mixer-row.silent { background: var(--card); }
.workspace-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.workspace-heading > span:last-child { font-size: 11px; color: var(--muted); }
.studio-timeline .waveform { margin: 0; padding: 12px 8px 4px; background: var(--bg); }
.studio-selection { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 20px; }
.studio-selection .loop-row { gap: 10px; margin: 0; }
.web-app .studio-selection .loop-transport { display: none; }
.studio-selection .toggle { margin-left: 0; }
.studio-transport { border: 1px solid var(--border-strong); background: var(--card); border-radius: 16px; padding: 18px 22px; margin-top: 24px; }
.web-app .studio-transport { position: sticky; bottom: 16px; z-index: 4; box-shadow: 0 8px 28px var(--bg); }
.studio-transport .transport { margin: 0; gap: 14px; }
.studio-transport .now-song { display: none; }
.studio-transport .square { width: 36px; height: 36px; }
.studio-transport .now-sub { font-size: 12px; }
.studio-transport .clock { white-space: nowrap; font-size: 18px; }
.studio-transport .clock-total { font-size: 14px; }
.studio-extras { margin: 24px 0; display: grid; gap: 18px; }
.web-app .studio-extras { margin-bottom: 8px; }
.web-app .question { margin: 28px 0 18px; }
.web-app .task-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.web-app .task-card { min-height: 180px; padding: 24px; border-radius: 16px; }
.web-app .setup { width: 100%; max-width: none; }
.studio .youtube-embed { margin: 0 0 24px; max-width: 720px; }
.studio .capture-complete { font-size: 12px; }
/* The landing shows an actual, compact Studio, using this same layout. */
.landing-hero { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.3fr); gap: 40px; max-width: 1480px; }
.demo-studio { padding: 22px; scroll-margin-top: 24px; }
.demo-studio .demo-title { margin: 0 0 18px; gap: 12px; }
.demo-studio .record-art { width: 46px; height: 46px; }
.demo-studio .record-art svg { width: 30px; height: 30px; }
.demo-studio .demo-title h2 { font-size: 18px; margin-top: 5px; }
.demo-studio .studio-workspace { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.demo-studio .studio-mix, .demo-studio .studio-timeline { padding: 14px; border-radius: 12px; }
.demo-studio .strip { gap: 12px; padding: 12px; }
.demo-studio .strip .knob { flex: 1 1 200px; }
.demo-studio .strip .knob-label { font-size: 11px; width: 60px; }
.demo-studio .studio-mix .mixer-row { padding: 10px; gap: 6px; grid-template-columns: minmax(0, 1fr) 32px 26px 26px; }
.demo-studio .studio-mix .mixer-name { font-size: 12px; }
.demo-studio .studio-mix button.square { width: 26px; height: 26px; }
.demo-studio .workspace-heading > span:last-child { width: 100%; }
.demo-studio .studio-selection { margin-top: 14px; padding-top: 14px; }
.demo-studio .studio-selection .time-field { padding: 4px 6px; }
.demo-studio .studio-selection .time-field input { width: 6ch; }
.demo-studio .studio-selection .arrow { display: none; }
.demo-studio .studio-selection .toggle { width: 100%; justify-content: center; }
.demo-studio .studio-transport { padding: 14px; margin-top: 12px; }
.demo-studio .studio-transport .clock { font-size: 14px; }
.demo-studio .studio-transport .clock-total { font-size: 12px; }
.demo-studio .now-title { font-size: 13px; }
.demo-studio .now-sub { font-size: 11px; }
.demo-studio .demo-caption { margin-top: 14px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 1100px) {
  .studio-workspace { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .web-app .task-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing-hero { grid-template-columns: 1fr; max-width: 850px; }
  .hero-copy > p { max-width: 580px; }
  .demo-studio .studio-workspace { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  .studio-rail { position: static; width: auto; padding: 16px 20px; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--border); }
  .studio-rail .wordmark { margin: 0 auto 0 0; }
  .studio-rail .eyebrow, .rail-note, .rail-privacy { display: none; }
  .studio-layout { padding-left: 0; }
  .studio .web-nav { display: none; }
  .studio .studio-shell { padding: 24px 18px; }
  .studio-workspace { grid-template-columns: 1fr; }

  .studio-mix .mixer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-transport .transport { flex-wrap: wrap; }
  .studio-transport .now-playing { flex-basis: 45%; }
  .studio-transport .clock { margin-left: auto; }
  .studio .song-heading-actions { width: auto; }
}
@media (max-width: 500px) {
  .demo-studio { padding: 14px; }
  .demo-studio .studio-workspace { grid-template-columns: 1fr; }
  .demo-studio .studio-mix .mixer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .demo-studio .studio-selection .toggle { width: auto; }
  .web-app .task-cards { grid-template-columns: 1fr; }
  .web-app .task-card { min-height: 130px; }
  .web-app .strip { padding: 14px; gap: 16px; }
  .studio-transport .now-sub { display: none; }
  .studio .song-artwork { width: 60px; }
  .studio .song-heading-title h1 { font-size: 22px; }
}
/* Keep playback available while scrolling through lyrics, chords and saved sections. */
.web-app .studio-transport { position: fixed; bottom: 16px; left: calc(var(--studio-rail-width) + 32px); right: 32px; margin: 0; }
@media (max-width: 800px) { .web-app .studio-transport { left: 18px; right: 18px; bottom: 12px; padding: 14px; } }
.studio-rail a { text-decoration: none; }
.web-app > .header { flex-wrap: wrap; }
.studio .song-heading-title h1 { overflow-wrap: anywhere; }
@media (max-width: 500px) { .studio-mix .mixer, .demo-studio .studio-mix .mixer { grid-template-columns: 1fr; } }

/* Modes are separate from library navigation. Timeline always owns a full row. */
.rail-modes { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border-strong); margin-top: 14px; padding-top: 24px; }
.rail-modes .eyebrow { margin-bottom: 8px; }
.rail-modes .rail-link { display: flex; gap: 10px; align-items: center; padding: 12px 10px; font-size: 12px; }
.rail-modes .rail-link svg { flex: none; width: 18px; height: 18px; }
.rail-modes button:disabled { opacity: .5; }
.web-app .section-timeline-row, .web-app .section-marker { height: 36px; }
.demo-studio .studio-mix .mixer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.demo-studio .studio-selection .toggle { width: auto; margin-left: auto; }
@media (max-width: 800px) {
  .studio-rail { flex-wrap: wrap; }
  .rail-modes { flex-direction: row; flex-basis: 100%; gap: 6px; margin-top: 4px; padding-top: 12px; flex-wrap: wrap; }
  .rail-modes .rail-link { flex: 1 1 130px; font-size: 12px; padding: 10px; }
}
@media (max-width: 500px) {
  .demo-studio .studio-mix .mixer { grid-template-columns: 1fr; }
}

/* Collapsing navigation releases width for the entire Studio, including playback. */
.sidebar-collapsed { --studio-rail-width: 64px; }
.rail-toggle { position: absolute; top: 76px; right: -14px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--card); color: var(--muted); }
.rail-toggle:hover { background: var(--card-hover); color: var(--text); }
.rail-toggle svg { width: 14px; height: 14px; transform: rotate(-90deg); }
.rail-library { display: flex; align-items: center; gap: 10px; }
.rail-library svg { flex: none; width: 18px; height: 18px; }
.sidebar-collapsed .studio-rail { padding-inline: 10px; }
.sidebar-collapsed .studio-rail .wordmark { justify-content: center; }
.sidebar-collapsed .studio-rail .wordmark span,
.sidebar-collapsed .studio-rail .eyebrow,
.sidebar-collapsed .studio-rail .rail-link span,
.sidebar-collapsed .studio-rail .rail-note,
.sidebar-collapsed .studio-rail .rail-privacy { display: none; }
.sidebar-collapsed .studio-rail .rail-link { justify-content: center; padding: 12px; }
.sidebar-collapsed .rail-modes { padding-top: 16px; }
@media (max-width: 800px) {
  .rail-toggle { position: static; order: 1; margin-left: 4px; flex: none; }
  .rail-modes { order: 2; }
  .sidebar-collapsed .studio-rail .rail-link { flex: none; }
  .sidebar-collapsed .studio-rail .wordmark { margin-right: auto; }
  .sidebar-collapsed .rail-modes { padding-top: 12px; }
}