/* enhancement.css — small additions for the clean-JS interaction layer. */

/* Lock horizontal scroll: the App Store layout has 2px of overflow from the
 * nav margins + carousel shelves on mobile. The real site clips it; we do the
 * same so the page never scrolls sideways on touch devices. Carousel shelves
 * keep their own overflow-x:scroll internally. */
html, body { overflow-x: hidden; max-width: 100vw; }
body { position: relative; }

/* "More / Show Less" toggle on the description block */
.ps-more-toggle {
  display: inline-block;
  margin-top: 8px;
  background: none; border: 0; padding: 4px 0;
  color: var(--systemBlue, #0070f3);
  font: var(--body, 400 15px/1.4 "SF Pro", -apple-system, sans-serif);
  cursor: pointer;
  text-decoration: none;
}
.ps-more-toggle:hover { text-decoration: underline; }

/* version-history / what's-new modal body */
.ps-modal-body {
  padding: 0 30px 30px;
  color: var(--systemPrimary, #000);
  font: var(--body, 400 17px/1.45 "SF Pro", -apple-system, sans-serif);
  white-space: pre-wrap;
  overflow-y: auto;
}
.ps-modal-body { padding-inline-start: 20px; padding-inline-end: 20px; }

/* ============ HYBRID NAV (mobile hamburger) ============
 * The Svelte JS renders a different <nav> at ≤483px (menuicon + collapsible
 * menu). We stripped that JS, so we ship BOTH navs and CSS-toggle them.
 * Breakpoint matches the App Store CSS: ≤483px = mobile, ≥484px = desktop. */
.ps-nav-mobile { display: none !important; }
@media (max-width: 483px) {
  .ps-nav-mobile { display: block !important; }
  .ps-nav-desktop { display: none !important; }
}
/* mobile menu: collapsed by default, expands when .ps-nav-open is toggled
 * (enhancement.js wires the menuicon click). The bundle CSS animates the
 * menuicon bread lines into an X via [aria-expanded=true]. */
.ps-nav-mobile .navigation__content.svelte-183u7gg {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s cubic-bezier(.04, .04, .12, .96);
}
.ps-nav-mobile.ps-nav-open .navigation__content.svelte-183u7gg {
  max-height: calc(100vh - 56px);
}
/* the mobile menu list sits in a scrollable container; let it scroll */
.ps-nav-mobile .navigation__scrollable-container.svelte-183u7gg {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* menuicon is a button — reset + pointer */
.ps-nav-mobile .menuicon.svelte-1noilih {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ps-nav-mobile .navigation__content.svelte-183u7gg { transition: none; }
}

/* share toast (continued) */
.ps-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px);
  background: rgba(0, 0, 0, .82); color: #fff;
  padding: 10px 18px; border-radius: 12px;
  font: 400 14px/1.2 "SF Pro", -apple-system, sans-serif;
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
  z-index: 200000; pointer-events: none;
}
.ps-toast.ps-show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .ps-toast { transition: none; } }