/* ATel - phones and small tablets (added 2026-11-13).
 *
 * Loaded only on screens narrower than 760px:
 *   <link rel="stylesheet" href="m.css" media="screen and (max-width: 760px)">
 * so desktop browsers never use any of it.  It overrides b.css: the fixed 800px page
 * and the three-column table layout become one column at the width of the phone.
 *   Header:  only the title and menu (the two side boxes are hidden)
 *   Index:   the ATel list; the keyword list is hidden; the right-hand box at the bottom
 *   ATel:    the Telegram, then the related-ATels box
 */

/* ---- one column, at the phone's width ---- */
body {
	width: auto;
	padding-left: 8px;
	padding-right: 8px;
	font-size: 16px;
}
#telegram, #center, #right, #recently, #related, #centerheader, #lheader, #rheader {
	width: auto;
	height: auto;
}
#header { height: auto; }

/* the layout tables: show their cells one below another */
#header > table, #header > table > tbody, #header > table > tbody > tr, #header > table > tbody > tr > td,
#middle > table, #middle > table > tbody, #middle > table > tbody > tr, #middle > table > tbody > tr > td,
body > table, body > table > tbody, body > table > tbody > tr, body > table > tbody > tr > td {
	display: block;
	width: auto !important;
}
#header > table > tbody > tr, #middle > table > tbody > tr { display: flex; flex-direction: column; }
#header > table > tbody > tr > td:nth-child(2) { order: -1; }   /* title and menu first */

/* not shown on phones: the keyword list, and the two side boxes of the header
   (the header keeps only the title and menu) */
#left, #lheader, #rheader { display: none; }

/* ---- the ATel index ---- */
#center td[width] { width: auto !important; }
.cnum, .ctitle, .cauthor, .submitted, .num, .title, .author { font-size: 90%; }

/* ---- menu and header: readable, easy to tap ---- */
p.header { font-size: 90%; line-height: 1.8em; }
#header input { width: 100%; box-sizing: border-box; }

/* ---- a Telegram's own content ---- */
#telegram { font-size: 12pt; }
pre { font-size: 80%; overflow-x: auto; }                  /* wide data tables scroll sideways */
#telegram table { display: block; max-width: 100%; overflow-x: auto; }
#telegram, #center, #right { overflow-wrap: break-word; word-wrap: break-word; }

/* ---- images, adverts and forms never wider than the screen ---- */
img { max-width: 100%; height: auto; }
iframe, ins, embed, object, video { max-width: 100%; }
textarea, input[type=text], input[type=email], input[type=password], select {
	max-width: 100%;
	box-sizing: border-box;
}
#content input { width: 100%; }

/* ---- the "Recently" and "Related" boxes: full-size text (b.css uses 60-70%) ---- */
#recently, #related { font-size: 16px; }
#recently .rnum, #related .rnum, #recently .rtitle, #related .rtitle { font-size: 100%; }
#recently #rauthor, #related #rauthor { font-size: 95%; }
#recently p.boxtitle, #related p.boxtitle { font-size: 100%; }
#recently small, #related small, #recently font, #related font { font-size: inherit; }