/* ===== Edition system — mobile (≤1024px) =====
   Pairs with /assets/css/edition.acaaa9ad.css.

   The system was built as a desktop concept, so every component rule sits in a
   min-width:1025px block. That was right for hover tiers, plate sizes and
   sticky behaviour — and wrong for everything else, because it meant a phone
   rendered the pre-edition site: soft blurred elevation, pill badges, an
   unstyled audio transport running off the side of the screen.

   This restates the hardware for a narrow screen rather than shrinking the
   desktop rules. Three things are deliberately different here:

     - Casts are shorter (the token override in edition.css). A long throw eats
       space a phone does not have.
     - There are no hover tiers. Hover on a touch screen is a state you get
       stuck in after tapping, so plates are given their rest state only, and
       :active is used where feedback is genuinely useful.
     - Nothing sets a fixed width. Every rule here is colour, border, radius,
       shadow or type, so the existing responsive layout is left alone.

   Desktop is untouched: this file only ever applies below 1025px. */
@media (max-width: 1024px) {
  /* ---------- 1 · Sheets ----------
     One hairline and one short cast, so a card reads as a plate on the page
     rather than a soft floating box. */
  #news-new-release-content,
  .highlight-card,
  .composition-top-frame,
  .program-notes-column,
  .videos-column,
  .results .card,
  .collections-card,
  .expanded-item,
  .related-composition-card {
    border-radius: 10px !important;
    box-shadow: 0 0 0 1px var(--ee-edge), var(--ee-lift-md) !important;
  }

  /* ---------- 2 · Cover plates ----------
     The artwork is the page's main object at this size, so it keeps its edge
     and a cast — but the cast goes on the wrapper, never the image, for the
     same reason as on desktop: the image is positioned and would slide out
     from under anything layered over it. */
  #catalog-new-releases-host .composition-image,
  #catalog-new-releases-host .nr-thumb {
    border-radius: 10px !important;
    box-shadow: 0 0 0 1.5px rgba(2, 6, 23, 0.45), var(--ee-lift-sm) !important;
  }
  #catalog-new-releases-host .composition-image img,
  #catalog-new-releases-host .nr-thumb img {
    border-radius: 9px !important;
    box-shadow: none !important;
  }

  /* Selection is carried in the work's own colour, exactly as on desktop.
     Ink is the fallback for works with no cover art. */
  #catalog-new-releases-host .nr-thumb.active {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--ee-ink) !important;
  }
  #catalog-new-releases-host .nr-thumb.active.has-chroma {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px hsl(var(--work-accent)) !important;
  }

  /* ---------- 3 · Buttons ----------
     White plates with an ink edge. Buy Now is handled in edition.css, since it
     is brand rather than layout and applies at every width. */
  .learn-more-btn,
  .view-score-btn,
  .layout-nav-btn.frosted-btn,
  .cover-overlay-pill.frosted-btn,
  .composition-links-container button,
  .accordion-toggle {
    background-image: none !important;
    background-color: #ffffff !important;
    color: var(--ee-ink) !important;
    border: 1px solid rgba(2, 6, 23, 0.45) !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    box-shadow: var(--ee-lift-sm) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Touch feedback belongs on :active, not :hover — a phone leaves :hover stuck
     on the last thing tapped. */
  .learn-more-btn:active,
  .view-score-btn:active,
  .layout-nav-btn.frosted-btn:active,
  .accordion-toggle:active {
    transform: translate(1px, 1px);
    box-shadow: none !important;
  }

  /* ---------- 4 · Stamps and chips ----------
     Small caps pressed into the page, not glowing pills. */
  .meta-badge,
  .composition-type-chip,
  .type-chip,
  .chip,
  .tag {
    border-radius: 4px !important;
    box-shadow: none !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }

  /* ---------- 5 · The audio transport ----------
     Paint only. An earlier pass here set flex-wrap, order and heights, which
     laid the control out a second time on top of a layout that already existed
     — and produced a 195px-tall transport on a 390px screen. Laying out a
     component someone else has already laid out is how the desktop and mobile
     designs drifted apart in the first place, so this file no longer does it.

     What is left is the surface: the plate it sits on and the edges of its
     controls, in the same vocabulary as every other control. Size, wrapping and
     order stay with the layout that owns them. */
  .ee-transport {
    border-radius: 10px !important;
    border: 1px solid rgba(2, 6, 23, 0.28) !important;
    background: #ffffff !important;
    box-shadow: var(--ee-lift-sm) !important;
  }
  .ee-transport .ee-tp-btn {
    border: 1px solid rgba(2, 6, 23, 0.45) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: var(--ee-lift-sm) !important;
  }
  .ee-transport .ee-tp-clock {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }

  /* ---------- 6 · Composition page ----------
     Same corrections as the desktop conversion: the title was a blue gradient
     clipped to the glyphs with a transparent fill, so setting colour alone did
     nothing. */
  .composition-title {
    background-image: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--gray-950, var(--ee-ink)) !important;
    text-shadow: none !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
  }
  /* Glyphs on the section buttons, in the work's colour, as on desktop. */
  .layout-nav-btn.frosted-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
  }
  .layout-nav-btn.frosted-btn::before {
    background-color: color-mix(
      in oklab,
      hsl(var(--field-accent, 221 39% 13%)) 70%,
      var(--ee-ink)
    ) !important;
    width: 0.95em;
    height: 0.95em;
  }

  /* ---------- 7 · Filter panel ----------
     The glass was 22% opaque, so results scrolling underneath ghosted through
     it. Same correction as desktop: a real surface. */
  #catalog-filters .filter-panel,
  #catalog-filters .filter-content,
  #catalog-filters .filter-controls {
    background-color: rgba(16, 41, 54, 0.82) !important;
  }
  #catalog-filters .button-group button,
  #catalog-filters .btn.u-btn,
  #catalog-filters .u-btn--pill {
    border-radius: 8px !important;
    font-weight: 700 !important;
  }
  #catalog-filters .button-group button.active {
    box-shadow: 2px 2px 0 hsl(var(--field-accent, 221 39% 13%) / 0.55) !important;
  }

  /* ---------- 8 · Typography ----------
     Values are data and read as data, the same as the desktop table. */
  .composition-duration,
  .composition-year,
  .meta-value,
  .ee-tp-now,
  .ee-tp-dur,
  .ee-tp-rem {
    font-variant-numeric: tabular-nums;
  }
}