/* Phone layout for the board (ROADMAP.md). Loaded after the chosen theme, only on screens
   700px wide or narrower (see header.inc.php), so desktops and every theme are unchanged.
   <body> carries a page class, e.g. "page-genmessage", for page-specific rules. */

body { margin: 4px !important; }

/* The 2004 themes use 80% of an already small size. */
body, td { font-size: 15px !important; line-height: 1.4; }
small { font-size: 13px !important; }

/* Tables fill the screen instead of running off it; long words and URLs wrap. */
table { width: 100% !important; max-width: 100%; }
td { overflow-wrap: anywhere; word-break: break-word; }
img { max-width: 100%; height: auto; }

/* Form fields fit the screen; 16px stops iPhones zooming in when a field is tapped. */
input[type="text"], input[type="password"], input[type="email"], select, textarea {
  max-width: 100%; box-sizing: border-box; font-size: 16px !important;
}
/* Fill the cell rather than "max 100%": a size="80" box would otherwise stretch its table cell
   (and the whole page) past the screen; percentage widths don't count towards table sizing. */
input[type="text"], input[type="password"], input[type="email"], textarea { width: 100% !important; }
input[type="submit"], input[type="button"], input[type="reset"], button {
  font-size: 16px !important; padding: 8px 12px; margin: 2px;
}

/* The post form's formatting buttons are nudged right with an inline "left:10%"; on a phone
   that pushes them off the screen. */
div[style*="left:10%"] { left: 0 !important; }

/* Bigger tap targets for the menu bars. */
a.menu { display: inline-block; padding: 6px 2px; }

/* Topic pages: poster name / level / avatar above each message instead of beside it. */
.page-genmessage td { display: block; width: auto !important; }
.page-genmessage td[width="120"] { text-align: left; font-size: 13px !important; padding-top: 2px; }

/* Board list: drop the "Msgs" column (3rd) to give board names room; topics and last post stay. */
.page-index td:nth-child(3):not([colspan]) { display: none; }