/* =========================================================================
   PostureScreen feature pages (WEB-142 N11): PainScreen pain diagram, video
   capture and annotation, Quick Screen, comparison and trend reports.
   Built by tools/pages/feature-pages.mjs; loaded after pages.css, which
   carries everything else. Only what pages.css has no class for lives here,
   all prefixed .pgf-.
   ========================================================================= */

/* hero stage for an already-framed landscape iPad (assets/img/ipad-squat-annotation.webp) */
.pgf-st-frame { width: min(620px, 100%); aspect-ratio: 620 / 500; }
.pgf-st-frame .pgf-d--frame { left: 0; top: 2%; width: 100%; transform: rotateY(-8deg) rotateX(3deg) rotateZ(-.6deg); }

/* a magnified part of a screenshot: the image is scaled and shifted inside a clipped box (pgCrop() in the module) */
.pgf-crop { position: relative; display: block; width: 100%; overflow: hidden; }
.pgf-crop img { display: block; max-width: none; height: auto; }

/* an iPhone with a magnifying "lens" over the row that matters */
.pgf-lensfig { justify-self: center; width: 100%; }
.pgf-lensdev { position: relative; width: min(290px, 64%); margin-inline: auto; }
.pgf-lens { position: absolute; z-index: 3; display: block; padding: 6px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 128, 178, .28), 0 0 0 7px rgba(38, 188, 215, .14), 0 30px 60px -22px rgba(11, 26, 46, .55); }
.pgf-lens .pgf-crop { border-radius: 12px; }
.pgf-lens--pain { left: -34%; width: 150%; top: 52%; }
.pgf-lens--trend { right: -42%; width: 92%; top: 10%; }
@media (prefers-reduced-motion: no-preference) {
  html.pg-js .pgf-lensfig[data-rv] .pgf-lens { transition: transform .9s var(--ease-out-expo) .35s, opacity .6s var(--ease-out) .35s; }
  html.pg-js .pgf-lensfig[data-rv]:not(.is-in) .pgf-lens { opacity: 0; transform: scale(.92); }
}

/* the annotation tools list (video page) */
.pgf-tools { padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.pgf-tooldl { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.pgf-tooldl div { padding-top: 12px; border-top: 1px solid var(--line); }
.pgf-tooldl dt { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.pgf-tooldl dd { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.pgf-tools .pg-fine { margin-top: 20px; }

/* numbered how-to list (trend page) */
.pgf-steps { margin-top: 24px; display: grid; gap: 14px; counter-reset: pgf; }
.pgf-steps li { position: relative; padding-left: 44px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); counter-increment: pgf; }
.pgf-steps li::before { content: counter(pgf); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 13.5px; font-weight: 700; color: #fff; background: linear-gradient(160deg, #1aa6d6, var(--blue)); box-shadow: 0 4px 10px -4px rgba(0, 128, 178, .7); }
.pgf-steps b { color: var(--ink); font-weight: 600; }
.pgf-steps + .pg-fine { margin-top: 20px; }

/* close band: the cross-links wrap as a centred row */
.pgf-more { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 18px; }

@media (max-width: 900px) {
  .pgf-lensdev { width: min(260px, 62%); }
}
@media (max-width: 560px) {
  .pgf-tooldl { grid-template-columns: minmax(0, 1fr); }
  .pgf-lens--pain { left: -24%; width: 148%; }
  .pgf-lens--trend { right: -30%; width: 84%; }
}

/* one printed report page, tilted like the PostureScreen page's fanned sheets (trend page) */
.pgf-paper { justify-self: center; width: min(430px, 88%); }
.pgf-paper__sheet { position: relative; border-radius: 6px; overflow: hidden; background: #fff; transform: rotate(-2.5deg); box-shadow: 0 0 0 1px rgba(0, 0, 0, .9), 0 2px 4px rgba(11, 26, 46, .08), 0 40px 80px -30px rgba(11, 26, 46, .5); }
.pgf-paper__sheet img { display: block; width: 100%; height: auto; }
.pgf-paper .pg-cap { margin-top: 26px; }

/* Comparison → Posture Trend Analysis® (Joe, Oct 9 Loom "Website Updates and Posture Screen Fixes", 2:41–3:14: "this locks in
   place, it shows this, and then it can show the trend report as well"). Both figures share one grid cell, so the column never
   changes size when they swap; [data-show] (pages.js [data-reports]) picks the one on show. The pin only runs where the whole
   scene fits (two columns, ≥ 901 × 720) and motion is allowed; elsewhere both figures stack and the tabs hide. */
.pgf-stage { display: grid; align-items: center; justify-items: center; gap: clamp(40px, 8vw, 64px); }
.pgf-stage__layer { width: 100%; display: grid; justify-items: center; transition: opacity .55s var(--ease-out), transform .7s var(--ease-out), visibility 0s .7s; }
.pgf-trend { width: min(600px, 100%); }
.pgf-trend .pg-cap { margin-top: 22px; }
.pgf-reports__tabs { display: none; width: fit-content; gap: 4px; margin-top: 26px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px var(--line); }
.pgf-reports__tab { appearance: none; border: 0; margin: 0; padding: 9px 15px; border-radius: 999px; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.1; color: var(--ink-2); cursor: pointer; transition: background .25s, color .25s; }
.pgf-reports__tab:hover { color: var(--ink); }
.pgf-reports__tab[aria-pressed="true"] { background: var(--ink); color: #fff; }
.pgf-reports__tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (min-width: 901px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {
  .pgf-reports { height: calc(100vh - var(--hdr) + 110vh); }       /* the pinned scene + 110vh of scroll for the swap */
  .pgf-reports__pin { position: sticky; top: var(--hdr); min-height: calc(100vh - var(--hdr)); display: grid; align-content: center; }
  .pgf-reports__tabs { display: flex; }
  .pgf-stage { gap: 0; }
  .pgf-stage__layer { grid-area: 1 / 1; }
  [data-show="compare"] .pgf-stage__layer--trend,
  [data-show="trend"] .pgf-stage__layer--compare { opacity: 0; visibility: hidden; pointer-events: none; }
  [data-show="compare"] .pgf-stage__layer--trend { transform: translateY(28px) scale(.96); }
  [data-show="trend"] .pgf-stage__layer--compare { transform: translateY(-28px) scale(.96); }
  [data-show] .pgf-stage__layer { transition-delay: 0s, 0s, 0s; }
  [data-show="compare"] .pgf-stage__layer--trend, [data-show="trend"] .pgf-stage__layer--compare { transition-delay: 0s, 0s, .7s; }
}