/* Device ranges: mobile <768px; tablet 768–1023px; laptop/desktop >=1024px.
   Existing base CSS is retained; compact overrides share these boundaries. */
/* Compact layouts are kept together so desktop styling remains independent. */
@media (width < 1024px) {
  .site-header .nav-button, .language-toggle { min-height: 44px; }
  .nav { gap: clamp(8px, 2vw, 20px); }
  .lesson-stage {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(360px, 1fr);
    gap: 24px;
    padding: 24px clamp(16px, 4vw, 40px) 64px;
  }
  .lesson-side {
    grid-column: 1; grid-row: 1;
    min-width: 0; min-height: 0;
    grid-template-rows: auto auto;
    gap: 16px;
  }
  .lesson-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .lesson-card {
    min-height: 44px; padding: 10px 0;
    border: 0; border-radius: 0;
    background: transparent; box-shadow: none;
  }
  .lesson-card.is-active { background: transparent; color: var(--ink); }
  .lesson-card.is-active strong { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
  .lesson-card:hover, .lesson-card:focus-visible { transform: none; }
  .lesson-card strong { font-size: 14px; line-height: 1.45; }
  .lesson-copy p { max-width: 620px; font-size: 14px; line-height: 1.75; }
  .lesson-demo {
    grid-column: 1; grid-row: 2;
    min-width: 0; min-height: 380px;
    transform: none;
  }
  .lesson-demo::after { height: 36px; }
  .lesson-color-demo { gap: clamp(4px, 2vw, 20px); flex-wrap: nowrap; }
  .color-chip { flex: 1 1 0; max-width: 64px; min-height: 64px; }
  .color-chip::after { width: clamp(28px, 5vw, 48px); height: clamp(28px, 5vw, 48px); }
  .lesson-harmony-demo { padding: 56px 0 0; }
  .harmony-toolbar { top: 0; right: 4px; }
  .lesson-tension-toggle { min-height: 44px; }
  .harmony-card-list { width: 100%; padding: 12px 4px 36px; }
  .harmony-card { grid-template-columns: minmax(0, 1fr) minmax(140px, .6fr); gap: 24px; }
  .harmony-card strong { font-size: 14px; line-height: 1.75; }
  .analysis-tab { min-height: 44px; }
  .my-songs-toggle { min-height: 44px; }
  .archive-more-button { width: 44px; height: 44px; opacity: 1; pointer-events: auto; }
  .delete-confirm-dialog { width: min(300px, calc(100vw - 32px)); padding: 20px; }
  .delete-confirm-dialog h2 { font-size: 15px; }
  .delete-confirm-dialog p { font-size: 13px; line-height: 1.6; }
  .delete-confirm-actions button { min-height: 44px; font-size: 13px; }
}

@media (min-width: 768px) and (width < 1024px) {
  /* Leave enough score width even after a previous desktop panel resize. */
  .compose-view { --analysis-width: 38vw; }
  .analysis-panel { min-width: 0; max-width: none; }
  .resize-handle { display: none; }
  .compose-view.is-playing .compose-tools { flex-wrap: wrap; max-width: calc(62vw - 110px); }
  .compose-view.is-playing .score-quick-actions { gap: 4px; }
  .analysis-tabs { gap: 12px; padding: 8px; }
}

@media (width < 768px) {
  .site-header { padding-inline: 12px; }
  .site-header .wordmark { font-size: 18px; }
  .site-header .nav { gap: 4px; }
  .site-header .nav > button { padding-inline: 6px; font-size: 12px; }
  .site-header .language-toggle { min-width: 44px; }
  .lesson-stage { gap: 16px; padding-top: 16px; }
  .lesson-menu { gap: 0 12px; }
  .lesson-card { padding: 10px 0; }
  .lesson-card strong { font-size: 12px; }
  .lesson-demo { min-height: 340px; }
  .lesson-demo[data-track="colorHarmony"] { min-height: 500px; }
  .harmony-card { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .harmony-combo { justify-content: center; }
  .harmony-card-list { gap: 32px; }
  .lesson-color-demo { gap: 2px; }
  .color-chip { font-size: 13px; }

  /* Stack tools at the score’s upper-right, matching the compact tablet layout. */
  .workspace { padding: 0; }
  .compose-tools, .compose-view.is-playing .compose-tools {
    top: 16px; left: auto; right: 12px;
    flex-direction: column; align-items: flex-end; justify-content: flex-start;
    flex-wrap: nowrap; gap: 7px; padding: 6px; border-radius: 18px;
    background: transparent; backdrop-filter: none;
  }
  .compose-tools .harmony-type-menu { max-width: calc(100vw - 24px); }
  .my-songs-toggle { top: 6px; }
  .composition-panel { min-width: 0; }
  .score-quick-actions, .compose-view.is-playing .score-quick-actions {
    right: 8px; bottom: 7px; gap: 4px; flex-wrap: nowrap;
    max-width: calc(100% - 60px);
  }
  .score-quick-actions .zoom-controls { display: none; }
  .volume-control { left: 8px; bottom: 7px; }
  .volume-button { width: 44px; height: 44px; }
  .controlbar { min-height: 0; padding: 10px 16px max(10px, env(safe-area-inset-bottom)); gap: 8px; }
  .controlbar .transport-controls { gap: 12px; }
  .controlbar .user-status-button { min-height: 36px; }
  .compose-publish-button { min-height: 44px; }

  /* Playback keeps the score above a full-width mood / AI panel. */
  .compose-view.is-playing .workspace {
    display: grid; grid-template-rows: minmax(120px, 1fr) minmax(200px, 1fr);
    padding-bottom: 0;
  }
  .compose-view.is-playing .composition-panel { margin-right: 0; height: auto; padding-bottom: 58px; }
  .analysis-panel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; min-width: 0; max-width: none;
    border-left: 0; border-top: 1px solid var(--hairline);
    transform: translateY(104%);
  }
  .compose-view.is-playing .analysis-panel { position: relative; height: 100%; transform: none; }
  .resize-handle { display: none; }
  .analysis-tabs { gap: 24px; padding: 2px 12px; }
  .compose-view.is-playing .score-quick-actions,
  .compose-view.is-playing .volume-control { bottom: calc((100% - 106px) / 2 + 7px); }
  .ai-field textarea, .ai-field select { font-size: 16px; }
  .example-import-button { bottom: 16px; min-height: 44px; }
  .archive-grid { gap: 24px 16px; padding-bottom: 80px; }
}

@media (max-width: 360px) {
  .site-header { padding-inline: 8px; }
  .site-header .nav > button { padding-inline: 4px; }
}

@media (pointer: coarse) {
  button { touch-action: manipulation; }
  input, textarea, select { font-size: max(16px, 1em); }
}

@media (width < 1024px) {
  /* Keep one language label inside the larger touch target. */
  .language-toggle .language-rail { display: block; transform: none; }
  .language-current { height: 44px; line-height: 44px; }
  .language-next { display: none; }
}
@media (width < 768px) {
  .compose-view.is-playing .score-quick-actions { flex-direction: row; align-items: center; }
  body.is-example-mode .visual-caption { top: auto; bottom: 66px; font-size: 11px; }
  body.is-example-mode .example-import-button { bottom: 10px; }
}
@media (width < 768px) {
  .composition-panel, .compose-tools, .score-quick-actions, .analysis-panel { transition: none; }
  body.is-example-mode .visual-stage { height: calc(100% - 56px); }
  body.is-example-mode .visual-caption { bottom: 52px; }
}
@media (width < 768px) and (max-height: 650px) {
  .compose-view.is-playing .workspace {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }
  .compose-view.is-playing .analysis-panel { overflow-y: auto; }
  .compose-view.is-playing .analysis-pages { min-height: 240px; }
}

/* Phone and tablet navigation share the compact header. */
@media (width < 1024px), (hover: none) and (pointer: coarse) {
  :root {
    --bottom-nav-height: calc(56px + env(safe-area-inset-bottom));
    --home-section-height: calc(100dvh - var(--header-height) - var(--bottom-nav-height));
  }
  .site-header .nav {
    position: fixed; inset: auto 0 0;
    height: var(--bottom-nav-height);
    display: flex; gap: 0;
    padding: 0 max(16px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(16px, env(safe-area-inset-left));
    border-top: 1px solid var(--hairline);
    background: var(--paper);
  }
  .site-header .nav > .nav-button {
    position: relative; flex: 1; height: 56px;
    padding: 0 8px; font-size: 13px;
    color: var(--muted);
  }
  .site-header .nav > .nav-button.is-active { color: var(--ink); }
  .site-header .nav > .nav-button.is-active::after {
    content: ""; position: absolute;
    width: 20px; height: 1px; left: 50%; bottom: 10px;
    transform: translateX(-50%); background: currentColor;
  }
  .site-header .nav > .language-toggle {
    position: fixed; top: 3px; right: max(12px, env(safe-area-inset-right));
    width: 44px; height: 44px; padding: 0;
  }
  .language-current { text-align: center; }
  .compose-view.is-active { bottom: var(--bottom-nav-height); }
  .compose-view .controlbar { padding-bottom: 10px; }
  .my-songs-panel { bottom: var(--bottom-nav-height); }
  .lesson-stage {
    min-height: calc(100dvh - var(--header-height) - var(--bottom-nav-height));
    padding-bottom: calc(40px + var(--bottom-nav-height));
  }
  body:not([data-view="compose"]) .user-status-area {
    bottom: calc(var(--bottom-nav-height) + 12px);
  }
  .archive-view { padding-bottom: calc(80px + var(--bottom-nav-height)); }
  .archive-player { bottom: calc(var(--bottom-nav-height) + 12px); }
  .archive-view:has(.archive-player.has-song) {
    padding-bottom: calc(300px + var(--bottom-nav-height));
  }
}

.mobile-menu-toggle, .mobile-feedback-close { display: none; }
@media (width < 1024px), (hover: none) and (pointer: coarse) {
  :root { --bottom-nav-height: 0px; }
  .site-header .wordmark { display: none; }
  .mobile-menu-toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 44px; height: 44px; margin-left: auto;
    padding: 10px; border: 0; background: transparent; color: var(--ink);
  }
  .mobile-menu-toggle svg { display: block; flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: var(--icon-line-width); stroke-linecap: butt; }
  .mobile-menu-toggle svg path { vector-effect: non-scaling-stroke; }
  .site-header .nav {
    display: none; inset: 50px 12px auto auto; width: 200px; height: auto;
    padding: 8px; border: 1px solid var(--hairline); border-radius: 14px;
    background: var(--paper); box-shadow: var(--soft-shadow-tight);
  }
  .site-header.is-menu-open .nav { display: flex; flex-direction: column; align-items: stretch; }
  .site-header .nav > .nav-button {
    flex: none; height: 44px; text-align: left; padding: 0 14px; border-radius: 8px;
  }
  .site-header .nav > .nav-button.is-active { background: var(--soft-tint); }
  .site-header .nav > .nav-button.is-active::after { content: none; }
  .site-header .nav > .language-toggle {
    position: static; width: 100%; height: 44px; margin-top: 8px;
    border-top: 1px solid var(--hairline); padding-inline: 14px;
  }
  .site-header .language-current { text-align: left; }

  body .site-header .user-status-area {
    position: absolute; left: 12px; right: auto; top: 3px; bottom: auto; max-width: calc(100% - 80px);
  }
  .site-header .user-status-button { min-height: 44px; color: var(--ink); }
  .site-header .user-menu { top: calc(100% + 8px); bottom: auto; left: 0; right: auto; }
  .my-songs-toggle { border: 1px solid var(--hairline); border-left: 0; border-radius: 0 10px 10px 0; }

}

@media (width < 768px) {
  /* Playback opens a new full-screen feedback layer. */
  .compose-view.is-playing { top: 0; bottom: 0; z-index: 1500; }
  .compose-view.is-playing .workspace { display: block; padding: 0; }
  .compose-view.is-playing .composition-panel,
  .compose-view.is-playing .compose-tools,
  .compose-view.is-playing .score-quick-actions,
  .compose-view.is-playing .volume-control,
  .compose-view.is-playing .controlbar,
  .compose-view.is-playing .timebar,
  .compose-view.is-playing .my-songs-panel { display: none; }
  .compose-view.is-playing { grid-template-rows: minmax(0, 1fr); }
  .compose-view.is-playing .analysis-panel {
    position: absolute; inset: 0; height: 100%; border: 0; overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr);
  }
  body.is-example-mode .compose-view.is-playing .analysis-tabs,
  .compose-view.is-playing .analysis-tabs {
    display: flex; justify-content: center; align-items: center; gap: clamp(12px, 4vw, 24px);
    padding: max(6px, env(safe-area-inset-top)) 56px 6px;
  }
  .compose-view.is-playing .analysis-tab { min-width: 0; }
  .compose-view.is-playing .analysis-tab.is-active { text-decoration: underline; text-underline-offset: 7px; }
  .compose-view.is-playing .analysis-pages { min-height: 0; }
  .compose-view.is-playing .mobile-feedback-close {
    display: grid; place-items: center; position: absolute; right: 8px;
    top: max(6px, env(safe-area-inset-top)); z-index: 30;
    width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink);
  }
  .mobile-feedback-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: var(--icon-line-width); }
}

