/* Width-based responsive rules for the app shell. Loaded after shell.css. */
@media (max-width: 980px) {
   .autosave-status {
      display: none;
   }
   main {
      padding-right: 22px;
      padding-left: 22px;
   }
   .ribbon-workspace .editor-card {
      top: 0;
   }
   .preview-stage .preview-card {
      min-width: min(820px, 100%);
   }
   .preview-viewport {
      padding: 22px;
   }
}

@media (max-width: 680px) {
   html {
      scroll-behavior: auto;
   }
   body {
      overflow-x: hidden;
      /* `clip` keeps the sticky topbar working: unlike `hidden`, it does not
         turn the body into a scroll container that would trap the header. */
      overflow-x: clip;
   }
   .topbar {
      position: relative;
      height: auto;
      min-height: 0;
      flex-wrap: wrap;
      gap: 10px;
      padding: 11px 12px 12px;
   }
   .brand {
      min-width: 0;
      gap: 9px;
      font-size: 16px;
      letter-spacing: -0.35px;
   }
   .brand > span:last-child {
      min-width: 0;
      white-space: nowrap;
   }
   .brand small {
      display: block;
      overflow: hidden;
      font-size: 7px;
      letter-spacing: 0.08em;
      text-overflow: ellipsis;
   }
   .brand-icon {
      width: 34px;
      height: 34px;
   }
   /* ONE row for the topbar actions. This used to be a 2-column grid, which put
      the mode badge + "Save to Cloud" on the first line and dropped
      "Export .pdf" onto a second one (3 children = 2 rows), wasting half the
      row and pushing the second action out of thumb reach. Now the icon-only
      badge (34px below 1050px), the album pill and the Save/Export group share
      a SINGLE line — always true for a My Songs song (no pill) down to 320px,
      where the two buttons split the remaining width evenly (~125px each, still
      wider than their "Save to Cloud" / "Export .pdf" labels at 10px).
      In ALBUM scope the pill can make the line too tight, so the group simply
      drops to the next line as a PAIR (never one button per row, never clipped).
      The group is content-sized first and only then grows, so `flex-wrap` breaks
      the line before the labels could ever be squeezed. */
   .topbar-actions {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      gap: 6px;
   }
   .topbar-actions .editor-mode-badge {
      flex: 0 0 auto;
   }
   .topbar-actions .album-pill {
      flex: 0 1 auto;
      min-width: 0;
      max-width: 30%;
      overflow: hidden;
   }
   .topbar-actions .album-pill-text {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
   }
   .topbar-actions .topbar-action-group {
      flex: 1 1 auto;
      gap: 6px;
   }
   .topbar-actions .topbar-action-group .button {
      flex: 1 1 auto;
   }
   /* Editor header on small screens: Back, the version pill and the video
      status share one row; the action cluster wraps below. */
   .topbar-nav {
      width: 100%;
      gap: 10px;
   }
   .topbar-actions .button,
   .topbar-actions .button-ghost,
   .topbar-actions .upload-project {
      min-width: 0;
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 7px;
      font-size: 10px;
      white-space: nowrap;
   }
   .topbar-actions .button span[aria-hidden="true"],
   .topbar-actions .upload-project span[aria-hidden="true"] {
      margin-right: 4px;
      font-size: 14px;
   }
   main {
      padding: 22px 14px 54px;
   }
   .intro {
      margin-bottom: 18px;
   }
   .intro h1 {
      font-size: 26px;
      letter-spacing: -1px;
   }
   .intro p {
      max-width: 100%;
      line-height: 1.5;
   }
   .ribbon-workspace .editor-card {
      position: sticky;
      top: 0;
      z-index: 30;
      margin-bottom: 16px;
      padding: 9px 10px 10px;
      border-radius: 14px;
   }
   .ribbon-heading {
      min-height: 34px;
      padding-bottom: 6px;
   }
   .ribbon-heading > div {
      display: grid;
      gap: 1px;
   }
   .ribbon-toggle {
      width: 40px;
      height: 40px;
   }
   .ribbon-tabs {
      margin: 0 -2px;
      overflow-x: hidden;
   }
   .ribbon-tab {
      min-width: 0;
      min-height: 44px;
      flex: 1 1 0;
      padding: 8px 3px 9px;
      font-size: 10px;
      line-height: 1.1;
      white-space: normal;
   }
   .ribbon-panels {
      min-height: 0;
      max-height: 46vh;
      margin: 0;
      padding-top: 9px;
      overflow: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
   }
   .ribbon-panel.active {
      display: grid;
      width: 100%;
      min-width: 0;
      gap: 10px;
   }
   .ribbon-panel .palette-group {
      width: 100%;
      min-width: 0;
   }
   .ribbon-panel .palette-divider {
      width: 100%;
      height: 1px;
      min-height: 1px;
      margin: 0;
   }
   .ribbon-panel .palette-divider span {
      top: -1px;
      left: 0;
      width: 36px;
      height: 3px;
   }
   .ribbon-panel .chord-root-picker {
      grid-template-columns: repeat(6, minmax(42px, 1fr));
      gap: 6px;
   }
   .ribbon-panel .chord-root-picker .key {
      width: 100%;
      height: 42px;
   }
   .chord,
   .duration-option {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
   }
   .custom-chord-entry {
      grid-template-columns: minmax(0, 1fr);
   }
   .custom-chord-entry .text-input {
      min-height: 42px;
      font-size: 16px;
   }
   .custom-chord-preview {
      min-height: 42px;
   }
   .ribbon-panel .slash-builder {
      display: grid;
      width: 100%;
      min-width: 0;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
      gap: 9px;
   }
   .ribbon-panel .slash-builder .palette-label,
   .ribbon-panel .slash-fields,
   .ribbon-panel .add-slash,
   .ribbon-panel .slash-chord-bank {
      grid-column: 1;
      width: 100%;
      margin: 0;
   }
   .slash-fields .select-input {
      min-height: 44px;
      font-size: 16px;
   }
   .ribbon-panel .add-slash {
      min-height: 42px;
   }
   .ribbon-panel .nashville-builder {
      display: grid;
      width: 100%;
      min-width: 0;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
   }
   .nashville-panel-divider {
      width: 100%;
      height: 1px;
   }
   .ribbon-panel .nashville-number-row {
      grid-template-columns: repeat(7, minmax(38px, 1fr));
      gap: 5px;
   }
   .ribbon-panel .nashville-number-row.nashville-zero-row {
      grid-template-columns: minmax(42px, 72px);
   }
   .nashville-row-block {
      grid-template-columns: minmax(0, 1fr);
      gap: 6px;
   }
   .nashville-row-label {
      white-space: normal;
   }
   .ribbon-panel .nashville-number-row {
      width: 100%;
      grid-template-columns: repeat(7, minmax(0, 1fr));
   }
   .nashville-key {
      width: 100%;
   }
   .nashville-key,
   .nashville-accidental {
      min-height: 42px;
   }
   .nashville-selected-card {
      min-width: 0;
      min-height: 64px;
   }
   .lyrics-settings {
      min-width: 0 !important;
      align-items: flex-start;
      flex-direction: column;
      gap: 13px;
   }
   .switch-control {
      min-height: 44px;
   }
   .lyrics-shortcuts {
      flex-wrap: wrap;
      gap: 8px 12px;
      padding: 0 2px;
      white-space: normal;
   }
   .auto-syllable-actions {
      flex-direction: column;
      align-items: stretch;
   }
   .auto-syllable-actions .button {
      width: 100%;
      min-height: 44px;
   }
   .preview-stage {
      border-radius: 16px;
   }
   .preview-stage {
      margin-right: -8px;
      margin-left: -8px;
      border-radius: 14px;
   }
   /* The live preview itself never scrolls sideways on a phone — the horizontal
      scroll belongs to EACH SECTION's bar grid (see .bar-grid below), so a long
      bar only moves its own section, exactly like the desktop behaviour. */
   .preview-viewport {
      padding: 0;
      overflow-x: hidden;
      overscroll-behavior-x: contain;
   }
   .preview-stage .preview-card {
      width: 100%;
      min-width: 0;
      min-height: 540px;
      border: 0;
      border-radius: 0;
      padding: 20px 12px;
      box-shadow: none;
   }
   .preview-header {
      flex-direction: column;
      gap: 16px;
   }
   .preview-header h1 {
      font-size: 25px;
      overflow-wrap: anywhere;
   }
   .song-meta {
      flex-wrap: wrap;
      gap: 14px 20px;
      text-align: left;
   }
   .song-meta > span {
      min-width: 72px;
   }
   .transpose-control {
      align-items: flex-start;
   }
   .transpose-buttons button {
      width: 44px;
      height: 44px;
   }
   .preview-rule {
      margin: 20px 0 22px;
   }
   .section-preview-heading {
      align-items: flex-start;
      flex-direction: column;
      gap: 8px;
   }
   .section-tools {
      width: 100%;
      align-items: center;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 5px;
      padding: 5px;
   }
   .section-lyrics-toggle,
   .section-chord-above-toggle,
   .text-button,
   .section-menu summary {
      min-height: 40px;
   }
   .section-menu summary {
      width: 40px;
   }
   .section-menu-popover {
      right: auto;
      left: 0;
      width: 170px;
   }
   /* PER-SECTION horizontal scroll (the desktop behaviour): a bar whose content
      is wider than the pane scrolls inside its OWN section's grid instead of
      stretching or clipping the whole live preview. Mirrors the desktop rule in
      styles/score/preview.css (`.bar-grid { overflow-x: auto }`). */
   .bar-grid {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }
   .bar-batch,
   .bar-batch.has-lyrics {
      display: grid;
      width: 100%;
      min-width: 0;
      grid-template-columns: minmax(0, 1fr);
      margin: 12px 0;
      padding: 0;
      border-bottom: 0;
   }
   .bar-batch .bar,
   .bar-batch.has-lyrics .bar.has-lyrics {
      position: relative;
      width: 100%;
      min-width: 0;
      min-height: 72px;
      padding: 14px 52px 14px 10px;
      border-bottom: 1px solid #c9d6cb;
   }
   .bar-batch .bar:last-child {
      border-bottom: 0;
   }
   .scroll-affordance span {
      display: none;
   }
   .section-tools {
      opacity: 1 !important;
      transform: none !important;
   }
   /* Keep delete-bar centered; sticky :hover from long-press must not re-anchor it. */
   .delete-bar,
   .bar:hover .delete-bar,
   .bar:focus-within .delete-bar,
   .delete-bar:hover,
   .delete-bar:active {
      top: 50%;
      right: 5px;
      width: 40px;
      height: 40px;
      opacity: 1;
      transform: translateY(-50%);
      transition: background 0.15s ease;
   }
   .delete-bar:active {
      background: #ffe6e3;
   }
   /* Keep a large touch target, but draw thin beams higher above the notes. */
   .duration-line {
      top: -32px;
      height: 38px;
      background: transparent !important;
      box-shadow: none !important;
   }
   .duration-line::before {
      top: 8px;
      height: 1.5px;
      border-radius: 1px;
   }
   .duration-quarter .duration-line::after {
      top: 13px;
      height: 1.5px;
      border-radius: 1px;
   }
   /*
     Nested 1/2: hang its second bar the SAME 5px under the primary beam as the 1/4's
     second bar sits under its first (8px → 13px inside the .duration-line box), instead
     of dropping the beam to the lane top. The primary line lands at -32px + 8px = -24px,
     so the nested line belongs at -19px; this box draws its own bar 4px in (see the
     ::before rule below) ⇒ top: -23px. (Was 8px, which left a 36px gap instead of 5px.)
   */
   .nested-duration-line {
      top: -23px;
      height: 28px;
      background: transparent !important;
      box-shadow: none !important;
   }
   .nested-duration-line::before {
      content: "";
      display: block;
      top: 4px;
      height: 1.5px;
      border-radius: 1px;
      background: var(--dark-green);
   }
   /* Keep high-octave Nashville dots below nested/primary beams on touch layouts. */
   .placed-chord .nashville-octave-high .nashville-octave-dot,
   .placed-chord .nashville-octave-low .nashville-octave-dot {
      z-index: 2;
      color: currentColor;
      font-size: 0.74em;
      font-weight: 800;
      line-height: 1;
      text-shadow:
         0.2px 0 0 currentColor,
         -0.2px 0 0 currentColor;
   }
   .placed-chord .nashville-octave-high .nashville-octave-dot {
      top: 0.18em;
      bottom: auto;
      transform: translate(-50%, -100%);
   }
   /* Low-octave dots: slight lift only from original under-number position. */
   .placed-chord .nashville-octave-low .nashville-octave-dot {
      top: calc(100% - 2px);
      bottom: auto;
      transform: translateX(-50%);
   }
   .beat-column,
   .notation-cell,
   .beat-group,
   .nested-beat-group,
   .bar {
      overflow: visible;
   }
   .placed-chord {
      touch-action: manipulation;
   }
   .preview-footer {
      align-items: stretch;
      flex-direction: column;
   }
   .preview-actions {
      display: grid;
      width: 100%;
      grid-template-columns: 1fr 1fr;
   }
   .preview-actions .button,
   .preview-actions .button-ghost {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
   }
   .toast {
      bottom: max(16px, env(safe-area-inset-bottom));
      width: calc(100% - 28px);
      max-width: 420px;
      text-align: center;
   }
   .site-footer-inner {
      min-height: 0;
      padding: 22px 16px calc(22px + env(safe-area-inset-bottom));
      align-items: flex-start;
      flex-direction: column;
      gap: 16px;
   }
   .footer-identity {
      align-items: flex-start;
   }
   .footer-identity p {
      max-width: 260px;
   }
   .footer-meta {
      width: 100%;
      align-items: flex-start;
      justify-content: flex-start;
      flex-direction: column;
      gap: 8px;
      text-align: left;
   }
}

@media (max-width: 340px) {
   .bar.has-lyrics .beat-column:not(.duration-column),
   .bar.has-lyrics .sub-beat {
      width: 44px;
      min-width: 44px;
   }
   .bar.has-lyrics .sub-lyrics {
      grid-template-columns: repeat(var(--lyric-leaves), 44px);
   }
   .bar.has-lyrics .sub-lyrics .lyric-editor {
      width: 38px;
   }
}