/*
  Responsive behavior for desktop, tablet, and mobile.
  Base CSS targets desktop; these queries adapt tablet and mobile.
  Viewport height uses dvh where available to survive mobile browser chrome.
*/

/* Desktop: constrain the paper surface and give it presence. */
@media (min-width: 900px) {
  .reader[data-mode="paged"] .paper {
    max-width: 900px;
    width: auto;
    margin: 0 auto;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    box-shadow: 0 2px 18px var(--surface-shadow);
    inset: 18px 0;
  }

  .reader[data-mode="scroll"] .content {
    padding: 56px 32px 120px;
  }
}

/* Tablet: comfortable touch targets, moderate margins. */
@media (min-width: 600px) and (max-width: 899px) {
  :root {
    --control-size: 46px;
  }
  .page-viewport {
    padding: 36px 32px 8px;
  }
  .reader[data-mode="scroll"] .content {
    padding: 44px 32px 100px;
  }
}

/* Mobile: narrow reading width, larger touch targets, full-screen settings. */
@media (max-width: 599px) {
  :root {
    --control-size: 46px;
  }

  .dropzone {
    padding: 32px 22px;
  }

  .updates-panel {
    padding: 18px 18px;
  }

  .page-viewport {
    padding: 24px 18px 8px;
  }

  .reader[data-mode="scroll"] .content {
    padding: 28px 18px 88px;
  }

  .reader__title {
    font-size: 0.9rem;
  }

  /* Settings becomes a bottom sheet. */
  .settings {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 88vh;
    height: 88dvh;
    border-left: none;
    border-top: 1px solid var(--line-strong);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -6px 24px var(--surface-shadow);
  }

  .field {
    flex-wrap: wrap;
  }
  .field__control {
    justify-content: flex-start;
  }
  .field input[type="range"] {
    width: 100%;
  }

  /* Page zones narrower so they don't block text selection. */
  .page-zone {
    width: 18%;
  }
}

/* Very small heights (landscape phones): tighten vertical padding. */
@media (max-height: 480px) {
  .page-viewport {
    padding-top: 16px;
  }
  .reader__bar,
  .reader__footer {
    padding-top: 4px;
    padding-bottom: 4px;
  }
}