/* Shared phone and small-tablet refinements for Luna's watch experience. */
@media (max-width: 960px) {
  .header {
    height: auto;
    min-height: 78px;
    flex-wrap: wrap;
    gap: 0 18px;
    padding: 10px 4% 0;
  }

  .header nav {
    order: 3;
    width: 100%;
    height: 48px;
    justify-content: flex-start;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .header nav::-webkit-scrollbar { display: none; }
  .header nav a { flex: 0 0 auto; }
  .header-actions { gap: clamp(12px, 2vw, 20px); }
}

@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }

  #content,
  #content > *,
  .page,
  .public-profile-page,
  .social-page {
    min-width: 0;
    max-width: 100%;
  }

  img,
  video,
  iframe {
    max-width: 100%;
  }

  .header nav {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%);
  }

  .header nav::-webkit-scrollbar { display: none; }
  .header nav a { flex: 0 0 auto; scroll-snap-align: start; }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  button,
  .button,
  summary {
    min-height: 44px;
  }

  dialog {
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  dialog .dialog-inner { padding: clamp(18px, 5vw, 28px); }

  .player-bar {
    flex-wrap: wrap;
    padding-top: max(8px, env(safe-area-inset-top));
  }

  footer { padding-bottom: max(10px, env(safe-area-inset-bottom)); }

  #toast {
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  .header { gap: 0 12px; }
  .header-actions { gap: 12px; }
  .header nav { gap: 4px; }
  .header nav a { padding-inline: 9px; }

  .page-heading { gap: 12px; }
  .section-head { align-items: flex-start; }
  .detail .actions { gap: 8px; }
  .detail .actions .button { padding-inline: 12px; }
  .dialog-inner h1,
  .dialog-inner h2 { overflow-wrap: anywhere; }
}

@media (hover: none) and (pointer: coarse) {
  .remove-friend,
  .social-message-delete {
    opacity: 1;
  }
}