/* Phones (<=700px), both themes. Loaded last; `html body` / #spread keep these
   ahead of the theme files' desktop rules.
   Layout: one-row header, one binder page at a time filling the width (app.js
   turnPage/phoneSide), page arrows underneath. The binder shelf slides in from
   the left, the library covers the screen below the header. */
@media (max-width: 700px) {
  html body .app-shell {
    display: block !important; width: 100% !important; height: 100dvh !important;
    margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  html body .main {
    display: grid !important; height: 100dvh; width: 100%;
    grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: 58px minmax(0, 1fr) !important;
  }
  html body .workspace { display: contents !important; }
  html body .workspace-resizer { display: none !important; }

  /* ---------- Header: ☰, name over value, then icon actions ---------- */
  html body .topbar {
    display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 6px;
    height: 58px !important; min-height: 0 !important; padding: 0 8px 0 6px !important;
  }
  html body .topbar-left { flex: 1; min-width: 0 !important; display: flex; align-items: center; gap: 6px; }
  html body .topbar #sidebarToggleBtn {
    display: inline-flex !important; flex: none; width: 40px; height: 40px; padding: 0;
    align-items: center; justify-content: center;
  }
  html body .topbar-left > div { display: flex !important; flex: 1 1 auto; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; }
  html body .topbar .header-total { align-self: flex-start; }
  html body #binderTitle { font-size: 15px !important; line-height: 1.2 !important; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body.pixel-theme #binderTitle { font-size: 11px !important; }
  html body .header-total { font-size: 12px !important; }
  html body.pixel-theme .header-total { font-size: 9px !important; }
  html body .top-actions { flex: none; flex-wrap: nowrap !important; gap: 4px !important; }
  html body .top-actions :is(.lock-btn, #editBinderBtn, #libraryToggleBtn, #addCardBtn) {
    width: 38px !important; height: 38px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
  }
  html body #addCardBtn { font-size: 0 !important; gap: 0 !important; justify-content: center; }
  html body #addCardBtn .btn-ico { width: 18px; height: 18px; }
  html body #offlineBadge { display: none !important; }

  /* ---------- Binder shelf: drawer from the left ---------- */
  html body .sidebar {
    position: fixed !important; z-index: 70; left: 0; top: 0; bottom: 0;
    width: 84px !important; min-width: 0 !important; height: 100dvh !important;
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important;
    padding: 14px 0 !important; gap: 12px !important; overflow: hidden !important;
    opacity: 1 !important; pointer-events: auto !important; border-bottom: 0 !important;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
  }
  html body .sidebar .side-bottom { display: flex !important; }
  html body .app-shell.sidebar-collapsed .sidebar { transform: translateX(-110%); }
  /* Backdrop: clicks land on .app-shell, which closes the drawer (app.js). */
  html body .app-shell:not(.sidebar-collapsed)::after {
    content: ''; position: fixed; inset: 0; z-index: 65; background: rgba(8, 12, 22, .45);
  }

  /* ---------- Library: sheet under the header ---------- */
  html body .library-panel {
    position: fixed !important; z-index: 60; left: 0; right: 0; top: 58px; bottom: 0;
    width: auto !important; max-width: none !important; height: auto !important;
    display: flex !important; flex-direction: column; border: 0 !important; border-radius: 0 !important;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), visibility .22s;
  }
  html body .main.library-collapsed .library-panel { transform: translateY(102%); visibility: hidden; }
  /* The sheet scrolls; the list inside sizes to its content (as a flex:1 grid its
     rows collapsed to 0). */
  html body .library-panel { overflow-y: auto !important; }
  html body .library-panel .card-library { flex: none !important; height: auto !important; }

  /* ---------- Stage: one page, full width ---------- */
  html body .binder-stage {
    grid-row: 2; padding: 10px 10px 8px !important; min-height: 0; overflow: auto;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center !important; gap: 10px !important;
  }
  html body #spread {
    width: 100% !important; min-width: 0 !important; margin: 0 auto !important;
    max-width: min(100%, calc((100dvh - 160px) * .74)) !important;
    aspect-ratio: auto !important; padding: 10px !important;
    grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto !important;
  }
  html body #spread > .spine { display: none !important; }
  html body #spread > .page-wrap { grid-area: auto !important; width: 100%; }
  html body #spread:not(.phone-right) > .page-wrap:last-child,
  html body #spread.phone-right > .page-wrap:first-child,
  html body #spread.cover-mode > .page-wrap:last-child { display: none !important; }
  html body #spread.cover-mode > .page-wrap:first-child { display: block !important; }

  /* Pixel: the frame art is a two-page spread, so a single page gets a plain
     cover-coloured board with the ink outline instead. */
  html body.pixel-theme #spread:not(.cover-mode) { border: 3px solid var(--ink); box-shadow: 4px 4px 0 rgba(20, 32, 60, .45); }
  html body.pixel-theme #spread:not(.cover-mode)::after { display: none !important; }
  html body.pixel-theme #spread:not(.cover-mode)::before { inset: 0 !important; border-radius: 0 !important; }
  html body.pixel-theme #spread:not(.cover-mode) > .page-wrap { aspect-ratio: .72; box-shadow: 0 0 0 2px var(--ink); }
  html body:not(.pixel-theme) #spread:not(.cover-mode) { padding: 12px !important; border-radius: 14px; }
  html body:not(.pixel-theme) #spread:not(.cover-mode)::before { inset: 5px; border-radius: 10px; }

  /* ---------- Page nav: arrows + page number ---------- */
  html body .binder-nav-dock { width: auto; margin: 0 !important; position: static !important; }
  html body .binder-nav-dock .jump-nav,
  html body .binder-nav-dock .dock-divider { display: none !important; }
  html body .binder-nav-dock .round { width: 44px !important; height: 44px !important; }
  html body #pageLabel { min-width: 72px !important; text-align: center; }

  /* Pop-up windows: full-width sheets rising from the bottom. */
  html body .modal-backdrop { padding: 0 !important; align-items: flex-end !important; }
  html body .modal {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important;
    max-height: 92dvh !important; overflow-y: auto !important; overflow-x: hidden !important;
  }
  html body .modal * { min-width: 0; }

  /* Long-press picks a card up; don't let the OS callout/menu steal it. */
  html body :is(.slot, .library-card) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

  /* Inside Cover on phones */
  html body #spread.has-inside-cover > .page-wrap:first-child { min-height: 420px !important; }
  html body .inside-cover-container { min-height: 420px !important; border-radius: 12px; }
  html body .inside-cover-note { width: 145px; min-height: 135px; }
  html body .inside-cover-note { padding: 7px 8px 8px; }
  html body .inside-cover-note-header { gap: 4px; }
  html body .note-color-picker { gap: 3px; }
  html body .color-dot { width: 8px; height: 8px; }
  html body .note-tool-btn { width: 18px; height: 18px; }
  html body .note-delete-btn { margin-left: 1px; }
  html body .ink-dot { width: 16px; height: 16px; }
  html body .note-draw-bar .note-tool-btn { width: 24px; height: 24px; }
  html body .inside-cover-note-text { font-size: 12px; }
}

@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  html body .library-panel { transition: none; }
}