/* The player page: what plays on Spotify, its cover beside it when there
   is room, and the grade form. */

@layer components {
  .now-playing {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-6);
    align-items: flex-start;
    padding: var(--space-4);
    border: 3px solid var(--color-text);
    border-radius: var(--radius-card);
  }

  .now-playing__cover {
    flex: 0 0 auto;
    inline-size: min(12.5rem, 100%);
    block-size: auto;
    border-radius: var(--radius-control);
  }

  .now-playing__body {
    flex: 1 1 18rem;
    min-inline-size: 0;

    > :first-child {
      margin-block-start: 0;
    }
  }

  .now-playing__state {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  .now-playing__title {
    margin-block: var(--space-1) var(--space-2);
    overflow-wrap: anywhere;
  }

  /* Grading is the page's main action: a labelled grade and its button
     side by side, wrapping on narrow screens. */
  .now-playing__grade {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
    margin-block-start: var(--space-4);
  }

  .now-playing__grade-input {
    inline-size: auto;
    min-inline-size: 8rem;
    min-block-size: 2.75rem;
    padding-inline: var(--space-2);
    font: inherit;
  }
}