/* Touch controls and mobile browser chrome; app-specific shells stay in layouts.css. */
:root {
  --reader-dock-height: 57px;
}

@media (max-width: 720px) {
  :root {
    --reader-dock-height: calc(110px + env(safe-area-inset-bottom, 0px));
  }

  html {
    scroll-padding-bottom: calc(var(--reader-dock-height) + 16px);
    -webkit-text-size-adjust: 100%;
  }

  .cover-stage {
    padding-bottom: var(--reader-dock-height);
  }

  .replica {
    min-height: calc(100svh - var(--reader-dock-height));
  }

  .reading-dock {
    height: var(--reader-dock-height);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 44px 44px;
    padding: 8px max(12px, env(safe-area-inset-right, 0px))
      calc(8px + env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
    gap: 6px;
  }

  .dock-left {
    width: 100%;
    min-width: 0;
    gap: 6px;
  }

  .dock-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    touch-action: manipulation;
  }

  .dock-icon svg {
    width: 18px;
    height: 18px;
  }

  .dock-mode {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 44px;
    padding: 4px 2px;
    font-size: 16px;
  }

  .dock-random {
    flex-shrink: 0;
    min-height: 44px;
    gap: 4px;
    font-size: 11px;
    cursor: pointer;
  }

  .dock-random input {
    width: 18px;
    height: 18px;
    margin: 0;
  }

  .dock-center {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr);
    gap: 8px;
    width: 100%;
  }

  .dock-prev,
  .dock-next,
  .dock-page {
    min-width: 0;
    min-height: 44px;
    padding: 8px;
    justify-content: center;
    font-size: 12px;
    touch-action: manipulation;
  }

  .toast {
    bottom: calc(var(--reader-dock-height) + 12px);
    max-width: calc(100vw - 24px);
  }

  dialog {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px)
      - env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
  }

  .dialog-heading {
    padding: 24px 20px 18px;
    padding-right: 64px;
  }

  .dialog-heading h2 {
    font-size: 23px;
  }

  .dialog-close {
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    touch-action: manipulation;
  }

  .import-dialog,
  .page-dialog {
    padding: 0 20px 22px;
  }

  .import-dialog .dialog-heading,
  .page-dialog .dialog-heading {
    padding: 24px 56px 18px 0;
  }

  .import-dialog .dialog-close,
  .page-dialog .dialog-close {
    top: 10px;
    right: 0;
  }

  .text-input {
    font-size: 16px;
    min-height: 44px;
  }

  .primary-button,
  .quiet-button,
  .book-open,
  .book-delete,
  .delete-confirm button {
    min-height: 44px;
    touch-action: manipulation;
  }

  .book-delete {
    flex-shrink: 0;
    min-width: 44px;
  }

  .library-list {
    padding: 0 12px;
  }

  .library-book {
    gap: 10px;
    padding: 16px 0;
  }

  .book-cover {
    width: 36px;
    min-height: 55px;
  }

  .library-import {
    width: calc(100% - 40px);
    margin: 16px 20px;
  }

  .library-mode-notes {
    margin: 18px 8px 0;
  }

  .safe-screen {
    min-height: 100svh;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .safe-screen header {
    min-height: calc(74px + env(safe-area-inset-top, 0px));
    height: auto;
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  }

  .safe-screen header .quiet-button {
    white-space: normal;
    text-align: center;
    flex-shrink: 0;
    max-width: 118px;
  }
}

/* A single control row leaves room to read on a landscape phone. */
@media (min-width: 620px) and (max-width: 950px) and (max-height: 500px) {
  :root {
    --reader-dock-height: calc(60px + env(safe-area-inset-bottom, 0px));
  }

  .cover-stage {
    padding-bottom: var(--reader-dock-height);
  }

  .reading-dock {
    display: grid;
    height: var(--reader-dock-height);
    grid-template-columns: minmax(0, 1fr) 250px;
    grid-template-rows: 44px;
    gap: 10px;
    padding: 8px max(12px, env(safe-area-inset-right, 0px))
      calc(8px + env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
  }

  .dock-left {
    width: 100%;
    min-width: 0;
    gap: 6px;
  }

  .dock-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }

  .dock-mode {
    flex: 1 1 0;
    min-width: 0;
    max-width: 160px;
    min-height: 44px;
    font-size: 16px;
  }

  .dock-random {
    min-height: 44px;
    flex-shrink: 0;
    font-size: 11px;
  }

  .dock-center {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
    gap: 4px;
    width: 100%;
  }

  .dock-prev,
  .dock-next,
  .dock-page {
    min-width: 0;
    min-height: 44px;
    padding: 6px;
    justify-content: center;
    font-size: 11px;
  }

  .dock-right {
    display: none;
  }
}