@layer modules {
  /* The body grid gives its one flexible row to main. The banner adds a row
     ahead of it, so the track list has to grow with it — otherwise the banner
     inherits the 1fr and stretches to fill the viewport. */
  body:has(> .subscription-banner) {
    grid-template-rows: auto auto 1fr auto;
  }

  /* A single thin strip across the top of the app. The tone bleeds edge to
     edge; the copy stays in the same column as page content. */
  .subscription-banner {
    background-color: color-mix(
      in srgb,
      var(--banner-tone) 12%,
      var(--color-canvas)
    );
    border-block: 1px solid
      color-mix(in srgb, var(--banner-tone) 30%, transparent);
    inline-size: 100%;
  }

  .subscription-banner__inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--text-x-small);
    gap: var(--inline-space);
    inline-size: calc(100% - (var(--main-padding) * 2));
    justify-content: space-between;
    line-height: 1.4;
    margin-inline: auto;
    max-inline-size: var(--main-width);
    padding: 0.4rem var(--inline-space-double);
    text-align: start;

    /* button_to wraps its button in a form; keep it out of the layout. */
    form {
      display: contents;
    }

    /* The action reads as a link in the run of text rather than as a button,
       which is what otherwise sets the height of the bar. */
    .btn {
      --btn-background: transparent;
      --btn-border-size: 0;
      --btn-color: var(--color-ink);
      --btn-padding: 0;

      font-family: inherit;
      font-size: inherit;
      font-weight: 600;
      letter-spacing: inherit;
      text-decoration: underline;
      text-transform: none;
    }
  }

  .subscription-banner--trialing {
    --banner-tone: var(--color-link);
  }

  .subscription-banner--canceling {
    --banner-tone: var(--color-marker);
  }

  .subscription-banner--canceled,
  .subscription-banner--missing {
    --banner-tone: var(--color-negative);
  }
}