@media (width < 768px) {
  .compose-view.is-playing .analysis-tab::after { content: none; }
}

/* Share the desktop toolbar button styling at every width; only its layout adapts. */
@media (width < 1024px) {
  .compose-tools .tool-button { height: 30px; min-height: 30px; padding-inline: 12px; font-size: 12px; }
}
@media (width < 768px) {
  .compose-tools, .compose-view.is-playing .compose-tools { flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: 7px; }
}

/* Compact score actions mirror the vertical composition toolbar. */
@media (width < 768px) {
  .score-quick-actions,
  .compose-view.is-playing .score-quick-actions {
    flex-direction: column;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: 7px;
  }
}

/* Compact navigation exposes both language choices without desktop hover motion. */
.compact-language-options { display: none; }
@media (width < 1024px), (hover: none) and (pointer: coarse) {
  .site-header .nav > .language-toggle { display: none; }
  .site-header .compact-language-options {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; padding-inline: 14px;
    border-top: 1px solid var(--hairline); color: var(--muted);
  }
  .compact-language-options button {
    min-height: 44px; padding: 0; border: 0; border-radius: 0;
    background: transparent; color: var(--muted);
    font: inherit; font-size: 11px; box-shadow: none;
  }
  .compact-language-options button[aria-pressed="true"] { color: var(--ink); }
}

/* Compact navigation: page name in the header, account inside the menu. */
.compact-page-title { display: none; }
@media (width < 1024px), (hover: none) and (pointer: coarse) {
  .site-header .compact-page-title { display: block; min-height: 44px; padding: 0 8px; border: 0; background: transparent; font-size: 14px; font-weight: 500; color: var(--ink); }
  .site-header .compact-page-title::after { content: none; }
  .site-header .nav { max-height: calc(100dvh - 62px); overflow-y: auto; }
  body .site-header .nav .user-status-area {
    position: relative; inset: auto; order: -1; max-width: none; width: 100%;
    padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--hairline);
  }
  .site-header .nav .user-status-button { width: 100%; padding-inline: 14px; text-align: left; font-size: 13px; }
  .site-header .nav .user-menu {
    position: static; width: 100%; box-sizing: border-box; padding: 0;
    border: 0; border-radius: 0; box-shadow: none; background: transparent;
  }
  .site-header .nav .theme-picker { position: static; width: 100%; box-sizing: border-box; box-shadow: none; }
}

@media (min-width: 1024px) {
  :root { --bottom-nav-height: 0px; }
}