/*
   Fluid-layout overrides for narrow screens (phones / small windows).
   The base layout is fixed at 939px (#main in layout.css); below ~1000px these
   rules let it shrink to the screen width instead of forcing a horizontal
   scrollbar. Desktop rendering (>= 1000px) is completely unaffected.
*/

@media (max-width: 999px) {

	/* let the fixed 939px page shell shrink to the viewport.
	   NO overflow property here, of any kind: the fixed/sticky countdown
	   clock lives inside #main, and ANY overflow value except visible on an
	   ancestor (hidden, auto, even clip) makes Firefox's async scrolling
	   (APZ) lose the clock's pinned annotation - the compositor then scrolls
	   the clock away and the main thread snaps it back every ~250px of
	   scroll (its displayport margin), which looks like the clock
	   oscillating. Wide-content safety is instead handled by the
	   table-linearisation and img/max-width rules below. */
	#main {
		width: auto;
		max-width: 100%;
		padding-left: 10px;
		padding-right: 10px;
	}

	/* header logo + banner: stack instead of floating side by side */
	#header .col-1,
	#header .col-2,
	#header-inner .col-1,
	#header-inner .col-2 {
		float: none;
		width: auto;
	}

	/* scale down question/diagram images instead of overflowing */
	img {
		max-width: 100%;
		height: auto;
	}

	/* the banner div is fixed at 158px to match its image's natural height;
	   once the image scales down (rule above), the fixed height would leave
	   dead whitespace below it - let the banner hug its content instead */
	#header .banner,
	#header-inner .banner {
		height: auto;
	}

	/* Linearise layout tables: stack cells vertically instead of side by side.
	   This is what actually stops the page being wider than the screen -
	   "img { max-width:100% }" does NOT shrink images inside auto-layout table
	   cells (the cell still grows to the image's intrinsic width), so the
	   450-600px question images were forcing a wide minimum layout. As blocks,
	   every question, image and answer option stacks within the screen width. */
	#main table,
	#main tbody,
	#main tr,
	#main td {
		display: block;
		width: auto !important;
		max-width: 100%;
		text-align: left !important;
	}

	/* form fields never wider than the screen */
	input, select, textarea {
		max-width: 100%;
	}

	/* countdown clock: its position:fixed has no coordinates, so it sits at its
	   static spot in the right-hand table column - off-screen on phones. Pin it
	   to the top-right corner of the viewport instead. The !important flags are
	   needed to beat the inline style on the free test's clock div. */
	#clock {
		position: fixed !important;
		top: 8px !important;
		bottom: auto !important;
		/* pinned top-right to match the clock's desktop position. Positioned
		   with insets only, never left:50% + translateX(-50%): a transform on
		   a position:fixed element takes a separate compositor path, and
		   Firefox's async scrolling (APZ) makes it lag and snap ("oscillate")
		   during touch/RDM scrolling. */
		left: auto !important;
		right: 8px !important;
		margin: 0 !important;
		width: -moz-max-content;
		width: max-content;
		height: auto !important;
		padding: 2px 8px !important;
		background: #ffffff;
		border: 1px solid #cccccc;
		border-radius: 4px;
		font-size: 20px !important;
		z-index: 1000;
	}
}