/*
	CSG Dark - mediaqueries.css

	Loaded after global.css. Breakpoints are in px on purpose: they describe
	the physical viewport, not the type scale, and the type scale is already
	handled by the html font-size ladder at the top of global.css.

	The root ladder does most of the work on the way up, so there is very
	little here for big screens. Everything below is about the way down.
*/

/* A post's author rail stops being a rail once there is no room beside it. */
@media only screen and (max-width: 900px) {
	.post { display: block; }
	.post .post_author {
		flex: none;
		max-width: none;
		width: auto;
		border-right: 0;
		border-bottom: 1px solid var(--edge);
		display: flex;
		align-items: center;
		gap: 0.75rem;
		flex-wrap: wrap;
	}
	.post .post_author div.author_avatar { margin: 0; }
	.post .post_author div.author_avatar img { max-height: 2.75rem; width: auto; }
	.post .post_author div.author_information { flex: 1 1 12.5rem; }
	.post .post_author div.author_statistics {
		flex: 1 1 100%;
		margin-top: 0;
		padding-top: 0.5rem;
	}
	.post .post_content { display: block; }

	/*
		User CP, Private Messages and Mod CP are laid out with a plain unclassed
		two-column table: rail on the left, page on the right. Below this width
		there is no room for a rail beside the page, so the cells stack. Real
		data tables all carry .tborder, so they are not caught by this.
	*/
	#content > table:not([class]),
	#content > table:not([class]) > tbody,
	#content > table:not([class]) > tbody > tr,
	#content > table:not([class]) > tbody > tr > td {
		display: block;
		width: auto !important;
	}
	/* The table box has to go too. Left as display:table it sizes to its
	   widest child, and the stacked cells then push the body sideways. */
	#content > table:not([class]) { max-width: 100%; }
	#content > table:not([class]) > tbody > tr > td { padding-left: 0; padding-right: 0; }

	.modqueue_controls { float: none; width: 100%; }
	.pmspace { float: none; margin: 0.375rem 0 0; display: block; }
}

@media only screen and (max-width: 760px) {
	body { font-size: 0.8125rem; }
	/* Same tighter gutter the stats sheet drops to on a phone. */
	#logo > .wrapper,
	#panel .upper > .wrapper,
	#panel .lower > .wrapper,
	#footer > .wrapper,
	#content { padding-left: 0.75rem; padding-right: 0.75rem; }

	#logo > .wrapper { gap: 0.625rem; }
	#logo img { height: 2rem; }
	#search { width: 100%; margin-left: 0; order: 3; }
	#search form { width: 100%; }
	#search .textbox { flex: 1 1 auto; }
	ul.top_links { width: 100%; margin-left: 0; order: 4; gap: 0.75rem; }

	/* The nav becomes a row of equal cells rather than a ragged strip. */
	#panel .lower ul.menu li { flex: 1 1 auto; }
	#panel .lower ul.menu li a {
		text-align: center;
		padding: 0.5rem;
		font-size: 0.625rem;
	}

	.thead { font-size: 0.75rem; padding: 0.625rem 0.75rem; }
	th, td { padding: 0.5rem 0.625rem; }

	.post .post_head { padding: 0.5rem 0.75rem; }
	.post_body, .post_content .post_body { padding: 0.75rem; }
	.post .post_meta, .post_content .signature { margin-left: 0.75rem; margin-right: 0.75rem; }
	.post_controls { padding: 0.5rem 0.75rem; }
	.postbit_buttons.post_management_buttons { margin-left: 0; }

	#footer .upper, #footer .lower { gap: 0.625rem; }
	#footer ul.bottom_links { margin-left: 0; }
}

@media only screen and (max-width: 480px) {
	/* Below this the avatar is costing more width than it is worth. */
	.post .post_author div.author_avatar { display: none; }
	.postbit_buttons > a { padding: 0.3125rem 0.4375rem; }
	.pagination a, .pagination .pagination_current { padding: 0.3125rem 0.5rem; }
	blockquote, .codeblock { margin-left: 0; margin-right: 0; }
}

