/*! WAPI Connect, "Kuwait Time": motion module "pages" styles (M15). Plan: .router/MOTION.md §4.3 F1-F6.
    Heights exist from the first paint (html.w-story is set before it, never with reduced motion), so building the stories
    later never moves the page. Step counts come from the markup itself (:has() quantity selectors), so CSS and
    motion/pages.js always agree:
    - F2 head field (.w-headfield) with 1-5 pins on its main shot (.w-headfield__main, or the first shot of the comp on the
      phone pages), wide screens >= 1021 px and >= 720 px tall: --steps = the pin count; the section gets the scroll room
      after its frame and its .w-wrap is the sticky frame, one screen tall: the lead, actions and checks on top, the shot
      below them sized to the room left (container units, never wider than the screen gives), the foot line last.
    - F4 sequences (.w-seq, .w-steps, .w-steps--list, .w-howto): no track since the clarity rollout (2026-10-31); they
      stay in the flow and pages.js lets each item rise once.
    - inbox-app (feature pages only): the .w-phones stair field (4 phones, the film last) holds 5 steps of the pinned
      phone conversation (MOTION.md H7), at every width.
    A head field or section marked data-calm (an explainer), a head field holding .w-sides or a readable close-up
    (.w-shot--true), and a stair inside a data-calm section get none of this: they stay in the flow, unpinned.
    Phones keep every other section as it is (the light variants). Tokens only, no new colour; logical properties
    (transform-origin is physical by nature, mirrored for RTL). Nothing here applies with reduced motion or without the
    pre-paint class; print gets the plain page. */

