/* Book card (.db-book-card): the app's book detail screen (build_app.py #book, .bdim, .bcard, .big).
   A native <dialog> (focus is trapped by the browser, Escape closes, focus returns to the tile).
   The bound book travels from the tile to the card; the words arrive behind it (js/components/book-card.js).
   The same dialog shell hosts the full-screen reader that Read opens into (.db-book-card--reader). */
html.db-scroll-lock{overflow:hidden}
.db-book-card{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;color:var(--db-ink);overflow:hidden auto;overscroll-behavior:contain}
.db-book-card[open]{display:grid;place-items:center}
.db-book-card::backdrop{background:transparent}
/* the dim is its own layer so the fade never touches the book travelling on top of it */
.db-book-card__dim{position:fixed;inset:0;background:rgba(8,9,20,.9)}
.db-book-card__close{position:fixed;z-index:3;top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));
  width:52px;height:52px;padding:0;border:0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);color:var(--db-ink);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;
  transition:background-color var(--m-dur-fast) linear,transform var(--m-dur-fast) var(--m-ease)}
.db-book-card__close:hover{background:rgba(255,255,255,.17)}
.db-book-card__close:active{transform:scale(.92)}
.db-book-card__close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.db-book-card__close:focus-visible{outline:3px solid var(--db-focus);outline-offset:3px}

.db-book-card__panel{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(20px,3vw,40px);
  width:min(88%,900px);padding:clamp(72px,10vh,96px) 0 clamp(24px,5vh,48px)}
.db-book-card__book{flex:0 0 46%;min-width:0}
.db-book-card__book > .db-book__bind{will-change:transform}
.db-book-card__info{flex:1;min-width:0}
.db-book-card__title{margin:0 0 .6rem;font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem);font-weight:700;line-height:1.07;letter-spacing:-.01em;color:var(--db-ink)}
.db-book-card__meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:.9rem}
.db-book-card__chip{display:inline-flex;align-items:center;min-height:30px;padding:0 .8rem;border-radius:var(--db-r-pill);
  font-size:.82rem;font-weight:600;background:rgba(255,255,255,.1);color:var(--db-muted)}
.db-book-card__chip--age{background:rgba(255,206,92,.18);color:var(--db-gold)}
.db-book-card__chip--free{background:var(--db-free);color:rgba(0,0,0,.78);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.7rem}
.db-book-card__blurb{margin:0 0 1.35rem;max-width:44ch;color:var(--db-muted);font-size:clamp(1rem,.95rem + .25vw,1.12rem);line-height:1.5}
.db-book-card__acts{display:flex;flex-wrap:wrap;gap:12px}
/* the app's big buttons: 54px, rounded rectangles rather than pills */
.db-book-card__acts .db-btn{--h:54px;border-radius:var(--db-r-md);padding:0 1.6rem;font-size:1.1rem;font-weight:600}
.db-book-card__acts .db-btn:active{transform:scale(.96)}
.db-book-card__note{margin:.8rem 0 0;min-height:1.4em;font-size:.9rem;font-weight:600;color:var(--db-gold-pale)}
.db-book-card__note:empty{margin:0}

/* narrow screens (a phone held upright on the website): book above, words below */
@media (max-width:640px){
  .db-book-card[open]{place-items:start center}
  .db-book-card--reader[open]{place-items:center}
  .db-book-card__dim{background:rgba(8,9,20,.95)}
  .db-book-card__panel{flex-direction:column;align-items:stretch;width:calc(100% - 32px);padding-top:80px;gap:20px}
  .db-book-card__book{flex:none;width:100%;max-width:420px;align-self:center}
  .db-book-card__acts .db-btn{flex:1 1 auto}
}

/* ---------- the reader it opens into ---------- */
.db-book-card--reader .db-book-card__dim{background:rgba(6,8,20,.94)}
.db-book-card__frame{position:relative;z-index:1;width:min(94vw,calc((100vh - 120px) * 16 / 9),1400px);transition:opacity var(--m-dur-fast) linear}
.db-book-card__frame > .db-reader{box-shadow:var(--db-shadow-3)}
.db-book-card__close--reader{left:auto;right:max(14px,env(safe-area-inset-right))}
@supports (height:100dvh){.db-book-card__frame{width:min(94vw,calc((100dvh - 120px) * 16 / 9),1400px)}}

@media (prefers-reduced-motion:reduce){
  .db-book-card__close,.db-book-card__frame{transition:none}
}