/* "Not enough credits" on a phone (≤ 760 px; linked with that media query, and every rule sits behind it too): a
   full-height bottom sheet, the recommended plan first, the other plans stacked under it (shorter: no "or" lines),
   the packs one sideways row that snaps. The desktop sheet is credits-sheet.css. */
@media (max-width: 760px) {
  html.cs-lock, html.cs-lock body { overflow: hidden; }
  #credsheet { padding: 0; align-items: flex-end; }
  #credsheet .cs-sheet, #credsheet .cs-sheet.cs-n1, #credsheet .cs-sheet.cs-n2, #credsheet .cs-sheet.cs-n3, #credsheet .cs-sheet.cs-n0 {
    width: 100%; height: calc(100dvh - 10px); max-height: none; border-radius: 22px 22px 0 0; border-bottom: 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); gap: 14px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  /* only packs (the top plan's top tier): the sheet is as tall as they are */
  #credsheet .cs-sheet.cs-n0 { height: auto; max-height: calc(100dvh - 10px); }
  #credsheet .cs-x { position: sticky; top: 0; margin: -4px -4px -38px auto; flex: 0 0 auto; }
  .cs-head { padding-right: 44px; gap: 12px; align-items: flex-start; }
  .cs-hl { flex-basis: 100%; }
  .cs-hl .aih { font-size: 30px; }
  .cs-hl .ais { font-size: 13.5px; }
  .cs-cyc { order: 2; }

  /* one column, in this order: the recommended plan, the packs (so both are in reach), then the other plans */
  .cs-cards, .cs-n1 .cs-cards { display: contents; }
  #credsheet .cs-cards > .cs-card { display: flex; order: 3; }
  #credsheet .cs-cards > .cs-card.cs-rec { order: 1; }
  .cs-top, .cs-packnote { order: 2; }
  .cs-foot { order: 4; }
  .cs-top { border-top: 0; padding-top: 2px; }
  .cs-card .pr-sub { min-height: 0; }
  .cs-card .pr-cta { height: 48px; font-size: 15px; }
  /* the others: name, line, credits, price and button; the month's lines stay on the recommended card */
  .cs-card:not(.cs-rec) .cs-out { display: none; }
  .cs-card:not(.cs-rec) .cs-box { padding: 9px 11px; }
  .cs-card:not(.cs-rec) .pr-top .disp { font-size: 26px; }

  .cs-packs { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 10px 16px 4px; scroll-padding-inline: 16px; scrollbar-width: none; }
  .cs-packs::-webkit-scrollbar { display: none; }
  .cs-pack { flex: 0 0 138px; scroll-snap-align: start; }
  .cs-toph { margin-bottom: 2px; }
  .cs-buy { height: 40px; }
  .cs-packgo { max-width: none; width: 100%; height: 48px; }
  .cs-foot { padding-bottom: 6px; }
}