/**
 * CodeStepByStep mobile-only stylesheet (loaded with media="handheld, only screen").
 *
 * Merged from three files, concatenated unchanged:
 *   1. mobile.css          - legacy Practice-It-era mobile styles. Note this section's
 *                            own @media condition uses max-device-width (800px), a
 *                            deprecated, device-screen-based query - NOT the same
 *                            trigger as the max-width (viewport-based) queries below.
 *                            Kept as-is rather than unified so this merge doesn't
 *                            silently change when these particular rules fire.
 *   2. csbs-mobile.css     - CodeStepByStep-era mobile overrides (max-width: 1023px)
 *   3. react-app-mobile.css - React frontend mobile overrides (max-width: 1023px)
 */

/* ============================================================ */
/* == mobile.css (formerly) ===================================== */
/* ============================================================ */

/*
CodeStepByStep styles for mobile devices
*/

@media only screen and (max-device-width: 800px) {
	body {
		/*margin: 0;*/
		/* margin-top: 3em; */
		padding: 2px;
	}
	
	.mobileonly {
		display: inherit;
	}
	
	.breadcrumbs {
		margin-bottom: 1em;
	}
	
	/* .columnname {
		margin-top: 1em;
	} */
	
	h1 img {
		max-width: 90%;
	}
	
	img {
		max-width: 90%;
	}
	
	#problemsarea, #centralarea, #problemsform, #problemarea, .flash {
		/*
		min-width: 90% !important;
		max-width: 95% !important;
		margin: 0 !important;
		width: 95% !important;
		*/
	}
	
	#bookimagelink {
		float: none !important;
		display: block;
		min-width: 50%;
		max-width: 95%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 1em;
	}
	
	.flashwrapper {
		margin-bottom: auto !important;
	}
	
	.helptips {
		font-size: smaller;
		margin-left: 0;
		margin-right: 0;
		max-width: 90%;
	}
	
	.inputcontainer, .inputcontainer th {
		width: auto;
	}
	
	.inputcontainer label,
	.testresultrow .problemnumber,
	.testresultrow .probleminfoheading,
	.problemresult .problemnumber,
	.problemresult .probleminfoheading {
		display: block;
		float: none;
		margin-top: 0.2em;
		text-align: left;
	}

	.inputcontainer > div {
		margin-left: 0;
	}
	
	#categories h4 {
		margin-left: 0 !important;
	}
	
	#categories ul {
		margin-left: 3pt !important;
		padding-left: 0 !important;
	}
	
	#problemarea {
		margin-right: 0 !important;
	}
	
	#solution {
		margin: 0 !important;
	}
	
	#solution,
	#linenumbers,
	.linenumbers {
		font-size: inherit;
	}
	
	#mainbodyarea {
		margin-top: 1em !important;
	}

	.problemname, .problemexpected, .problemactual {
		word-wrap: break-word !important;
	}

	.problemnavigation {
		font-size: 1em;
	}
	#topmessagesarea {
		margin-top: 0 !important;
	}
	
	.unexpectedconsoleoutput {
		margin-left: 0;
	}
	
	#userinfoarea {
		font-size: larger;
		top: 0;
	}
	
	#useractionsarea {
		font-size: larger;
		line-height: 1.5em;
	}
	
	#userinfoarea #useractionsbesideslogout,
	#controlsarea,
	.floatingsearchform,
	#likelink,
	.nonmobile {
		display: none !important;
	}
	/* #showsolutionlink, */
	
	#userinfoarea #userimagearea {
		display: inline;
		/*float: left;*/
	}
	
	#userinfoarea #logoutarea {
		display: inline;
		float: right;
	}
	
	#userinfoarea #useractionsarea {
		display: inline;
	}
	
	/* .usertext {
		display: none;
	} */
	
	.statuslabel {
		width: 6em;
	}
	
	.predescriptionrow {
		white-space: nowrap;
	}
	
	#testresults td,
	#testresults th,
	#testresults tr {
		display: block;
	}

	#testresults tr {
		margin-bottom: 1em;
	}
}

/* ============================================================ */
/* == csbs-mobile.css (formerly) ================================ */
/* ============================================================ */

@media only screen and (max-width: 1023px) {
	.topheaderarea span.search {
		position: absolute;
		left: 0;
		top: 0;
	}
	
	header .sitelogoarea {
		font-size: 1.75em;
	}
	
	.categorytoplevel .problemcount,
	.categorynested .problemcount,
	#debugbanner,
	#stagingbanner,
	.root-link > img {
		display: none;
	}
	
	/* Mechanical problems are often too wide; allow whitespace and input textfield to wrap */
	.expressiontable td {
		display: flex;
	}
	
	.expressiontable td code.expressionquestiontext,
	.testcase .probleminfoanswer code.expressionquestiontext {
		white-space: inherit;
	}
	
	/* Push the breadcrumbs down below problem prev/next nav to avoid overlap on mobile */
	.problemnavigation {
		height: 2em;
	}
	
	/* Test run results are too wide to show nicely on lowres mobile devices; show as columns instead */
	.testcase .testresultrow {
		flex-direction: column;
	}
	.testcase .probleminfoheading {
		margin-left: 0.2em;
		margin-top: 0.2em;
	}
	.testcase .probleminfoanswer {
		margin-left: 0.2em;
		margin-top: 0.2em;
	}
}

/* ============================================================ */
/* == react-app-mobile.css (formerly) =========================== */
/* ============================================================ */

@media only screen and (max-width: 1023px) {
	.Page table .spacedactions .linkwithicon .linkwithicontext {
		display: none;
	}
	.usertext {
		display: none;
	}
	#useractionsarea, #userinfoarea {
 		min-width: inherit;
	}
	#useractionsarea .usernamedisplay {
		display: block;
	}
}