/*
 * Mobile behaviour shared by every reader theme.
 *
 * The target is a newspaper app, not a shrunken website: full-bleed pages,
 * thumb-reachable controls, 44px tap targets, safe-area padding, and no
 * accidental text selection while swiping.
 */

/* ---------- universal touch hygiene ---------- */
@media (hover: none) and (pointer: coarse) {
  body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: contain; }

  .page-stage, .page-stage img { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

  /* Anything tappable clears the 44px minimum. */
  .dp-pg, .ct-pill, .fb-dock a, .fb-dock button,
  .dp-btn, .rd-btn, .rd-iconbtn, .dp-dl { min-height: 44px; }

  .dp-pg, .ct-pill { min-width: 44px; }

  .list-group-item { padding-top: .8rem; padding-bottom: .8rem; }
}

/* ---------- page stage: full bleed, snappy ---------- */
@media (max-width: 767.98px) {
  .page-stage { width: 100%; border-radius: 0; }
  .page-stage img { width: 100%; height: auto; display: block; }

  .rd-swipe-hint {
    position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
    background: rgba(17,24,39,.82); color: #fff; font-size: .74rem;
    padding: .3rem .8rem; border-radius: 999px; pointer-events: none;
    animation: rdFade 3.5s ease forwards;
  }
  @keyframes rdFade { 0%,70% { opacity: 1 } 100% { opacity: 0 } }
}

/* Loading shimmer while a page image decodes. */
.rd-loading { position: relative; min-height: 220px; background: #EEF1F4; }
.rd-loading::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.65) 45%, transparent 70%);
  background-size: 220% 100%; animation: rdShimmer 1.15s linear infinite;
}
@keyframes rdShimmer { to { background-position: -220% 0 } }

/* Page turn feels like a swipe, not a reload. */
.rd-slide-left  { animation: rdOutL .16s ease forwards; }
.rd-slide-right { animation: rdOutR .16s ease forwards; }
@keyframes rdOutL { to { transform: translateX(-14%); opacity: .25 } }
@keyframes rdOutR { to { transform: translateX(14%);  opacity: .25 } }

@media (prefers-reduced-motion: reduce) {
  .rd-slide-left, .rd-slide-right, .rd-loading::after, .rd-swipe-hint { animation: none !important; }
}

/* ---------- install prompt ---------- */
.rd-install {
  position: fixed; left: .7rem; right: .7rem; z-index: 70;
  bottom: calc(.7rem + env(safe-area-inset-bottom));
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 16px 40px -14px rgba(0,0,0,.4);
  padding: .7rem .8rem; display: none; align-items: center; gap: .7rem;
}
.rd-install.show { display: flex; }
.rd-install .ic { width: 40px; height: 40px; border-radius: 9px; background: var(--accent, #F2701E); color: #fff;
                  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex: none; }
.rd-install .tx { flex: 1; min-width: 0; }
.rd-install .tx b { display: block; font-size: .88rem; }
.rd-install .tx span { font-size: .76rem; color: #6b7280; }
.rd-install button { border: 0; border-radius: 8px; padding: .5rem .85rem; font-weight: 600; font-size: .84rem; }
.rd-install .go { background: var(--accent, #F2701E); color: #fff; }
.rd-install .no { background: transparent; color: #9ca3af; }

/* ---------- theme: daily ---------- */
@media (max-width: 991.98px) {
  .dp-bar-in { gap: .4rem; }
  .dp-jump { flex: 1 1 100%; max-width: none; order: -1; }
  .dp-act { margin-left: 0; width: 100%; }
  .dp-act .dp-btn { flex: 1; justify-content: center; }
  .dp-pages { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; scrollbar-width: none; }
  .dp-pages::-webkit-scrollbar { display: none; }
  .dp-stage-wrap { padding: 0; }
  .dp-panel { border-left: 0; border-right: 0; }
  .dp-head h1 { font-size: .88rem; }
  .dp-sticky img { max-height: 56px; }
}

/* ---------- theme: flipbook ---------- */
@media (max-width: 767.98px) {
  .fb-stagearea { padding: 54px .35rem 96px; }
  .fb-dock { width: calc(100% - 1.2rem); justify-content: space-around; border-radius: 14px; bottom: calc(.6rem + env(safe-area-inset-bottom)); }
  .fb-dock .count { display: none; }
  .fb-drawer .grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
  .fb-links a { margin-left: .8rem; font-size: .82rem; }
}

/* ---------- theme: magazine ---------- */
@media (max-width: 991.98px) {
  .mg-top-in { padding: .7rem 0; }
  .mg-name { font-size: 1.25rem; }
  .mg-links a { margin-left: .9rem; font-size: .84rem; }
  .mg-cover { padding: 0; border-left: 0; border-right: 0; }
  .mg-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .7rem; }
}

/* ---------- theme: compact ---------- */
@media (max-width: 991.98px) {
  .ct-pagewrap { padding: 0; }
  .ct-strip { position: sticky; top: 44px; z-index: 35; }
}

/* Header hides as you read down, returns on scroll up. */
.rd-hide-top { transform: translateY(-104%); transition: transform .22s ease; }
.dp-top, .ct-top, .fb-top, .mg-top { transition: transform .22s ease; }