/* install.css — the Add-to-Home-Screen wall and the standing warning strip.
   Deliberately warm rather than alarming: it is a children's book, not a bank. */

#installwall{
  position:fixed; inset:0; z-index:400;
  background:rgba(28,24,20,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  font-family:'Nunito',system-ui,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;
}
#installwall .iw-card{
  background:#FFFDF7; border-radius:20px; max-width:430px; width:100%;
  padding:24px 24px 20px; box-shadow:0 24px 60px rgba(0,0,0,.34);
  max-height:92vh; overflow:auto; -webkit-overflow-scrolling:touch;
}
#installwall .iw-k{
  font-size:11.5px; font-weight:800; letter-spacing:.10em; text-transform:uppercase;
  color:#C4622D; margin-bottom:8px;
}
#installwall h2{
  margin:0 0 4px; font-family:'Baloo 2',system-ui,sans-serif;
  font-size:21px; line-height:1.28; color:#2B2621; font-weight:800;
}
#installwall .iw-en{ color:#6B6257; font-size:13.5px; line-height:1.5; margin:0 0 10px; }
#installwall .iw-body{ color:#3D372F; font-size:14px; line-height:1.62; margin:0 0 8px; }
#installwall .iw-body b{ color:#C4622D; }

#installwall .iw-steps{
  margin:14px 0 4px; padding:0 0 0 20px; color:#3D372F;
  font-size:14px; line-height:1.6;
}
#installwall .iw-steps li{ margin-bottom:11px; }
#installwall .iw-steps .iw-en{ font-size:12.5px; margin:2px 0 0; display:block; }
#installwall .iw-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:25px; height:25px; border-radius:7px; vertical-align:-7px;
  background:#E8F0FB; color:#1E6FD9; margin-left:3px;
}

#installwall .iw-row{ display:flex; flex-direction:column; gap:9px; margin-top:16px; }
#installwall button{
  font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer;
  border-radius:12px; padding:12px 16px; border:0; width:100%;
}
#installwall .iw-go{ background:#2E9E5B; color:#fff; }
#installwall .iw-go:active{ background:#26834B; }
#installwall .iw-no{
  background:transparent; color:#7A7065; border:1.5px solid #DED5C4;
  font-weight:600; font-size:13px;
}

#iwstrip{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:#B26A00; color:#fff; font-size:12.5px; line-height:1.45;
  padding:9px 14px; display:flex; gap:10px; align-items:center;
  font-family:'Nunito',system-ui,sans-serif;
  padding-bottom:calc(9px + env(safe-area-inset-bottom));
}
#iwstrip button{
  margin-left:auto; flex:0 0 auto; background:#fff; color:#8A5200; border:0;
  border-radius:8px; padding:6px 12px; font-weight:800; font-size:12px;
  font-family:inherit; cursor:pointer;
}

/* Nothing here is ever part of the book. */
@media print{ #installwall, #iwstrip{ display:none !important; } }

/* ------------------------------------------------------------------ phone
   The book is drawn at a true A5 page: 148mm, about 559px. A phone is 390px.
   Left alone, Safari shows a horizontally-scrolled slab with the toolbar
   running off both edges — which is what the first device test showed.

   So on a narrow screen the whole page is zoomed down to fit. `zoom` is used
   rather than `transform: scale()` because it shrinks the layout box too, so
   the document height stays honest and nothing needs a wrapper hack.
   Print is untouched: paper is still 148mm.                                */
@media screen and (max-width: 640px){
  html, body{ max-width:100%; overflow-x:hidden; }
  body{ min-width:0; }

  .page{
    zoom: var(--fit, 1);
    margin-left:auto; margin-right:auto;
  }

  /* one line, swipeable, nothing stranded off-screen */
  .bar{
    display:flex; flex-wrap:nowrap; gap:6px;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:7px 10px calc(7px + env(safe-area-inset-bottom,0px));
    padding-top:calc(7px + env(safe-area-inset-top,0px));
  }
  .bar::-webkit-scrollbar{ display:none; }
  .bar button, .bar .homelink{
    flex:0 0 auto; white-space:nowrap;
    font-size:12.5px; padding:7px 11px; line-height:1.15;
  }
  .bar .t{ flex:0 0 auto; font-size:12.5px; }
  .bar .sp{ flex:0 0 6px; }
  /* the credit line is desktop chrome; the phone has no room for it */
  .bar > span[style]{ display:none; }

  /* two fixed bars at the bottom would sit on top of each other */
  #iwstrip{ bottom:0; }
  body.has-strip .savebar{ bottom:46px; }
}

@media print{
  .page{ zoom:1 !important; }
}

/* The chapter/page labels are siblings of .page, not children, so the zoom
   above never reached them and they stuck out 559px into a 390px screen.
   Measured, not guessed: _diag.py reported "div.lbl L0 R559".               */
@media screen and (max-width: 640px){
  .lbl{ zoom: var(--fit, 1); }

  /* the status line must be readable, not truncated mid-sentence */
  .savebar{ align-items:flex-start; line-height:1.4; font-size:12px;
            padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)); }
  .savebar .txt{ white-space:normal; }
}
@media print{ .lbl{ zoom:1 !important; } }

/* Everything that lives at the bottom of a phone screen stacks above the
   install warning, using its measured height rather than a guessed offset. */
body.has-strip .savebar{ bottom: var(--strip-h, 0px); }
body.has-strip #tally  { bottom: calc(var(--strip-h, 0px) + 54px); }
body.has-strip .saved  { bottom: calc(var(--strip-h, 0px) + 54px); }
@media print{
  body.has-strip .savebar, body.has-strip #tally{ display:none !important; }
}

.homelink{color:#f4efe4;opacity:.62;text-decoration:none;font-size:12px;font-weight:700;margin-left:10px}
.homelink:hover{opacity:1}
@media print{.homelink{display:none !important}}