/* /app picker page. Loads after styles.css and pages.css and reuses their tokens, paper card, tags and footer. */

.picker-sky {
  /* the meadow is as wide as the window, at least --land-min, and its height follows from the art (2400 x 523) */
  --land-w: max(100vw, var(--land-min, 1100px));
  --land-h: calc(var(--land-w) * 523 / 2400);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;   /* card and meadow fill the first screen; the footer waits below */
  margin-top: calc(var(--nav-h) * -1);
  padding: calc(var(--nav-h) + clamp(84px, 11vw, 120px)) var(--gutter) 0;
  background: linear-gradient(180deg, var(--sky) 0, #EEF3EF 60%, #F1F2E6 100%);
}
/* the card stands in the middle of the space above the meadow */
.picker-sky .picker { flex: none; margin-block: auto 0; width: 100%; }

/* the meadow: behind the card, its hills rising past the card's foot, so the card stands in the grass */
.picker-land {
  position: relative; z-index: 0; flex: none;
  height: var(--land-h);
  --overlap: .42;   /* how much of the meadow rises behind the card */
  margin: calc(var(--land-h) * var(--overlap) * -1) calc(var(--gutter) * -1) 0;
  pointer-events: none;
}
.picker-land__img {
  position: absolute; left: 50%; bottom: 0;
  width: var(--land-w); max-width: none; height: auto;
  transform: translateX(-50%);
}
.picker-sky .picker { z-index: 1; }
.picker-sky .cloud { position: absolute; height: auto; pointer-events: none; opacity: .9; }
.picker-sky .cloud--a { width: clamp(120px, 15vw, 210px); left: -3%; top: 44%; }
.picker-sky .cloud--b { width: clamp(90px, 11vw, 150px); right: 5%; top: calc(var(--nav-h) + 6px); }

.picker { position: relative; max-width: 860px; margin: 0 auto; }
.picker__card { isolation: isolate; display: grid; gap: 28px; text-align: center; }
.picker__main { display: grid; justify-items: center; }

/* friends: the giraffe peeks over the top edge from behind; the monkey sits on it */
.picker__giraffe { position: absolute; z-index: -1; right: clamp(18px, 7%, 64px); top: -86px; width: 74px; height: auto; }
.picker__monkey { position: absolute; z-index: 2; left: clamp(14px, 5%, 44px); top: -60px; width: 70px; height: auto; }

.picker__id { display: grid; justify-items: center; gap: 14px; }
.picker__icon { width: 88px; height: 88px; border-radius: 22px; box-shadow: 0 0 0 3px var(--cream), 0 0 0 5px var(--line), var(--shadow-card); }
.picker__name {
  margin: 0; font-family: var(--serif); font-weight: 800; color: var(--ink-strong);
  font-size: clamp(28px, 4.2vw, 40px); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance;
}
.picker__line {
  margin: 14px auto 0; max-width: 30em;
  font-family: var(--serif); font-style: italic; font-size: clamp(17px, 1.8vw, 19px); line-height: 1.5; color: var(--ink); text-wrap: pretty;
}
.picker__sign { display: block; margin-top: 6px; font-family: var(--serif); font-style: italic; font-weight: 800; font-size: 16px; line-height: 1.2; color: var(--sage-ink); }
.picker__sign::before { content: "— "; }

/* the badges sit in a paper slot of ours, used as published */
.picker__badges {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: 24px; padding: 14px 16px;
  border-radius: var(--r-md); background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--line);
}
.picker__badge { display: block; border-radius: 9px; transition: transform .28s var(--spring); }
.picker__badge img { height: 52px; width: auto; }
.picker__badge:hover { transform: translateY(-2px); }
.picker__badge:active { transform: translateY(1px) scale(.98); transition-duration: .08s; }

/* the price: the same plain centered line as on the home page */
.picker__price { margin: 14px 0 0; color: var(--ink); font-weight: 500; font-size: 14px; line-height: 1.45; text-align: center; text-wrap: balance; }
.picker__price .nw { white-space: nowrap; }
.picker__tags { justify-content: center; margin-top: 18px; max-width: 480px; margin-inline: auto; }   /* rows of 1-2-2 or 3-2, never one tag left alone at the end */

/* no "Get the app" button on the get-the-app page, so the menu button takes its place at the right */
@media (max-width: 900px) {
  .nav__menu { margin-left: auto; }
}

