/* Small-screen rules. Everything here sits under a max-width media query, so
   desktop rendering is untouched; the base layout files only had their fixed
   widths relaxed to max-widths. Later phases (tables, forms) add here. */

/* Below the layout's natural 926px. */
@media (max-width: 959px)
{
	/* Wide tables scroll inside the page instead of stretching it sideways.
	   Interim until tables get a small-screen layout. */
	#scll-gamesystem table
	{
		display: block;
		overflow-x: auto;
		max-width: 100%;
	}

	/* Menu: the hover-driven bar becomes a button that reveals a stacked list,
	   each group's items shown inline beneath its heading. The list is hidden
	   only once SubNav's script has tagged #subnav (.js-enabled), so it stays
	   reachable if script never runs. */
	#subnav
	{
		min-height: 0;
		padding: 0;
	}

	#nav-toggle
	{
		display: block;
		width: 100%;
		min-height: 44px;
		margin: 0;
		padding: 0 12px;
		border: 0;
		background: transparent;
		color: #dfedff;
		font: bold 14px 'trebuchet ms', sans-serif;
		text-transform: uppercase;
		text-align: left;
		cursor: pointer;
	}

	#subnav.js-enabled #submenu
	{
		display: none;
	}

	/* Since the bar is sticky, a list taller than the screen scrolls inside it
	   (button and border take 47px) instead of running off the bottom. */
	#subnav.open #submenu
	{
		display: block;
		max-height: calc(100vh - 47px);
		overflow-y: auto;
	}

	#submenu li, #submenu li li
	{
		float: none;
		width: auto;
		margin: 0;
	}

	/* 44px rows: the usual minimum touch target. */
	#submenu li a, #submenu li a:visited
	{
		font-size: 14px;
		line-height: 44px;
		padding: 0 12px;
		border-top: 1px solid #2f6ea8;
	}

	#submenu li ul
	{
		position: static;
		width: auto;
		margin: 0;
		border: 0;
	}

	#submenu ul li
	{
		background: #164b80;
	}

	#submenu ul li a, #submenu ul li a:visited
	{
		width: auto;
		padding: 0 12px 0 28px;
		line-height: 44px;
		color: #dfedff;
		text-transform: none;
		border-bottom: 0;
	}

	/* A group heading's own link only ever went to the home page; on a phone
	   it would be taken for the thing that opens the group. */
	#submenu li.has-children > a
	{
		pointer-events: none;
		opacity: 0.8;
	}

	/* The desktop hover colours are black-on-white; keep text legible here. */
	#submenu li a:hover, #submenu li:hover a
	{
		color: #fff;
	}

	#submenu li a:hover, #submenu ul li a:hover
	{
		background: #0f3a66;
	}

	/* The current page gets a lighter band with a white edge; its group heading
	   gets the band at full strength. */
	#submenu li a.current, #submenu ul li a.current
	{
		background: #2f6ea8;
		color: #fff;
		font-weight: normal;
		box-shadow: inset 4px 0 0 #fff;
	}

	#submenu li.current-group > a
	{
		opacity: 1;
	}
}

/* Phone widths. */
@media (max-width: 767px)
{
	/* The desktop gutters eat about 15% of a phone's width. */
	#content-main
	{
		padding-left: 0;
	}

	#scll-gamesystem
	{
		padding: 10px 10px 15px 10px;
	}

	/* iOS Safari zooms in on focus when a control's text is under 16px, and
	   does not zoom back out afterwards. */
	input, select, textarea
	{
		font-size: 16px;
	}

	/* Card layout for the tables people open on a phone (class="stack"): the
	   heading row is hidden and each row becomes a bordered block. A cell with
	   a data-label shows that column heading in front of its value; a cell
	   without one is a plain block. Child combinators keep nested tables
	   (team standings) rendering as tables. */
	#scll-gamesystem table.stack
	{
		overflow-x: visible;
	}

	#scll-gamesystem table.stack > thead
	{
		display: none;
	}

	#scll-gamesystem table.stack > tbody,
	#scll-gamesystem table.stack > tbody > tr,
	#scll-gamesystem table.stack > tbody > tr > td
	{
		display: block;
	}

	#scll-gamesystem table.stack > tbody > tr
	{
		display: flow-root;
		margin: 0 0 10px;
		padding: 4px 0;
		border: 1px solid #ccc;
	}

	#scll-gamesystem table.stack > tbody > tr > td
	{
		padding: 3px 6px;
		text-align: left;
	}

	#scll-gamesystem table.stack > tbody > tr > td[data-label]
	{
		position: relative;
		min-height: 1.4em;
		padding-left: 45%;
	}

	/* The label is centred on the value, which matters where the value is a
	   button taller than a line of text (the bid buttons). */
	#scll-gamesystem table.stack > tbody > tr > td[data-label]:before
	{
		content: attr(data-label);
		position: absolute;
		left: 6px;
		top: 50%;
		transform: translateY(-50%);
		width: 40%;
		font-weight: bold;
		color: #555;
	}

	#scll-gamesystem table.stack td.stack-heading
	{
		font-weight: bold;
		font-size: 1.1em;
	}

	/* Action icons (class="stack-actions" on the cell) stack in a narrow column
	   down the left of the card, with the data rows beside them, rather than
	   taking a full-width row at the top. */
	#scll-gamesystem table.stack > tbody > tr > td.stack-actions
	{
		float: left;
		width: 44px;
		padding: 0;
		text-align: center;
	}

	#scll-gamesystem table.stack > tbody > tr > td.stack-actions ~ td
	{
		margin-left: 44px;
	}

	#scll-gamesystem table.stack td.stack-actions a
	{
		display: block;
		padding: 0;
	}

	#scll-gamesystem table.stack td.stack-actions > a > img
	{
		padding: 10px 12px;
		margin: 0 auto;
	}
	/* The 16px icon buttons and image links need a finger-sized hit area. */
	#scll-gamesystem table.stack .image-button,
	#scll-gamesystem table.stack td > a > img
	{
		padding: 14px 12px;
	}

	#scll-gamesystem table.stack td > a > img
	{
		display: block;
	}

	/* Forms: labels already stack above their controls; give the controls a
	   finger-sized height and take back the desktop-sized fieldset gutters. */
	fieldset
	{
		padding: 10px;
	}

	fieldset p
	{
		margin: 2px 0 12px;
	}

	input[type="text"], input[type="password"], input[type="date"]
	{
		padding: 8px 6px;
	}

	select
	{
		max-width: 100%;
		min-height: 44px;
	}

	textarea
	{
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	input[type="checkbox"], input[type="radio"]
	{
		width: 22px;
		height: 22px;
		vertical-align: middle;
	}

	input[type="submit"]
	{
		min-height: 44px;
		padding: 0 20px;
	}

	button.link-button
	{
		padding: 10px 4px;
	}

	/* Links in running text and link lists get a taller hit area; inline-block
	   so the extra height grows the line instead of overlapping the next one. */
	#scll-gamesystem a
	{
		display: inline-block;
		padding: 6px 2px;
	}

	/* A row that details the one above it (umpire list) joins that card. */
	#scll-gamesystem table.stack > tbody > tr.stack-detail
	{
		margin-top: -10px;
		border-top: 0;
	}

	/* Umpire-list stats: each line spans the card, with the division name on its
	   own line and the figures flowing after. */
	.ump-stats
	{
		float: none;
	}

	.ump-stat
	{
		float: none;
		display: inline-block;
		width: auto;
		margin-right: 12px;
	}

	.ump-stat-name
	{
		display: block;
		font-weight: bold;
	}
}