/* Mobile / phone layout.
   The themes are fixed-width desktop designs (#wrap = 980px, no media queries). These rules
   make the core surfaces usable on small screens; paired with the device-width viewport meta.
   Structural classes (#wrap, .post, .post-profile, .fstat/.flast, .acp…) are shared by all
   four themes, so this one file covers them all. First pass — tune from real-device feedback. */

@media (max-width: 640px) {
  /* full-bleed layout instead of the centered 980px column */
  #wrap { width: 100% !important; border-left: 0 !important; border-right: 0 !important; }
  #content { padding: 0 8px 12px !important; }

  /* posts: stack the left profile column into a compact strip above the body */
  .post { flex-direction: column; }
  .post-profile {
    width: auto !important; border-right: 0 !important; border-bottom: 1px solid #c8ccd5;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 8px;
  }
  .post-profile .pp-avatar, .post-profile .big-avatar { width: 40px !important; height: 40px !important; margin: 0; }
  .post-profile .pp-stats { flex-direction: row; flex-wrap: wrap; gap: 2px 10px; margin-top: 0; }

  /* forum index / topic lists: drop the heavy stats + last-post columns so rows fit */
  .fstat, .flast { display: none !important; }
  .last-subject { max-width: 55vw; }

  /* side-by-side panels stack vertically */
  .acp { flex-direction: column; }
  .acp-nav { width: auto !important; flex-direction: row; flex-wrap: wrap; }
  .profile-head, .settings-grid { flex-direction: column; }

  /* keep wide content from forcing the whole page to scroll sideways */
  table { max-width: 100%; }
  pre, .post-content .code { overflow-x: auto; }
  .post-content img { max-width: 100%; height: auto; }

  /* tighter navbar tabs so more fit per row (they already wrap) */
  #navbar { padding: 0 5px !important; }
  #navbar .navgrp-btn, #navbar .nav-right > a { padding: 5px 9px; }
}