/* QR: wide screens only, on a taped note */
.picker__qr { display: none; }

.picker__home {
  /* a little cream sign standing in the grass, under the card */
  position: absolute; left: 50%; top: calc(var(--land-h) * var(--overlap) + 14px); transform: translateX(-50%) rotate(-1.5deg);
  display: flex; align-items: center; justify-content: center; gap: 6px; width: max-content; max-width: calc(100% - 2 * var(--gutter));
  padding: 10px 18px; border-radius: 999px; pointer-events: auto;
  background: var(--cream); box-shadow: 0 0 0 2px var(--line), 0 4px 0 2px rgba(120, 140, 90, .45), 0 10px 18px -8px rgba(40, 60, 30, .45);
  color: var(--coral-btn); font-weight: 600; font-size: 16px; text-decoration: none;
}
.picker__home svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--spring); }
.picker__home:hover { text-decoration: underline; text-underline-offset: 4px; }
.picker__home:hover svg { transform: translateX(-3px); }

@media (min-width: 900px) and (hover: hover) {
  .picker__card { grid-template-columns: 1fr auto; align-items: center; gap: 40px; text-align: left; }
  .picker__main { justify-items: start; }
  .picker__id { grid-template-columns: auto 1fr; align-items: center; justify-items: start; gap: 18px; }
  .picker__line { margin-left: 0; }
  .picker__badges { justify-content: flex-start; }
  .picker__tags { justify-content: flex-start; }
  .picker__giraffe { width: 92px; top: -108px; }
  .picker__monkey { width: 84px; top: -72px; }

  .picker__qr {
    position: relative; display: grid; justify-items: center; gap: 10px; margin: 0;
    padding: 20px 20px 16px; width: 188px;
    background: #fff; border-radius: 14px; box-shadow: 0 0 0 2px var(--line), var(--shadow-card);
    transform: rotate(1.5deg);
  }
  .picker__qr img { width: 148px; height: 148px; }
  .picker__qr figcaption { font-size: 14px; line-height: 1.35; text-align: center; color: var(--ink-soft); }
  .picker__qr-tape { position: absolute; top: -13px; left: 50%; width: 92px; height: 28px; margin-left: -46px; background: rgba(238, 216, 198, .92) var(--grain); box-shadow: 0 2px 4px -2px rgba(74, 50, 38, .3); transform: rotate(-4deg); }
}

/* phones: the two official badges stay one matched pair, side by side at one height.
   The height scales with the slot so both always fit (App Store 3:1 + Google Play 3.375:1 = 6.375 heights wide, plus the gap). */
@media (max-width: 720px) {
  .picker__badges { width: 100%; container-type: inline-size; flex-wrap: nowrap; gap: 8px; padding: 12px 10px; }
  .picker__badge img { height: min(48px, calc((100cqw - 8px) / 6.375)); }
}

@media (prefers-reduced-motion: reduce) {
  .picker__badge, .picker__home svg { transition: none; }
  .picker__badge:hover, .picker__badge:active, .picker__home:hover svg { transform: none; }
}

/* pages.css styles .paper p / ul / li for long legal text; undo that here */
.paper .picker__line { margin: 14px auto 0; font-size: clamp(17px, 1.8vw, 19px); line-height: 1.5; }
.paper .picker__price { margin: 14px auto 0; font-size: 14px; line-height: 1.45; }
.paper .picker__tags { padding-left: 0; margin: 18px auto 0; }
.paper .picker__tags li { margin: 0; font-size: 15px; line-height: 1.4; }

@media (max-width: 720px) {
  .picker-sky { --land-min: 860px; }
  .picker-land { --overlap: .3; }
  /* room above the card so the giraffe's head clears the nav bar, and set in from the menu button */
  .picker-sky { padding-top: calc(var(--nav-h) + 100px); }
  .picker__giraffe { right: 24%; top: -84px; width: 70px; }
  .picker__card { padding-top: 30px; padding-bottom: 30px; }
  .picker__icon { width: 72px; height: 72px; border-radius: 18px; }
  .picker__id { gap: 10px; }
  .paper .picker__line { margin-top: 10px; font-size: 16.5px; }
  .picker__badges { margin-top: 18px; }
}

@media (min-width: 900px) and (hover: hover) {
  .paper .picker__line { margin: 16px 0 0; }
  .paper .picker__price { margin-left: 0; text-align: left; }
  .paper .picker__tags { margin-left: 0; }
}