/* anp-stable.css (perffix, Oct 19): keeps app pages still while they fill in.
   Bug hunt S1, S2, S4, S6: the content area started nearly empty, so the footer showed near the top and then
   dropped away when the page drew (layout shift up to 1.07; good is under 0.1). Only layout reservations live
   here: no colours, no fonts, no motion. Linked from the app pages that showed the jump. */

/* 1. The content area holds a full screen from the first paint, so the footer starts below the fold and stays
      there. flow-root keeps the loading card's top margin inside the area, so the area itself never moves when
      the loading card is swapped for the page. */
#app[role="main"], main#app {
  display: flow-root;
  min-height: calc(100vh - 71px);
  min-height: calc(100svh - 71px);
}

/* 2. Family home, before anp-appbar.js takes the bar over: the three in-page links (Home, Weekly report, Settings)
      wrapped to a second row on a phone (bar 123px tall, then 71px once the app bar arrived). Keep them on one row
      so the bar is the same height before and after. */
@media (max-width: 440px) {
  body > nav:not(.anp-appbar) > .r { flex-wrap: nowrap; column-gap: 6px; padding-left: 12px; padding-right: 12px; overflow-x: auto; }
  body > nav:not(.anp-appbar) > .r > a.menu { margin-left: 0; white-space: nowrap; flex: none; }
  body > nav:not(.anp-appbar) > .r > .brand { flex: none; }
}
@media (max-width: 380px) {
  body > nav:not(.anp-appbar) > .r > a.menu { font-size: 14px; }
}

/* 3. Family home world picture (home-world.js): on a phone the picture always fills the frame's width, so the frame
      takes that width and a 3:2 box from the start; the picture's own shape takes over once it loads (all world
      art is 3:2 to 16:9, so what sits below moves a few pixels at most). Shown whole: object-fit stays contain. */
@media (max-width: 599.98px) {
  html body #app .hw-hero .hw-art-frame { width: calc(100% - 28px); }
  html body #app .hw-hero .hw-art-frame .hw-hero-img { width: 100% !important; height: auto !important; aspect-ratio: auto 3 / 2; }   /* !important: home.html's own rule sets width:auto!important */
}

/* 4. Story night start (session.js night band, the nb-band rules in session.html): same reservation for tonight's
      world picture, so the friend's greeting and the night card below it do not drop when the picture arrives.
      Phones only: there the picture always fills the mat's width (on wider screens its height rule decides). */
@media (max-width: 599.98px) {
  html body .w-band.nb-band .w-band-frame .w-band-img { width: 100% !important; height: auto !important; aspect-ratio: auto 3 / 2; }
}

/* 5. Wider screens: there both pictures are sized by their height (family home: the smaller of 38% of the window and
      340px; story night: 360px), so that height is set from the start and the width follows the picture's shape. */
@media (min-width: 640px) {
  html body #app .hw-hero .hw-art-frame .hw-hero-img { height: min(38vh, 340px) !important; width: auto !important; aspect-ratio: auto 3 / 2; }
}
@media (min-width: 600px) {
  html body .w-band.nb-band .w-band-frame .w-band-img { height: 360px !important; width: auto !important; aspect-ratio: auto 3 / 2; }
}

/* 6. The reading check's story picture (placement.html, pass-setup.css and pass-beauty.css size it): up to a computer
      width it is 180px tall whatever its shape, so that height is held from the start and the card below never
      drops when the picture arrives (bug hunt S4, 0.17 of the jump). Width follows the picture; shown whole. */
@media (max-width: 1023px) {
  html body #app > .pl-start-art .pl-sa-bg { height: 180px; width: auto; aspect-ratio: auto 2 / 3; }
}