/* ---------------------------------------------------------------- F2 · head field: N pins on the main shot */
@media (prefers-reduced-motion: no-preference) and (min-width: 1021px) and (min-height: 720px) {
  html.w-story .w-headfield:where(:not([data-calm]):not(:has(.w-sides, .w-shot--true))):has(:is(.w-headfield__main, .w-headfield__comp > .w-shot:first-child) .w-pin):not(:has(:is(.w-headfield__main, .w-headfield__comp > .w-shot:first-child) .w-pin:nth-of-type(6))) {
    --steps: 1; --p-cap: 44px; padding-block: 0;
  }
  html.w-story .w-headfield:where(:not([data-calm]):not(:has(.w-sides, .w-shot--true))):has(:is(.w-headfield__main, .w-headfield__comp > .w-shot:first-child) .w-pin:nth-of-type(2)):not(:has(:is(.w-headfield__main, .w-headfield__comp > .w-shot:first-child) .w-pin:nth-of-type(6))) { --steps: 2; }
  html.w-story .w-headfield:where(:not([data-calm]):not(:has(.w-sides, .w-shot--true))):has(:is(.w-headfield__main, .w-headfield__comp > .w-shot:first-child) .w-pin:nth-of-type(3)):not(:has(:is(.w-headfield__main, .w-headfield__comp > .w-shot:first-child) .w-pin:nth-of-type(6))) { --steps: 3; }
  html.w-story .w-headfield:where(:not([data-calm]):not(:has(.w-sides, .w-shot--true))):has(:is(.w-headfield__main, .w-headfield__comp > .w-shot:first-child) .w-pin:nth-of-type(4)):not(:has(:is(.w-headfield__main, .w-headfield__comp > .w-shot:first-child) .w-pin:nth-of-type(6))) { --steps: 4; }
  html.w-story .w-headfield:where(:not([data-calm]):not(:has(.w-sides, .w-shot--true))):has(:is(.w-headfield__main, .w-headfield__comp > .w-shot:first-child) .w-pin:nth-of-type(5)):not(:has(:is(.w-headfield__main, .w-headfield__comp > .w-shot:first-child) .w-pin:nth-of-type(6))) { --steps: 5; }

  /* the scroll room of the camera tour, after the frame (the frame sticks over it) */
  html.w-story .w-headfield:where(:not([data-calm]):not(:has(.w-sides, .w-shot--true))):has(:is(.w-headfield__main, .w-headfield__comp > .w-shot:first-child) .w-pin):not(:has(:is(.w-headfield__main, .w-headfield__comp > .w-shot:first-child) .w-pin:nth-of-type(6)))::after {
    content: ""; display: block; block-size: calc(var(--steps) * var(--w-step));
  }
  /* the frame: the whole head field in one screen */
  html.w-story .w-headfield:where(:not([data-calm]):not(:has(.w-sides, .w-shot--true))):has(:is(.w-headfield__main, .w-headfield__comp > .w-shot:first-child) .w-pin):not(:has(:is(.w-headfield__main, .w-headfield__comp > .w-shot:first-child) .w-pin:nth-of-type(6))) > .w-wrap {
    position: sticky; top: 0; block-size: 100svh; box-sizing: border-box;
    display: flex; flex-direction: column; gap: clamp(12px, 2svh, 22px); padding-block: clamp(16px, 3svh, 32px);
  }
  html.w-story .w-headfield:where(:not([data-calm]):not(:has(.w-sides, .w-shot--true))):has(:is(.w-headfield__main, .w-headfield__comp > .w-shot:first-child) .w-pin):not(:has(:is(.w-headfield__main, .w-headfield__comp > .w-shot:first-child) .w-pin:nth-of-type(6))) > .w-wrap > :is(.w-headfield__grid, .w-headfield__foot) {
    flex: none; padding-block: 0; margin-block: 0;
  }
  /* desktop shots: the picture group takes the room left and is the size container of the crop */
  html.w-story .w-headfield:where(:not([data-calm]):not(:has(.w-sides, .w-shot--true))):has(.w-headfield__main .w-pin):not(:has(.w-headfield__main .w-pin:nth-of-type(6))) > .w-wrap > .w-headfield__comp {
    flex: 1 1 0; min-block-size: 0; container-type: size;
  }
  html.w-story .w-headfield:where(:not([data-calm]):not(:has(.w-sides, .w-shot--true))):has(.w-headfield__main .w-pin):not(:has(.w-headfield__main .w-pin:nth-of-type(6))) .w-headfield__comp > .w-headfield__main {
    inline-size: fit-content; max-inline-size: 100%;
  }
  html.w-story .w-headfield:where(:not([data-calm]):not(:has(.w-sides, .w-shot--true))):has(.w-headfield__main .w-pin):not(:has(.w-headfield__main .w-pin:nth-of-type(6))) .w-headfield__comp > .w-headfield__main > .w-shot__crop {
    inline-size: min(100cqi, calc((100cqb - var(--p-cap)) * var(--w) / var(--h)));
  }
  /* phone shots (the comp sits in the grid's second column): the grid takes the room, the phone fits its cell */
  html.w-story .w-headfield:where(:not([data-calm]):not(:has(.w-sides, .w-shot--true))):has(.w-headfield__grid > .w-headfield__comp > .w-shot:first-child .w-pin):not(:has(.w-headfield__comp > .w-shot:first-child .w-pin:nth-of-type(6))) > .w-wrap > .w-headfield__grid {
    flex: 1 1 0; min-block-size: 0; grid-template-rows: minmax(0, 1fr);
  }
  html.w-story .w-headfield:where(:not([data-calm]):not(:has(.w-sides, .w-shot--true))):has(.w-headfield__grid > .w-headfield__comp > .w-shot:first-child .w-pin):not(:has(.w-headfield__comp > .w-shot:first-child .w-pin:nth-of-type(6))) .w-headfield__grid > .w-headfield__comp {
    align-self: stretch; min-block-size: 0; container-type: size;
  }
  html.w-story .w-headfield:where(:not([data-calm]):not(:has(.w-sides, .w-shot--true))):has(.w-headfield__grid > .w-headfield__comp > .w-shot:first-child .w-pin):not(:has(.w-headfield__comp > .w-shot:first-child .w-pin:nth-of-type(6))) .w-headfield__comp > .w-shot--phone:first-child {
    inline-size: fit-content; max-inline-size: 100%; margin-inline: auto;
  }
  html.w-story .w-headfield:where(:not([data-calm]):not(:has(.w-sides, .w-shot--true))):has(.w-headfield__grid > .w-headfield__comp > .w-shot:first-child .w-pin):not(:has(.w-headfield__comp > .w-shot:first-child .w-pin:nth-of-type(6))) .w-headfield__comp > .w-shot--phone:first-child .w-shot__crop {
    inline-size: min(calc(100cqi - 16px), calc((100cqb - 16px - var(--p-cap)) * var(--w) / var(--h)));
  }
}

