/* A mobile pack index: one open card, with the remaining packs as quiet rows. */
.pack-mobile-summary, .pack-mobile-options { display: none; }

@media (max-width: 680px) {
  #packs.packs-outcomes .outcomes-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 42px 12px 14px !important;
    overflow: visible !important;
    border-radius: 22px;
  }
  #packs .outcomes-watermark,
  #packs .outcomes-cross { display: none; }
  #packs .outcomes-counter { top: 14px; right: 18px; font-size: .7rem; }
  #packs.packs-outcomes .outcomes-rail {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
    scroll-snap-type: none;
  }
  #packs.packs-outcomes .pack-rail-card {
    /* scroll-snap-align is a horizontal-rail affordance, and on mobile the rail
       is overflow:visible — so it is not a scroll container and these resolve
       against the document instead. The taste deck puts scroll-snap-type on the
       document, which would then make every pack card a page snap point and
       pull the packs section around as the reader scrolls past it. */
    scroll-snap-align: none !important;
    display: flex !important;
    flex: none !important;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    /* Not !important: the mobile accordion animates height, and an important
       author declaration outranks a web animation, so this one would have
       pinned every card to auto for the whole tween. Nothing sets an inline
       card height on mobile — packs-rail.js only locks heights above 980px —
       so plain `auto` is already enough to undo the desktop rail. */
    height: auto;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 14px !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    box-shadow: inset 0 -1px 0 #0b173418 !important;
    transition: background-color 180ms ease !important;
    overflow: hidden !important;
    clip-path: none !important;
  }
  #packs.packs-outcomes[data-packs-rail] .pack-rail-card.is-dimmed {
    flex: none !important;
    height: auto;
    min-height: 0 !important;
    opacity: 1 !important;
  }
  #packs.packs-outcomes .pack-rail-card::before,
  #packs.packs-outcomes .pack-rail-card::after { display: none !important; }
  #packs.packs-outcomes .pack-rail-card.is-expanded {
    padding-bottom: 16px !important;
    margin-block: 6px;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 0 #fff9, 0 3px 5px #050c1920, 0 14px 22px -16px #0009 !important;
    z-index: 2;
  }
  #packs .pack-rail-card:first-child { border-radius: 14px 14px 0 0 !important; }
  #packs .pack-rail-card:last-child { border-radius: 0 0 14px 14px !important; }
  #packs.packs-outcomes .pack-rail-card.is-expanded { border-radius: 16px !important; }
  #packs .pack-mobile-summary {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 62px;
    padding: 12px 0;
    border: 0;
    background: transparent;
    color: var(--pack-card-ink);
    text-align: left;
    cursor: pointer;
    font: inherit;
    box-shadow: none;
    transform: none;
  }
  #packs .pack-mobile-summary:focus-visible { outline: 2px solid #4977c9; outline-offset: -2px; border-radius: 8px; }
  #packs .pack-mobile-number { font-family: var(--mono); font-size: .55rem; color: var(--pack-card-muted); }
  #packs .pack-mobile-title { font-size: clamp(.85rem, 3.6vw, 1.05rem); font-weight: 600; line-height: 1.25; }
  #packs .pack-mobile-price { font-size: .8rem; font-weight: 600; white-space: nowrap; }
  #packs .pack-rail-card:not(.is-expanded) > :not(.pack-mobile-summary) { display: none !important; }
  #packs .pack-rail-card.is-expanded .pack-rail-card-head { padding: 0 !important; margin-top: -8px; }
  #packs .pack-rail-card-head h3,
  #packs .pack-rail-card-head .pack-rail-card-num { display: none; }
  #packs .pack-rail-card-meta { font-size: .62rem; }
  #packs.packs-outcomes .pack-rail-card.is-expanded .pack-rail-card-visual {
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
    margin: 4px 0 !important;
    overflow: hidden !important;
    border-radius: 10px;
  }
  #packs .pack-rail-card-price,
  #packs .pack-rail-card-blurb,
  #packs .pack-mobile-options { display: none !important; }
  #packs .pack-rail-card:not([data-pack="interactive"]) .pack-rail-card-stats,
  #packs .pack-rail-card:not([data-pack="interactive"]) .pack-rail-card-note { display: none !important; }
  #packs.packs-outcomes .pack-rail-card.is-expanded .pack-rail-card-detail {
    position: static !important;
    display: grid !important;
    padding: 2px 0 0 !important;
    gap: 8px;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #packs.packs-outcomes .pack-rail-card.is-expanded .pack-rail-card-detail[hidden] { display: none !important; }
  #packs.packs-outcomes[data-packs-rail] .pack-rail-card.is-expanded .pack-rail-card-note { display: none; }
  #packs .pack-rail-card[data-pack="interactive"] .pack-rail-card-facts { font-size: .72rem; }
  #packs .pack-rail-card-cta { min-height: 40px !important; }
  #packs .pack-controls { display: grid !important; grid-template-columns: 1fr !important; gap: 6px !important; }
  #packs.packs-outcomes .pack-slider { gap: 2px; }
  #packs.packs-outcomes .pack-slider span { font-size: .52rem; }
  #packs.packs-outcomes .pack-slider strong { font-size: .82rem; }
  #packs.packs-outcomes .pack-slider input[type="range"] { min-height: 22px; }
}