/* pages.responsive.css — a layout for every screen size, for the inner pages
   (gallery, guestbook, sapiens, 404, easter egg, both admin pages, forest).
   Loads LAST, after each page's own <style> block, and only ever ADDS: css/pages.css, the inline page styles and every js file are untouched.
   Delete this file and the site is exactly what it was. (index.html has its own layer: css/desk.responsive.css.)

   Every block is scoped to its own range, so the desktop layout (861px – 1920px wide) is not changed by anything below.

     ≥ 1921px         big monitors, ultrawide, TV: everything scales up, header + footer line up with the column
     861 – 1920px     desktop: exactly as before
     ≤ 860px          tablets in portrait + phones (pages.css's own switch point)
       ≤ 480px          phones: header fits on one line, admin lists wrap
       ≤ 340px          tiny phones / folded foldables
     landscape ≤ 520px tall   phones on their side: gallery viewer fits the screen
     (pointer: coarse)        44px touch targets */


/* ───────────────────────── 0 · safety nets (every size) ─────────────────────────
   body already had overflow-x:hidden, but on a real phone that doesn't stop the page being panned sideways when something
   is wider than the screen. overflow-x:clip on BOTH html and body actually clips it. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }


/* ───────────────────────── 1 · big screens (≥ 1921px) ─────────────────────────
   Everything is in rem, so scaling the root scales the page. The scale follows the 16:9 width the screen can really show
   (a 3440×1440 ultrawide scales like 2560×1440): 1920 → 16px · 2560 → 20px · 3200 → 24px · 3840 → 28px. */
@media (min-width: 1921px) {
    html { font-size: clamp(16px, calc(16px + (min(100vw, 177.78vh) - 1920px) * .00625), 32px); }
    body { font-size: 1.0625rem; }                                   /* the 17px of pages.css, in rem */
    .page, .foot { max-width: 77.5rem; }                             /* 1240px */
    .bar { padding-left: max(2.4rem, calc((100% - 77.5rem) / 2 + 2.4rem)); padding-right: max(2.4rem, calc((100% - 77.5rem) / 2 + 2.4rem)); }
}


/* ───────────────────────── 2 · header (all inner pages) ───────────────────────── */
/* the logo is a 23px-tall link: padding + equal negative margin makes it a 44px target without moving anything */
@media (max-width: 860px), (pointer: coarse) {
    .bar .mark { padding: .8rem .6rem; margin: -.8rem -.6rem; }
}
/* "The desk / Gallery / Guestbook" + logo needs ~366px, phones are 360: before this, "The desk" wrapped onto two lines */
@media (max-width: 480px) {
    .bar { gap: .5rem; padding: .6rem .9rem; }
    .bar-links { gap: 0; }
    .bar-links a { padding: .5rem .5rem; font-size: .86rem; white-space: nowrap; }
    .mark { font-size: 1.35rem; }
}
@media (max-width: 340px) {
    .bar { padding: .6rem .7rem; }
    .bar-links a { padding: .5rem .35rem; font-size: .8rem; }
    .mark { font-size: 1.2rem; }
}
@media (pointer: coarse) {
    .link-hand { padding: .8rem 0; }                                  /* "back to the desk" in every footer */
}


/* ───────────────────────── 3 · admin pages ───────────────────────── */
/* GET /api/guestbook/:id + its label don't fit a phone side by side: let the label drop below instead of clipping at the panel edge */
@media (max-width: 480px) {
    .endpoints li { flex-wrap: wrap; row-gap: .1rem; }
    .endpoints code { min-width: 0; overflow-wrap: anywhere; }
    /* the layout <select> is ~290px wide because of its longest option: full width under its label instead of clipping at 320px */
    .settings select { flex: 1 1 100%; width: 100%; min-width: 0; }
}


/* ───────────────────────── 4 · gallery viewer on a phone lying down ─────────────────────────
   Portrait phones were already fine. In landscape the viewer needs 440px of height on a 390px screen and cut off the caption and
   the "Copy link" button. Here the picture takes the height and the arrows go to the sides. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1000px) {
    .lightbox { padding: .6rem 4.5rem; gap: .4rem; }
    .lightbox-frame { padding: .6rem .6rem 0; }
    .lightbox-img { max-height: calc(100vh - 8rem); max-height: calc(100dvh - 8rem); }
    .lightbox-caption { min-height: 0; padding: .4rem .2rem .5rem; font-size: 1.2rem; }
    .lightbox-close { top: .3rem; right: .8rem; }
    .lightbox-nav { top: 50%; bottom: auto; transform: translateY(-50%); }
    .lightbox-prev { left: .8rem; } .lightbox-next { right: .8rem; }
    .gate { min-height: 0; padding: 1rem 0 2rem; }
}


/* ───────────────────────── 5 · forest ───────────────────────── */
/* the drifting clouds are wider than the screen by design; body clips them, but only now that html has its own overflow rule (see 0) */
body.scene .note { padding: 0 1rem env(safe-area-inset-bottom, 0px); }
@media (orientation: landscape) and (max-height: 520px) {
    body.scene .moon { width: min(500px, 62vw, 70vh); }               /* a 500px moon on a 390px-tall screen */
    body.scene .note { bottom: .4rem; }
}