/* Keevora Responsive + Performance Layer
   Keeps the existing visual design while making the UI comfortable on phones,
   tablets, laptops and large screens. */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;
  min-height:100%;
  scroll-behavior:smooth;
}
body{
  min-width:0;
  max-width:100%;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
img,video,canvas,svg{max-width:100%;height:auto;}
img{height:auto;}
button,a,input,select,textarea{touch-action:manipulation;}
button,a{ -webkit-user-select:none; user-select:none; }
input,select,textarea{font:inherit; max-width:100%;}
textarea{resize:vertical;}
button,input[type="button"],input[type="submit"],input[type="reset"]{min-height:42px;}
@media (hover:none){
  a:hover,button:hover{ /* don't depend on hover on touch devices */ }
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}
@media (max-width:1100px){
  .layout,.main-wrap,.wrap,.top-inner,.site-topbar{
    max-width:100%;
  }
}
@media (max-width:760px){
  body{min-height:100dvh;}
  .site-topbar,.top,.nav{
    padding-left:max(10px,var(--safe-left));
    padding-right:max(10px,var(--safe-right));
  }
  .layout{
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    padding-left:max(8px,var(--safe-left));
    padding-right:max(8px,var(--safe-right));
    padding-bottom:calc(28px + var(--safe-bottom));
  }
  .main,.card,.panel,.section,.book-card,.entry-card,.stat-card{
    max-width:100%;
    min-width:0;
  }
  .main,.card{overflow-wrap:anywhere;}
  .main-head h1,.main h1,.page-title,h1{
    overflow-wrap:anywhere;
  }
  .action-row,.actions,.button-row,.controls,.save-row{
    max-width:100%;
  }
  .action-row>*,
  .actions>*,
  .button-row>*,
  .controls>*{
    min-width:0;
  }
  table{max-width:none;}
}
@media (max-width:480px){
  .site-topbar .stb-right{gap:6px;}
  .site-topbar .stb-link{font-size:.9rem;}
  .site-topbar .stb-brand{min-width:0;}
  .site-topbar .stb-brand{overflow:hidden;text-overflow:ellipsis;}
}
@media (max-width:360px){
  .site-topbar{gap:5px;}
  .site-topbar .stb-right{gap:5px;}
  .site-topbar .stb-link{font-size:.78rem;}
}
/* iPhone/Android landscape */
@media (max-height:520px) and (orientation:landscape){
  .site-topbar{padding-top:7px;padding-bottom:7px;}
  .layout{padding-top:10px;}
  .sidebar{min-height:0!important;}
}
/* Avoid expensive rendering of long off-screen lists where supported. */
@supports (content-visibility:auto){
  .entry-list,.entries-list,.timeline,.memory-list,.selected-list{
    content-visibility:auto;
    contain-intrinsic-size:600px;
  }
}


/* ================================================================
   Keevora Book Reader — low-scroll / viewport-first layout
   The reader should feel like an app on phones and a compact reader
   on laptops/desktops. Long memories scroll inside the paper, not the
   whole webpage.
   ================================================================ */
.book-reader-page{
  overscroll-behavior-y:none;
}
.book-reader-page.book-open{
  overflow:hidden;
  height:100dvh;
  min-height:100dvh;
  padding-bottom:max(8px,var(--safe-bottom));
}
.book-reader-page .stage{
  min-height:0;
}
.book-reader-page .book{
  max-height:calc(100dvh - 32px);
}
.book-reader-page .spread{
  min-height:0;
  height:min(62dvh,600px);
}
.book-reader-page .page{
  min-height:0;
  overflow:hidden;
}
.book-reader-page .entry-note{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.book-reader-page .entry-photo-wrap{
  flex:0 1 auto;
  max-height:38%;
}
.book-reader-page .entry-photo{
  max-height:100%;
  object-fit:cover;
}

@media (max-width: 680px){
  .book-reader-page{
    padding-top:max(8px,var(--safe-top));
    padding-bottom:max(8px,var(--safe-bottom));
    padding-left:max(6px,var(--safe-left));
    padding-right:max(6px,var(--safe-right));
  }
  .book-reader-page.book-open{
    padding-top:max(6px,var(--safe-top));
  }
  .book-reader-page .stage{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);
    padding-top:0;
  }
  .book-reader-page .cover{
    width:min(88vw,360px);
    max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px);
    height:auto;
  }
  .book-reader-page .book{
    width:min(94vw,430px);
    max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 12px);
    padding:8px;
    margin:auto;
    display:none;
  }
  .book-reader-page .book.active{
    display:block;
  }
  .book-reader-page .spread{
    width:100%;
    height:min(calc(100dvh - var(--safe-top) - var(--safe-bottom) - 116px),560px);
    aspect-ratio:auto;
  }
  .book-reader-page .page{
    height:100%;
    padding:22px 20px 38px;
  }
  .book-reader-page .entry-date{font-size:1.12rem;margin-bottom:1px}
  .book-reader-page .entry-title{font-size:clamp(1.12rem,5.2vw,1.42rem);margin-bottom:8px}
  .book-reader-page .entry-photo-wrap{
    margin:4px 0 12px;
    max-height:34%;
  }
  .book-reader-page .entry-photo{
    aspect-ratio:16/9;
  }
  .book-reader-page .entry-note{
    font-size:clamp(.92rem,3.9vw,1rem);
    line-height:1.62;
  }
  .book-reader-page .folio{bottom:10px;font-size:.76rem}
  .book-reader-page .page.left .folio{left:20px}
  .book-reader-page .controls{margin-top:7px}
  .book-reader-page .page-count{margin-top:3px;font-size:.88rem}
  .book-reader-page .reader-hint{margin-top:4px;font-size:.72rem;line-height:1.2}
  .book-reader-page .add-page-link{margin-top:5px;font-size:.9rem}
  .book-reader-page .book-progress{bottom:4px;width:44%}
}

@media (max-width:680px) and (max-height:620px){
  .book-reader-page .spread{
    height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 100px);
  }
  .book-reader-page .page{padding-top:16px;padding-bottom:30px}
  .book-reader-page .entry-photo-wrap{max-height:29%;margin-bottom:8px}
  .book-reader-page .entry-note{font-size:.9rem;line-height:1.52}
  .book-reader-page .controls{margin-top:4px}
  .book-reader-page .reader-hint{display:none}
  .book-reader-page .add-page-link{display:none}
}

@media (min-width:681px){
  .book-reader-page.book-open .stage{
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:100dvh;
    min-height:0;
  }
  .book-reader-page.book-open .book{
    max-height:calc(100dvh - 24px);
  }
  .book-reader-page.book-open .spread{
    height:min(62dvh,600px);
  }
}


/* True single-page reader on phones: one sheet only, no center spine/split background. */
@media (max-width:680px){
  .book-reader-page .book::before{display:none!important;}
  .book-reader-page .spread::before,.book-reader-page .spread::after{display:none!important;}
  .book-reader-page .spread{background:var(--paper-edge)!important;box-shadow:0 12px 28px rgba(0,0,0,.28),inset 0 0 20px rgba(0,0,0,.10)!important;}
  .book-reader-page .page{box-shadow:inset 0 0 30px rgba(60,35,20,.05)!important;}
}