/* Read4Max browser reader mobile layer v1.
   Uses dynamic viewport units and safe-area insets to avoid browser chrome clipping. */

@media (max-width: 760px) {
  :root {
    --header-height: calc(7rem + env(safe-area-inset-top));
  }

  html {
    -webkit-text-size-adjust: 100%;
  }

  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .reader-header {
    height: var(--header-height);
    padding: env(safe-area-inset-top) .75rem .45rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 3.35rem 2.75rem;
    gap: 0 .65rem;
    align-items: center;
    border-bottom: 1px solid var(--rule);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(18px);
  }

  .reader-brand {
    grid-column: 1;
    grid-row: 1;
    width: 2.7rem;
    height: 2.7rem;
    justify-content: center;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--surface-2);
  }

  .reader-brand span:last-child {
    display: none;
  }

  .reader-book {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
  }

  .reader-book strong {
    font-size: clamp(.88rem, 3.8vw, 1rem);
    line-height: 1.15;
  }

  .reader-book span {
    display: block;
    margin-top: .18rem;
    font-size: .7rem;
  }

  .reader-controls {
    display: contents;
  }

  .font-controls {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .font-controls button {
    min-width: 2.55rem;
    min-height: 2.4rem;
    padding: 0;
  }

  .theme-label {
    grid-column: 2 / 4;
    grid-row: 2;
    display: block !important;
    min-width: 0;
  }

  .theme-label select {
    width: 100%;
    max-width: none !important;
    min-height: 2.4rem;
    padding: 0 2rem 0 .75rem !important;
    border-radius: .7rem;
    background: var(--surface-2);
    font-size: .78rem;
  }

  .epub-link {
    grid-column: 3;
    grid-row: 1;
    min-width: 3.35rem;
    min-height: 2.7rem;
    justify-content: center;
    padding: 0 .65rem;
    border-radius: .7rem;
    font-size: .68rem;
  }

  .reader-shell {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding-top: var(--header-height);
    display: block;
  }

  .reading-area {
    width: 100%;
    height: calc(100dvh - var(--header-height));
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) calc(3.65rem + env(safe-area-inset-bottom));
  }

  #chapter-frame {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .reader-loading {
    inset: 0 0 calc(3.65rem + env(safe-area-inset-bottom));
  }

  .reader-nav {
    min-height: calc(3.65rem + env(safe-area-inset-bottom));
    padding: .45rem .65rem calc(.45rem + env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: .5rem;
  }

  .reader-nav button {
    min-width: 0;
    min-height: 2.55rem;
    padding: 0 .7rem;
    border-radius: .7rem;
    font-size: .74rem;
    white-space: nowrap;
  }

  #chapter-position {
    font-size: .74rem;
  }

  .toc-panel {
    position: fixed !important;
    z-index: 45;
    top: var(--header-height) !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: min(88vw, 22rem);
    margin: 0 !important;
    transform: translate3d(-100%, 0, 0) !important;
    overflow: visible;
    border-right: 1px solid var(--rule);
    background: var(--surface-2);
    box-shadow: 1rem 0 3rem rgba(15, 20, 18, .18);
    transition: transform .22s ease;
    will-change: transform;
  }

  .toc-panel.open {
    transform: translate3d(0, 0, 0) !important;
  }

  .toc-toggle {
    position: absolute;
    top: .75rem;
    left: 100%;
    width: 3rem;
    min-height: 3rem;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--rule);
    border-left: 0;
    border-radius: 0 .75rem .75rem 0;
    background: var(--surface-2);
    box-shadow: .45rem .35rem 1.1rem rgba(15, 20, 18, .1);
  }

  .toc-toggle span:first-child {
    display: none !important;
  }

  .toc-toggle span:last-child {
    font-size: 1.1rem;
    line-height: 1;
  }

  #toc {
    height: calc(100dvh - var(--header-height));
    padding: .75rem .75rem calc(1rem + env(safe-area-inset-bottom));
  }

  #toc a {
    padding: .78rem .8rem;
    font-size: .96rem;
    line-height: 1.35;
  }

  body[data-chapter-kind="cover"] #chapter-frame {
    width: min(78vw, calc((100dvh - var(--header-height) - 4.4rem) * .625)) !important;
    height: calc(100% - .8rem) !important;
    max-width: 20rem !important;
    margin: .4rem auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: 0 .9rem 2.5rem rgba(15, 20, 18, .15) !important;
  }

  body[data-chapter-kind="title"] #chapter-frame {
    width: 100% !important;
  }

  .reader-error {
    min-height: 100dvh;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  }

  .reader-error > div {
    padding: 2rem 1.25rem;
  }
}

@media (max-width: 380px) {
  :root {
    --header-height: calc(6.65rem + env(safe-area-inset-top));
  }

  .reader-header {
    grid-template-rows: 3.15rem 2.55rem;
    gap: 0 .45rem;
    padding-inline: .55rem;
  }

  .reader-brand {
    width: 2.45rem;
    height: 2.45rem;
  }

  .reader-book strong {
    font-size: .82rem;
  }

  .reader-book span {
    font-size: .64rem;
  }

  .font-controls button {
    min-width: 2.25rem;
  }

  .epub-link {
    min-width: 3rem;
    padding-inline: .45rem;
  }

  .reader-nav button {
    padding-inline: .5rem;
    font-size: .68rem;
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  :root {
    --toc-width: 16rem;
  }

  .reader-header {
    grid-template-columns: minmax(7rem, 1fr) minmax(12rem, 2fr) minmax(13rem, 1fr);
    padding-inline: 1rem;
  }
}