/* An app's own page (/apps/<slug>/, made from templates/app/ by the app sync). Built from the shared page parts in
   pages.css; only what an app page adds is here. Every word on the page comes from the app's store listing. */

/* the head: the app's icon seated in its own squircle cut (the floor is the app's color, as on the Apps & games list),
   its name beside it, then the listing's short description and the app's status as label tape */
.app-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 clamp(16px, 2.6vw, 36px); }
.app-head__icon {
  grid-column: 1; grid-row: 1; position: relative; display: block;
  width: clamp(64px, 8.4vw, 120px); aspect-ratio: 1; border-radius: 23%;
  background: var(--app-color, var(--foam));
  box-shadow: 0 0 0 var(--space-kerf) var(--kerf), 0 1px 0 var(--space-kerf) var(--lip-a);
}
.app-head__icon img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.app-head h1 { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
.app-head > p { grid-column: 1 / -1; margin-top: var(--space-5); }
.app-head > p.app-head__status { margin-top: var(--space-5); }

/* the screenshots: seated side by side in one tray, sized so all of them (--n, set by the sync) fit the tray's width;
   only when that would make them narrower than 132px does the tray scroll sideways (never the page) */
.shots { margin-bottom: clamp(28px, 3.6vw, 48px); }
.shots__row {
  --gap: clamp(10px, 1.4vw, 18px);
  display: grid; grid-auto-flow: column; gap: var(--gap); justify-content: space-between;
  grid-auto-columns: min(220px, max(132px, calc((100% - (var(--n, 6) - 1) * var(--gap)) / var(--n, 6) - 1px)));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin;
  margin: 0; padding: 0 0 var(--space-2); list-style: none;
  border-radius: var(--radius-lg);
}
.shots__row > li { scroll-snap-align: start; }
.shots__row img {
  display: block; width: 100%; height: auto; border-radius: var(--radius-md);
  background: var(--piece); box-shadow: var(--z-flush), 0 0 0 var(--space-kerf) var(--kerf);
}
@media (max-width: 560px) { .shots__row { grid-auto-columns: 46%; } }

/* the full description on one sheet: the listing's opening paragraphs, then one clause per heading. A clause's
   paragraphs and lists sit in one body beside the heading (so a two-line heading never opens a gap between them),
   spaced exactly as on the site's legal pages */
.sheet__intro { padding-block: 0 clamp(22px, 2.6vw, 34px); }
.sheet__intro p { color: var(--ink); font-size: var(--text-lg); line-height: 1.5; }
.sheet__intro + .clause, .clause + .sheet__end { box-shadow: inset 0 1px 0 var(--kerf), inset 0 2px 0 var(--lip-a); }
.sheet__end { padding-block: clamp(22px, 2.6vw, 34px); }
.sheet__intro, .sheet__end, .clause__body { display: grid; gap: .9em; align-content: start; min-width: 0; }
@media (max-width: 760px) { .sheet__intro, .sheet__end, .clause__body { gap: .6em; } }
.tag--date { max-width: 100%; }

/* the links under the sheet: the app's privacy policy */
.app-links { margin-top: var(--space-6); color: var(--ink-2); }