/* Flyouts opened from the plain pages (layout-page.htm): Articles, and any page that adds class "jd-page" to its flyout's .jd.
   The home layouts get the same result from mobile.css / wti.css (body.is-mobile); the plain pages have no is-mobile, so it is here.
   Phone = 640px and below (the same cut-off as the flyout's own JS).
   A flyout on a plain page: <article class="jd jd-page ..."> with .jd-bar (round X, desktop), .jd-scroll > .jd-head + .jd-body,
   the partials flyout-fab.htm and flyout-foot.htm; behaviour comes from ui/js/flyout.js. */

/* Room under the text for the back-to-top button; no scroll anchoring while the header shrinks */
.jd-page .jd-scroll {
  overflow-anchor: none;
  padding-bottom: 56px;
}

/* Header title: the full title wraps; once the header is shrunk it is one line that scrolls sideways (edge fade and chevron: .hs-* in wizard.css) */
.jd-page .jd-head .hs-bar {
  white-space: normal;
  overflow: visible;
}
.jd-page .jd-head.is-compact .hs-bar {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  text-overflow: clip;
}
.jd-page .jd-head .hs-hint {
  top: 50%;   /* centred on the one-line title (the form-header default sits 5px high) */
  width: 22px;
  height: 22px;
}
.jd-page .jd-head:not(.is-compact) .hs-hint {
  display: none;   /* the chevron's nudge starts afresh each time the header shrinks */
}
.jd-page .jd-head:not(.is-compact) .hs-wrap .hs-bar {
  -webkit-mask-image: none;   /* the edge fade is for the shrunk, one-line title only */
  mask-image: none;
}

/* Phone footer: a centred Close button (desktop keeps the round X at the top) */
.jd-pfoot {
  display: none;
}
@media (max-width: 640px) {
  .jd-page > .jd-bar {
    display: none;
  }
  .jd-page .jd-pfoot {
    flex: none;
    display: flex;
    justify-content: center;
    padding: var(--bar-pad-y) var(--bar-pad-x) calc(var(--bar-pad-y) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: var(--surface);
  }
  .jd-pfoot .jd-foot-close {
    flex: 0 0 auto;
    width: 38%;   /* the same width as the quote wizard's solo Back / Close */
    min-width: 120px;
    min-height: var(--btn-h-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--muted);
    border-radius: var(--btn-radius);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }

  /* Edge to edge: header and text keep a 12px side inset, nothing else */
  .jd-page .jd-scroll {
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
  }
  .jd-page .jd-head,
  .jd-page .jd-head.is-compact {
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 0;
  }
  .jd-page .jd-body {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Header avatar (the round/square badge at the left of the header): it changes size in the layout at once, the header keeps its exact
   space, so the change is shown smoothly by scaling the badge from its old size (52px full, 28px shrunk) to the new one. */
.jd-head .jc-av {
  transform-origin: left center;
}
.jd-head.is-shrink {
  overflow: visible;   /* the badge starts at its full size, taller than the shrunk header */
}
.jd-head.is-shrink .jc-av {
  animation: jd-av-shrink 0.3s ease-out both;
}
.jd-head.is-grow .jc-av {
  animation: jd-av-grow 0.3s ease-out both;
}
@keyframes jd-av-shrink {
  from { transform: scale(1.857); }
  to { transform: scale(1); }
}
@keyframes jd-av-grow {
  from { transform: scale(0.538); }
  to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .jd-head.is-shrink .jc-av,
  .jd-head.is-grow .jc-av { animation: none; }
}