/* ---------------------------------------------------------------------------
   little-book.css — the read-aloud picture book for the youngest children.
   Built by little-book.js from the BOOK a page declares. One big picture, a
   few words, a "read to me" voice, turn the page by tap, swipe or arrow.

   The pictures are Ted's own art (art/n/*.png) on its white chip — see
   art.css for why the chip is never dropped.
--------------------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:#000;color:#111;
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
}
.lb{
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  max-width:1100px;margin:0 auto;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
}

/* the strip across the top */
.lb-top{display:flex;align-items:center;gap:10px;color:#fff;min-height:44px}
.lb-top a,.lb-top button{
  color:#fff;background:transparent;border:2px solid #fff;border-radius:999px;
  padding:8px 14px;font:bold 15px/1 inherit;font-family:inherit;text-decoration:none;cursor:pointer;
  white-space:nowrap;
}
.lb-top .lb-name{flex:1;text-align:center;font-weight:bold;font-size:16px;opacity:.85;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-top button.on{background:#fff;color:#000}

/* the page itself: white, like the printed card the art came from */
.lb-stage{flex:1;min-height:0;position:relative;margin:8px 0;touch-action:pan-y}
.lb-page{
  position:absolute;inset:0;
  background:#fff;border-radius:22px;
  display:flex;flex-direction:column;align-items:center;
  padding:16px 14px 14px;
  overflow:hidden;
  box-shadow:0 6px 30px rgba(255,255,255,.08);
}
.lb-page.night{background:#13204a;color:#fff}
.lb-page.in-next{animation:lbInNext .32s ease-out}
.lb-page.in-back{animation:lbInBack .32s ease-out}
@keyframes lbInNext{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes lbInBack{from{transform:translateX(-40px);opacity:0}to{transform:none;opacity:1}}

.lb-pic{
  flex:1;min-height:0;width:100%;
  display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vw,18px);
}
.lb-pic .cmm-chip{
  flex:0 0 auto;
  padding:clamp(8px,1.6vw,16px);
  border-radius:20px;
}
.lb-pic .cmm-chip img{width:auto;max-width:none;max-height:none} /* height set by little-book.js to fit */
/* zero: the white card with nothing on it, and the numeral below like the rest */
.lb-pic .cmm-chip.zero{display:flex;flex-direction:column;justify-content:flex-end;
  font:clamp(30px,8vh,80px)/1 Arial,sans-serif;color:#000}
.lb-pic.two{flex-direction:column}
.lb-row{display:flex;align-items:center;justify-content:center;gap:clamp(6px,2vw,18px)}
.lb-sym{font-size:clamp(30px,min(9vh,11vw),90px);line-height:1;flex:0 0 auto;color:#333;font-weight:bold}
.night .lb-sym{color:#fff}

.lb-words{
  flex:0 0 auto;max-width:900px;
  text-align:center;font-weight:bold;
  font-size:clamp(22px,4.6vh,40px);line-height:1.3;
  padding:12px 10px 4px;border-radius:14px;cursor:pointer;
}
.lb-words.saying{background:rgba(255,242,0,.28)}
.night .lb-words.saying{background:rgba(255,255,255,.14)}
/* a number word carries its own color as a thick underline */
.lb-n{text-decoration:underline;text-decoration-thickness:.16em;text-underline-offset:.16em}

/* the cover and the end */
.lb-title{font-size:clamp(30px,6.5vh,60px);font-weight:bold;text-align:center;margin:0 0 4px;line-height:1.1}
.lb-sub{font-size:clamp(16px,2.6vh,22px);text-align:center;opacity:.75;margin:0 0 6px}
.lb-go{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding:10px 0 4px}
.lb-go button,.lb-go a{
  font:bold clamp(18px,3vh,24px)/1 inherit;font-family:inherit;
  padding:14px 22px;border-radius:999px;border:3px solid #111;background:#fff;color:#111;
  cursor:pointer;text-decoration:none;
}
.lb-go .big{background:#111;color:#fff}
.night .lb-go button,.night .lb-go a{border-color:#fff;background:transparent;color:#fff}
.night .lb-go .big{background:#fff;color:#13204a}

/* the bar underneath */
.lb-bar{display:flex;align-items:center;gap:10px;padding-right:50px} /* room for the site's mute button, bottom-right */
.lb-bar button{
  width:64px;height:56px;border-radius:16px;border:2px solid #fff;background:#111;color:#fff;
  font-size:28px;cursor:pointer;flex:0 0 auto;
}
.lb-bar button:disabled{opacity:.25}
.lb-dots{flex:1;display:flex;justify-content:center;gap:5px;flex-wrap:wrap}
.lb-dots i{width:9px;height:9px;border-radius:50%;background:#555;display:block}
.lb-dots i.on{background:#fff}

@media (max-width:560px){
  .lb-top .lb-name{display:none}
  .lb-top a,.lb-top button{padding:8px 10px;font-size:14px}
  .lb-top{justify-content:space-between}
  .lb-page{padding:12px 8px 10px}
}

/* a clock face is a chip like the art; its svg is sized by little-book.js */
.lb-clock svg{display:block}
.lb-go a.big{background:#111;color:#fff}

/* ---- print: the whole book, one page per sheet, on white ----
   little-book.js builds #lb-print when Print is pressed (or on beforeprint). */
#lb-print{display:none}
@media print{
  @page{margin:12mm}
  html,body{height:auto;overflow:visible;background:#fff !important;color:#000}
  body > *:not(#lb-print){display:none !important}
  #lb-print{display:block}
  .lb-sheet{
    break-after:page;page-break-after:always;break-inside:avoid;
    height:245mm;            /* fits Letter and A4 inside the margins */
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8mm;
    text-align:center;font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;
  }
  .lb-sheet:last-child{break-after:auto;page-break-after:auto}
  .lb-sheet h1{font-size:40pt;margin:0}
  .lb-sheet .lb-pic{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:16px}
  .lb-sheet .cmm-chip{padding:10px;border:1px solid #ccc;border-radius:18px;background:#fff}
  .lb-sheet .lb-sym{font-size:48pt;color:#000}
  .lb-pwords{font-size:28pt;font-weight:bold;line-height:1.3;max-width:170mm}
  .lb-psub{font-size:15pt;margin:0;color:#333}
  .lb-sheet{position:relative}
  .lb-sheet footer{position:absolute;left:0;right:0;bottom:0;font-size:9pt;color:#777}
  .lb-n{text-decoration:underline;text-decoration-thickness:.16em;text-underline-offset:.16em;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .lb-sheet img{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}