/* --- Narrow screens -------------------------------------------------------------------------------- */

@media (max-width: 40rem) {
  .page-settings { display: inline-grid; }
  .page-head { margin-bottom: var(--space-5); }
  /* A size down, so the page tools stay on the title's row even at 320px. */
  .page-head h1 { font-size: clamp(1.75rem, 7vw + .25rem, 2.25rem); }

  /* The hero: a smaller cover and title, so the actions and the first tracks reach the
     first screen. */
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero .cover { max-width: min(12rem, 56vw); }
  .hero h1 { font-size: clamp(1.75rem, 7.5vw, 2.25rem); }
  .hero[data-len="long"] h1 { font-size: 1.5rem; }
  /* Its actions on one row: Play keeps its words; a secondary action beside it (Shuffle,
     the tag editor's Edit) is a round icon button, its label visually hidden and still
     its name. A lone one (Rename artist) keeps its words. At 320px the row wraps. */
  .hero-actions { gap: var(--space-2); }
  .hero-actions .btn { padding: 0 1rem; }
  .hero-actions .btn-quiet:not(:only-child) { width: var(--target); min-height: var(--target); padding: 0; }
  .hero-actions .btn-quiet:not(:only-child) .btn-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Home's feature: a compact horizontal card, the cover beside the words, so the first
     shelf moves up the first screen. */
  .feature {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }
  .feature-title { font-size: 1.5rem; line-height: 1; }
  .feature-artist { font-size: var(--text-md); }
  .feature .btn { margin-top: var(--space-1); }

  .album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
  .track { gap: var(--space-3); }
  .track-leader { display: none; }
  .track-main { flex: 1 1 auto; }

  .upload-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name cancel" "size size" "bar bar" "status status"; }
}

/* A short phone (568px tall: an iPhone SE): a smaller cover and less room above it, so
   Play is above the fold even under a long title (five lines there, hero.css). */
@media (max-width: 40rem) and (max-height: 42rem) {
  .hero { padding-top: calc(var(--page-top) + var(--space-4)); }
  .hero .cover { max-width: 6.5rem; }
}

/* The smallest phones (320px): the hero's Play and three round actions still share a
   row, a little closer together. */
@media (max-width: 22.5rem) {
  .hero-actions { gap: .375rem; }
}