/* ==================================================== TEMPLATE SET ======= */
/*
	Visibility rules the FunkyOne template set depends on. Its markup ships a
	desktop copy and a phone copy of several blocks and relies on the
	stylesheet to hide whichever one does not apply. Without these the board
	shows both at once - which is why the forum rows read their last post
	twice.

	Ported from behaviour, not copied: FunkyOne's own mediaqueries.css belongs
	to that theme and is untouched.
*/

/* The forum row's phone layout. Hidden once there is room for the columns. */
@media only screen and (min-width: 767px) {
	.fdleft { display: none; }
	.lpmob { width: 100%; }
}

/* .hide marks desktop-only chrome: labels, the welcome text, nav wording. */
@media only screen and (max-width: 767px) {
	.hide { display: none !important; }
}
@media only screen and (max-width: 640px) {
	.navh, .ava { display: none; }
}

/* The servers board has a wide table and a compact card version. */
@media only screen and (max-width: 600px) {
	div.hidesb { display: none; }
	div.showsb { display: block; }
}

/* Below this the 90% gutter costs more than it gives. */
@media only screen and (max-width: 983px) {
	#mainwidth, .mwrapper { width: 100%; padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* The old set puts the nav in #cssmenu; stack it like the stock one. */
@media only screen and (max-width: 760px) {
	#cssmenu > ul > li { flex: 1 1 auto; }
	#cssmenu > ul > li > a { text-align: center; padding: 0.5rem; }
	.logo1 .erb-image-wrapper.logo img, .logo1 img.img25 { max-width: 14rem; }
	.quicksearch form { justify-content: flex-start; }
	input.searchbox { flex: 1 1 auto; }
	.section.group { gap: 0.75rem; }
	/*
		The template's phone-only shop link stays hidden. It existed because
		the old theme collapsed the nav behind a toggle; CSG Dark stacks
		#cssmenu instead, so its SHOP item is already on screen here and a
		second, unstyled white-backed one only duplicated it.
	*/
}

/* ==================================================== DEVICE RANGE ======= */
/*
	The root ladder in global.css does the scaling; these are the places where
	the layout itself has to change rather than just grow.

	The FunkyOne templates carry their own inline breakpoints at 990 and 640
	for the column split and the logo, so those widths are deliberately left
	alone - fighting them would produce two rules disagreeing about the same
	element.
*/

/* Tablet landscape: the nav is still a rail but the labels need the room. */
@media only screen and (min-width: 761px) and (max-width: 1100px) {
	#cssmenu > ul > li > a { padding-left: 0.625rem; padding-right: 0.625rem; }
	.logo1 .erb-image-wrapper.logo img, .logo1 img.img25 { max-width: 20rem; }
	input.searchbox { flex: 0 1 11rem; }
}

/* Tablet portrait: the sidebar has already stacked under the main column by
   here, so the cards get the full width and the social row can breathe. */
@media only screen and (max-width: 900px) {
	.space_auto > a.fb, .space_auto > a.yt, .space_auto > a.insta,
	.space_auto > a.env, .space_auto > a.rss { flex: 1 1 3.5rem; }
	#shoutbox .window { height: 13rem !important; }
}

/* Phones: the chat needs its name column back or long names eat the message. */
@media only screen and (max-width: 560px) {
	#shoutbox .entry {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "avatar user info" "avatar text text";
		row-gap: 0.125rem;
		align-items: baseline;
	}
	#shoutbox .user {
		max-width: none;
		border-right: 0;
		padding-right: 0;
	}
	#shoutbox .avatar { align-self: start; }
	#shoutbox .window { height: 14rem !important; }
	.popupsmilesbyanonshare .popuptextbyanon { width: 14rem; left: 0; }
	#smilies_box { grid-template-columns: repeat(6, 1fr); }

	table.trowm > tbody > tr { flex-wrap: wrap; }
	table.trowm a.white { font-size: 0.625rem; }
}

/* Small phones. */
@media only screen and (max-width: 400px) {
	#smilies_box { grid-template-columns: repeat(5, 1fr); }
	.popupsmilesbyanonshare .popuptextbyanon { width: 12rem; }
	#cssmenu > ul > li > a { padding: 0.4375rem 0.375rem; font-size: 0.5625rem; }
}