/* Phones and tablets: the same design, fitted to touch, the notch and small screens. Loaded last.
   Three conditions, from widest to narrowest:
     touch           (hover: none)                                no hover states, finger-sized targets
     compact         (max-width: 860px), (max-height: 500px)      sidebar becomes a drawer, tight gutters
     phone portrait  (max-width: 600px) and (min-height: 501px)   bottom tabs, edge-to-edge player
   js/lib/viewport.js repeats the compact condition; change the two together. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
.topbar { height: var(--top-with-inset); padding-top: var(--safe-top); padding-left: max(14px, var(--safe-left)); padding-right: max(14px, var(--safe-right)); }
.tb-brand, .tabbar, .nav-scrim { display: none; }
.lightbox .close { top: calc(18px + var(--safe-top)); right: max(22px, var(--safe-right)); }
.lightbox .count { bottom: calc(18px + var(--safe-bottom)); }

/* ---------- touch ---------- */
@media (hover: none) {
  .card:hover .thumb img { transform: none; }
  .icon-btn:hover { background: none; color: var(--muted); }
  .nav-item:not(.active):hover, .result:hover, .list-row:hover { background: none; }
  .btn:not(.on, .ghost):hover, .chip:not(.active):hover, .tag-cloud a:hover { border-color: var(--border); }
  .btn.ghost:hover { background: none; color: var(--muted); }
  .tag-cloud a:hover { color: inherit; }
  .card:active, .nav-item:active, .list-row:active, .result:active, .tab:active { opacity: .65; }

  .shelf-nav, .key-hint { display: none; }
  .shelf-head a.more { margin-left: auto; padding: 8px 0; }
  .row, .chips, .hero-stats, .filmstrip { scrollbar-width: none; }

  .search input, .tags-edit input, textarea.note, select.sort { font-size: var(--font-size-input); }
  .topbar .icon-btn { width: var(--touch-target); height: var(--touch-target); }
  .nav-item { padding-top: 12px; padding-bottom: 12px; }
  .caret-btn { display: grid; place-items: center; width: 32px; height: 32px; margin: -8px -6px -8px -10px; flex: none; }
  .btn { min-height: 40px; }
  .btn.small { min-height: 36px; }
  .chip { padding-top: 8px; padding-bottom: 8px; }
  .rates button { padding: 9px 14px; }
  .tag button { width: 28px; height: 28px; }
  .tags-edit input { padding-top: 9px; padding-bottom: 9px; }
  select.sort { min-height: 36px; }
  .slide-stage, .lightbox { touch-action: pan-y pinch-zoom; }
}

/* ---------- compact ---------- */
@media (max-width: 860px), (max-height: 500px) {
  :root { --gutter-left: max(var(--gutter-compact), var(--safe-left)); --gutter-right: max(var(--gutter-compact), var(--safe-right)); }
  main { padding: 16px var(--gutter-right) calc(60px + var(--safe-bottom)) var(--gutter-left); }

  .tb-side { flex: none; }
  .search { flex: 1 1 auto; height: 38px; }
  #fwdBtn { display: none; }
  body[data-page="home"] #backBtn { display: none; }
  body[data-page="home"] .tb-brand { display: grid; place-items: center; width: var(--touch-target); height: var(--touch-target); }
  .tb-brand img { width: 28px; height: 28px; }

  /* the sidebar as a drawer */
  .sidebar { position: fixed; z-index: 50; top: 0; left: 0; height: 100dvh; width: min(calc(var(--sidebar-w) + 40px), 84vw);
    padding: calc(var(--safe-top) + 8px) 10px calc(var(--safe-bottom) + 24px) max(10px, var(--safe-left));
    background: var(--bg); box-shadow: var(--shadow); overscroll-behavior: contain;
    visibility: hidden; transform: translateX(-105%); transition: transform var(--motion-base), visibility var(--motion-base); }
  body.nav-open .sidebar { visibility: visible; transform: none; }
  body.nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: var(--drawer-scrim); touch-action: none; }

  /* rows that swipe sideways run to the screen edge */
  .hero-stats, .chips, .row { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--gutter-left)); margin-right: calc(-1 * var(--gutter-right));
    padding-left: var(--gutter-left); padding-right: var(--gutter-right); scroll-padding-left: var(--gutter-left); }
  .hero-stats { margin-bottom: 18px; }
  .stat { flex: none; min-width: 124px; padding: 10px 14px; }
  .stat b { font-size: var(--font-size-xl); }
  .chip { flex: none; }
  .shelf { margin-bottom: 30px; }
  .shelf-head .path { display: none; }

  .page-head h1 { font-size: var(--font-size-2xl); }
  .entry-title { font-size: var(--font-size-xl); margin: 14px 0 6px; }
  .reader .entry-title { font-size: var(--font-size-2xl); }
  .box { padding: 14px 16px; }
  .audio-card { padding: 14px; gap: 14px; }

  .slides { padding: 8px; }
  .slide-stage .nav { width: 38px; height: 38px; }
  .slide-stage .prev { left: 6px; } .slide-stage .next { right: 6px; }
  .filmstrip button { width: 88px; }

  .lightbox img { max-width: 100vw; max-height: 100dvh; }
  .lightbox .nav { width: var(--touch-target); height: var(--touch-target); }
  .lightbox .prev { left: max(8px, var(--safe-left)); } .lightbox .next { right: max(8px, var(--safe-right)); }
}

/* ---------- phone on its side: the media takes the whole height ---------- */
@media (max-height: 500px) {
  .player, .player.portrait, .slide-stage { aspect-ratio: auto; height: calc(100svh - var(--top-with-inset) - 16px); }
}

/* ---------- phone portrait ---------- */
@media (max-width: 600px) and (min-height: 501px) {
  #menuBtn { display: none; }
  main { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 28px); }
  body[data-page="e"] main { padding-bottom: calc(var(--safe-bottom) + 40px); }
  .toast { bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 14px); }
  body[data-page="e"] .toast { bottom: calc(var(--safe-bottom) + 20px); }

  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: var(--bg); border-top: 1px solid var(--border); user-select: none; -webkit-user-select: none; }
  body[data-page="e"] .tabbar { display: none; }
  .tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none; padding: 0; color: var(--muted); font-size: var(--font-size-2xs); }
  .tab svg { width: 22px; height: 22px; }
  .tab.active { color: var(--accent-text); font-weight: var(--font-weight-semibold); }

  /* the player sits edge to edge and stays in view while the page scrolls */
  main:has(#media > .player) { padding-top: 0; }
  #media:has(> .player) { display: contents; }
  .player { margin-left: calc(-1 * var(--gutter-left)); margin-right: calc(-1 * var(--gutter-right)); border-radius: 0; }
  .player:not(.portrait) { position: sticky; top: var(--top-with-inset); z-index: 20; }
  .player.portrait { height: 62svh; }
}