/* ---------------------------------------------------------------- F4 · sequences: no track (clarity rollout 2026-10-31)
   Steps, sequences and how-tos stay in the flow at every width; pages.js only lets each item rise once. No height is
   added and no frame sticks, so nothing here. */

/* ---------------------------------------------------------------- inbox-app · the pinned phone conversation (H7) */
@media (prefers-reduced-motion: no-preference) {
  html.w-story .wapi-sec-features .w-stairfield:where(:not([data-calm], [data-calm] *)):has(.w-phones > li:nth-child(4):last-child > .w-film) { --steps: 5; padding-block: 0; }
  html.w-story .wapi-sec-features .w-stairfield:where(:not([data-calm], [data-calm] *)):has(.w-phones > li:nth-child(4):last-child > .w-film)::after {
    content: ""; display: block; block-size: calc(var(--steps) * var(--w-step));
  }
  html.w-story .wapi-sec-features .w-stairfield:where(:not([data-calm], [data-calm] *)):has(.w-phones > li:nth-child(4):last-child > .w-film) > .w-wrap {
    position: sticky; top: 0; block-size: auto; min-block-size: 100svh; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center; padding-block: 16px;
  }
  /* the pinned phone and the screens pages.js shows in it (aria-hidden clones of the stair's own screens) */
  .w-pfig { transform-origin: 0 0; z-index: 3; }
  .w-pfig .w-shot__crop > .w-shot__crop { position: absolute; inset: 0; aspect-ratio: auto; }
  .w-pfig .w-film__toggle { scale: calc(1 / var(--w-p-s, 1)); transform-origin: 0 100%; }
  :root[dir="rtl"] .w-pfig .w-film__toggle { transform-origin: 100% 100%; }

  /* progress lines: through the middle of a sequence's bars (14 px), along the how-to numbers (36 px) */
  html.w-gsap .w-seq > .w-line--x { inset-block-start: 6px; }
  html.w-gsap .w-howto > .w-line--y { inset-inline-start: 17px; }
  /* a head field whose panel slides in from beyond the inline end: never a sideways page overflow */
  html.w-gsap .w-headfield[data-w-track] { overflow-x: clip; }
  /* compositor layers only while a frame is on screen (ScrollTrigger toggles .is-active) */
  .w-headfield.is-active .w-cam,
  [data-w-track].is-active :is(.w-pfig, .w-phones > li > .w-phone, .w-phones > li > p) { will-change: transform; }
}

/* Print: the plain page */
@media print {
  html.w-story .w-headfield, html.w-story .w-section, html.w-story .w-stairfield { block-size: auto !important; }
  html.w-story .w-headfield::after, html.w-story .w-section::after, html.w-story .w-stairfield::after { content: none !important; }
  html.w-story :is(.w-headfield, .w-section, .w-stairfield) > .w-wrap { position: static !important; block-size: auto !important; min-block-size: 0 !important; transform: none !important; }
  .w-pfig, .w-phones > li > *, .w-seq > li, .w-steps > li, .w-howto > li, .w-sample li > *, .w-grid > *, .w-faq > details, .w-cta,
  .w-split__media > *, .w-points > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}