/**
 * Public front-end mobile layout.
 *
 * Loaded on every page (see @layout.latte). MenuControl renders the bar and sheets this file
 * styles on the front-end, AdminMenuControl on admin pages; admin-responsive.css loads after
 * this one there and adapts only the admin's content.
 *
 * Breakpoint: 767px, matching admin-responsive.css.
 */

:root {
	/* rem, not em. These are read inside the strip, which sets a font-size of its own - in em
	   the strip's "bottom: 3.5em" came out 8px short of the bar's "height: 3.5em" and sat over
	   it, which is a hard thing to see and an easy one to measure. */
	--mobile-bar-height: 3.5rem;
	/* Zeroed by main.js wherever the contextual strip is not shown. Tall enough to be hit with
	   a thumb without aiming: the row is the control, not the chevron on the end of it. */
	--mobile-strip-height: 3.25rem;
	/* The minimum tap target the admin sheet already established. */
	--mobile-touch-target: 44px;
}

/* The bar and the scrim exist in the DOM on every front-end page; desktop never shows them. */
.mobile-bar,
.mobile-strip {
	display: none;
}

.menu-scrim {
	display: none;
}

@media screen and (max-width: 767px) {
	/* style.css floors the body at 800px and lays the page out as three side-by-side
	   columns. Below the breakpoint the floor goes and the columns stack - and both menu
	   columns leave the flow entirely for the sheets, leaving the content the whole width. */
	html,
	body {
		min-width: auto;
	}

	body {
		flex-direction: column;
		/* The strip rides on the bar, so the page clears both or its last row sits under them.
		   --mobile-strip-height is zeroed by main.js on any page without a strip. */
		padding-bottom: calc(var(--mobile-bar-height) + var(--mobile-strip-height));
	}

	body.mobile-sheet-open {
		overflow: hidden;
	}

	/* ===================================== */
	/* Bottom bar                            */
	/* ===================================== */
	/* Above the sheets it raises, so it stays tappable while one is open - that is what
	   makes switching a single tap rather than close-then-open. */
	.mobile-bar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: var(--mobile-bar-height);
		background-color: var(--dark-color);
		border-top: 2px solid var(--light-color);
		z-index: 10002;
	}

	/* Five equal slots. Four are links straight to a section; the fifth raises the sheet with
	   everything else in it. */
	.mobile-tab {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.15em;
		min-height: var(--mobile-touch-target);
		padding: 0;
		background: none;
		border: 0;
		color: var(--light-text-color);
		font-size: 0.65rem;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		text-decoration: none;
		cursor: pointer;
	}

	.mobile-tab:hover,
	.mobile-tab:focus {
		color: var(--light-text-color);
		text-decoration: none;
	}

	.mobile-tab i {
		font-size: 1.35rem;
		line-height: 1;
	}

	.mobile-tab span {
		max-width: 100%;
		padding: 0 0.2em;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	/* Where you are, and - for More - whether its sheet is up. */
	.mobile-tab.active,
	.mobile-tab[aria-expanded="true"] {
		color: var(--light-color);
	}

	.mobile-tab[aria-expanded="true"] {
		background-color: var(--main-color);
	}

	/* "Recommend" is the longest of the five and wants 78px of the 76 a fifth of a 390px phone
	   leaves it. Dropping the tracking and the side padding brings it to 64, which fits from
	   360 up; at full size it needs 410, so the compact treatment covers everything below that
	   and then some, rather than changing over in the middle of the common phone widths. */
	@media (max-width: 420px) {
		.mobile-tab {
			font-size: 0.6rem;
			letter-spacing: 0;
		}

		.mobile-tab span {
			padding: 0;
		}
	}

	/* ===================================== */
	/* Contextual strip                      */
	/* ===================================== */
	/* One line above the bar, only where a page has something to put in it. It rides on the bar
	   rather than in the flow, so the content behind it keeps the whole screen. */
	.mobile-strip {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.6em;
		position: fixed;
		bottom: var(--mobile-bar-height);
		left: 0;
		right: 0;
		min-height: var(--mobile-strip-height);
		padding: 0 0.9em;
		background-color: var(--main-color);
		border-top: 1px solid var(--border-color);
		color: var(--light-text-color);
		font-size: 0.85rem;
		/* Over the sheet it opens, so the chevron is still there to close it. */
		z-index: 10002;
		transition: transform 0.2s ease;
	}

	/* Scrolling down is reading; the strip gets out of the way and comes back the moment you
	   scroll up. The tab bar never moves - it is the one thing always in reach. */
	.mobile-strip.strip-hidden {
		transform: translateY(calc(100% + var(--mobile-bar-height)));
	}

	/* The whole row lifts the sheet, so it gets the pointer and the row's own controls sit on
	   top of it. */
	.mobile-strip {
		cursor: pointer;
	}

	.mobile-strip-content {
		display: flex;
		align-items: center;
		gap: 0.6em;
		min-width: 0;
		flex: 1;
	}

	/* A control lifted out of the column takes the width the page name would have had. The
	   column's own spacing came with it and is not wanted on a row this tight - including the
	   form's own bottom margin, which held the whole row off centre and made the strip taller
	   than what was in it. */
	.strip-primary {
		display: flex;
		align-items: center;
		flex: 1;
		min-width: 0;
		margin: 0;
		padding: 0;
	}

	.strip-primary form,
	.strip-primary ul,
	.strip-primary p {
		margin: 0;
	}

	/* The paging tiles are 5.25em squares in the column. On the strip they are a row of controls
	   beside everything else, so they lose the tile and keep the target. */
	.strip-primary.submenu-pagination {
		display: flex;
		align-items: center;
		gap: 0.15em;
	}

	.strip-primary.submenu-pagination ul {
		display: flex;
		flex: 1;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.strip-primary.submenu-pagination li.big {
		flex: 1;
		width: auto;
		height: auto;
		padding: 0;
	}

	.strip-primary.submenu-pagination li.big a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: var(--mobile-touch-target);
		background: none;
	}

	.strip-primary.submenu-pagination li.big a i {
		font-size: 1.2rem;
	}

	.strip-primary.submenu-pagination .submenu-page-count {
		flex-shrink: 0;
		padding: 0 0.2em;
		font-size: 0.75rem;
		white-space: nowrap;
	}

	/* The labelled pager (submenuPaginationWide) is two half-width tiles in the column. Lifted
	   onto the strip it is outside .submenu, so none of the tile rules reach it; here it is two
	   flat buttons, the arrow beside the word, the same target as the icon squares above. */
	.strip-primary.submenu-pagination li.wide-half {
		flex: 1;
		width: auto;
		height: auto;
		padding: 0;
	}

	.strip-primary.submenu-pagination li.wide-half a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.35em;
		min-height: var(--mobile-touch-target);
		color: var(--light-text-color);
		text-decoration: none;
	}

	.strip-primary.submenu-pagination li.wide-half a.disabled {
		opacity: 0.35;
	}

	.strip-primary.submenu-pagination li.wide-half a i {
		font-size: 1.2rem;
	}

	.strip-primary.submenu-pagination li.wide-half a p {
		margin: 0;
		font-size: 0.8rem;
		font-weight: bold;
	}

	/* The search and guess boxes keep their split, just without the column's padding. */
	.strip-primary.action form {
		display: flex;
		align-items: stretch;
		flex: 1;
		min-width: 0;
	}

	/* One height for the pair, in rem. In em they came out different sizes: height resolves
	   against the element's own font-size, the field carries an explicit 16px so a phone does
	   not zoom the page when it takes focus, and the button was inheriting the strip's smaller
	   one. On desktop both sit at 16px, which is why the button only looked short here. */
	.strip-primary.action .submenu-input,
	.strip-primary.action .submenu-button {
		height: 2.75rem;
		box-sizing: border-box;
	}

	.strip-primary.action .submenu-input {
		flex: 1;
		min-width: 0;
		width: auto;
		padding-left: 0.6em;
		float: none;
	}

	.strip-primary.action .submenu-button {
		flex-shrink: 0;
		width: auto;
		padding: 0 0.9em;
		font-size: 0.9rem;
	}

	.mobile-strip-summary {
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.mobile-strip-summary b {
		color: var(--button-main-color);
	}

	/* A page's own action - "Bring back" while seeding, the other shelf in the catalogue. Beside
	   the opener, never instead of it, and the same target as everything else on the row: at
	   2.4em it was 33px, which is a thing you aim at rather than press. */
	.mobile-strip-action {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		min-height: var(--mobile-touch-target);
		padding: 0 0.9em;
		background: none;
		border: 1px solid var(--light-color);
		color: var(--light-color);
		font-size: inherit;
		font-weight: bold;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
	}

	.mobile-strip-action:hover,
	.mobile-strip-action:focus {
		background-color: var(--light-color);
		color: var(--dark-color);
		text-decoration: none;
	}

	/* The opener. A word for what is up there and a chevron for the fact that it lifts - the
	   chevron is what makes the row read as a sheet you can pull up rather than a status line. */
	.mobile-strip-open {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0.4em;
		flex-shrink: 0;
		min-height: var(--mobile-touch-target);
		padding: 0 0.2em 0 0.8em;
		background: none;
		border: 0;
		color: var(--light-color);
		font-size: inherit;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		white-space: nowrap;
		cursor: pointer;
	}

	.mobile-strip-open i {
		font-size: 1.1em;
		transition: transform 0.2s ease;
	}

	/* Pointing back down once it is up, which is also how you put it away. */
	.mobile-strip-open[aria-expanded="true"] i {
		transform: rotate(180deg);
	}

	/* ===================================== */
	/* Scrim                                 */
	/* ===================================== */
	/* Clears .cookie-consent (z-index 9999) but stays under the bar, so a tap on the bar
	   reaches the bar and a tap on the dimmed page closes. */
	.menu-scrim {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 35, 71, 0.6);
		z-index: 10000;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.25s ease, visibility 0s linear 0.25s;
	}

	body.mobile-sheet-open .menu-scrim {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.25s ease, visibility 0s;
	}

	/* ===================================== */
	/* The two sheets                        */
	/* ===================================== */
	/* .menu and .submenu are siblings in the body, so each becomes its own sheet in the
	   same place rather than needing a shared wrapper. Height is left to the content:
	   .menu keeps align-self:flex-start from the desktop rail, and for a fixed flex child
	   that means shrink-to-fit, which is what a bottom sheet wants anyway. */
	.menu,
	.submenu {
		position: fixed;
		/* top:auto explicitly - .menu carries top:0 from the sticky desktop rail, and with
		   both edges pinned it would anchor to the top of the screen and grow downwards
		   instead of sitting on the bar. */
		top: auto;
		/* Above the strip, not over it. Sharing the bar's offset put the sheet on top of the
		   control that opened it - at the same z-index and later in the document - so there was
		   nothing left to tap to put it away again. */
		bottom: calc(var(--mobile-bar-height) + var(--mobile-strip-height));
		left: 0;
		right: 0;
		width: auto;
		height: auto;
		max-height: 70vh;
		overflow-y: auto;
		z-index: 10001;
		background-color: var(--dark-color);
		border-top: 2px solid var(--light-color);
		transform: translateY(100%);
		visibility: hidden;
		/* visibility is held back until the slide-out finishes, but flips the instant the
		   sheet opens. Transitioning it like the transform would leave the panel formally
		   invisible for the whole rise, and an invisible element cannot take focus. */
		transition: transform 0.25s ease, visibility 0s linear 0.25s;
	}

	/* The rail's own background is --dark-color and its items are transparent, so the
	   shared rule above suits it. The submenu is the other way round: its tiles and its
	   buttons are --dark-color blocks, which on a --dark-color sheet lost every edge and
	   read as loose text. It keeps the --main-color column background it has on desktop,
	   and the tiles stand out against it there exactly as they do here. */
	.submenu {
		background-color: var(--main-color);
	}

	.menu.sheet-open,
	.submenu.sheet-open {
		transform: translateY(0);
		visibility: visible;
		transition: transform 0.25s ease, visibility 0s;
	}

	/* ===================================== */
	/* The roll                              */
	/* ===================================== */
	/* Each row rises and fades a beat behind the one above it, so the list reads as rolling
	   up into place rather than arriving whole. Driven by nth-child rather than an index
	   written into the markup: the submenu items come from a SubMenuControl template in each
	   of a dozen modules, and none of them would carry one. */
	.menu > ul > *,
	.submenu .submenu-inner > * > * {
		opacity: 0;
		transform: translateY(0.6em);
		transition: opacity 0.18s ease, transform 0.18s ease;
	}

	.menu.sheet-open > ul > *,
	.submenu.sheet-open .submenu-inner > * > * {
		opacity: 1;
		transform: translateY(0);
	}

	.menu.sheet-open > ul > *:nth-child(1),
	.submenu.sheet-open .submenu-inner > * > *:nth-child(1) {
		transition-delay: 0.06s;
	}
	.menu.sheet-open > ul > *:nth-child(2),
	.submenu.sheet-open .submenu-inner > * > *:nth-child(2) {
		transition-delay: 0.085s;
	}
	.menu.sheet-open > ul > *:nth-child(3),
	.submenu.sheet-open .submenu-inner > * > *:nth-child(3) {
		transition-delay: 0.11s;
	}
	.menu.sheet-open > ul > *:nth-child(4),
	.submenu.sheet-open .submenu-inner > * > *:nth-child(4) {
		transition-delay: 0.135s;
	}
	.menu.sheet-open > ul > *:nth-child(5),
	.submenu.sheet-open .submenu-inner > * > *:nth-child(5) {
		transition-delay: 0.16s;
	}
	.menu.sheet-open > ul > *:nth-child(6),
	.submenu.sheet-open .submenu-inner > * > *:nth-child(6) {
		transition-delay: 0.185s;
	}
	.menu.sheet-open > ul > *:nth-child(7),
	.submenu.sheet-open .submenu-inner > * > *:nth-child(7) {
		transition-delay: 0.21s;
	}
	.menu.sheet-open > ul > *:nth-child(8),
	.submenu.sheet-open .submenu-inner > * > *:nth-child(8) {
		transition-delay: 0.235s;
	}
	.menu.sheet-open > ul > *:nth-child(9),
	.submenu.sheet-open .submenu-inner > * > *:nth-child(9) {
		transition-delay: 0.26s;
	}
	.menu.sheet-open > ul > *:nth-child(10),
	.submenu.sheet-open .submenu-inner > * > *:nth-child(10) {
		transition-delay: 0.285s;
	}
	.menu.sheet-open > ul > *:nth-child(11),
	.submenu.sheet-open .submenu-inner > * > *:nth-child(11) {
		transition-delay: 0.31s;
	}
	.menu.sheet-open > ul > *:nth-child(12),
	.submenu.sheet-open .submenu-inner > * > *:nth-child(12) {
		transition-delay: 0.335s;
	}

	/* Past the ladder everything shares the last step, so a long list still finishes. */
	.menu.sheet-open > ul > *:nth-child(n+13),
	.submenu.sheet-open .submenu-inner > * > *:nth-child(n+13) {
		transition-delay: 0.335s;
	}

	/* ===================================== */
	/* Menu sheet contents                   */
	/* ===================================== */
	.menu li {
		height: auto;
	}

	.menu a {
		/* The rail sizes its links to a fixed-height li; here they size to their own text,
		   floored at a tap target. Without dropping the inherited height:100% the first link
		   stretches over the whole sheet once the sheet has a definite height. */
		height: auto;
		text-align: left;
		padding: 0.85em 1em;
		min-height: var(--mobile-touch-target);
		border-right: none;
		border-bottom: 1px solid var(--main-color);
	}

	/* The desktop submenu-collapse toggle; there is no side column to collapse here. */
	.menu .menuToggle {
		display: none;
	}

	/* ===================================== */
	/* Page sheet contents                   */
	/* ===================================== */
	/* Static, so the top submenu-scroll.js writes while sticky has no effect.
	   overflow:hidden stays - it is what contains the floated items. */
	.submenu-inner {
		position: static;
	}

	/* The item widths are absolute fractions of the 21em column. wide-all alone is 336px,
	   already wider than a 320px phone, so in the sheet they go proportional. */
	.submenu li.wide-all,
	.submenu li.wide-all-small,
	.submenu .flash {
		width: 100%;
	}

	.submenu li.wide-half {
		width: 50%;
	}

	.submenu li.wide-third {
		width: 33.333%;
	}

	/* Legacy flyout anchored at left:100% of the side column. */
	.submenu .popup {
		display: none;
	}

	/* The consent bar is fixed to the bottom of the viewport, which is now where the bar
	   is; without this the bar covers its Accept button and it cannot be dismissed. */
	.cookie-consent {
		bottom: var(--mobile-bar-height);
	}

	/* ===================================== */
	/* Content sized for a desktop column    */
	/* ===================================== */
	.content-inner {
		padding: 1em;
	}

	/* .content is a column flex container, so its children take flex's automatic minimum
	   size: they refuse to shrink below their min-content width and push the page sideways
	   however narrow the column gets. */
	.content > * {
		min-width: 0;
	}

	/* width, not just max-width: a percentage max-width is ignored when the browser works
	   out an element's intrinsic contribution, so a declared 40em keeps widening whatever
	   contains it even while the element itself is capped. */
	.btn-main,
	.form-row input[type="submit"] {
		width: 100%;
		max-width: 100%;
	}

	/* Its margin:0 auto opts the form out of the flex stretch, leaving it fit-content. */
	.base-form {
		width: 100%;
	}

	/* The form rows put a 19em label beside a 19em field - 608px of unwrappable min-content
	   before padding. Stacked and full-width, they fit any phone. */
	.form-row label,
	.form-row select,
	.form-row input[type="text"],
	.form-row input[type="email"],
	.form-row input[type="password"],
	.form-row input[type="date"],
	.form-row input[type="file"] {
		display: block;
		float: none;
		width: 100%;
	}

	/* Every other rule in style.css that declares a width wider than a phone. Without these
	   the page still scrolls sideways. Known offenders, not an audit. */
	.feed-row,
	.blog-detail {
		width: 100%;
	}

	.vote li a {
		min-width: 0;
		max-width: 100%;
	}

	.texy-editor,
	.watched-episode-link,
	.calendar .item,
	.calendar .calendar-item {
		min-width: 0;
	}

	/* ===================================== */
	/* Title pages                           */
	/* ===================================== */
	/* The hero drops its poster - the backdrop already shows the artwork, and a 300px float is
	   most of a phone - and the light panel loses the desktop's two ems of padding. The facts
	   grid and the button rows were indented to line up with the heading's padding, which is
	   more than a phone's column can spare. */
	.video.title-hero {
		padding: 8em 1em 1em;
	}

	.title-hero img.poster {
		display: none;
	}

	.video .title-hero-context,
	.title-facts,
	.title-links,
	.title-hero-actions {
		padding-left: 0;
	}

	.content-detail.title-page {
		padding: 1em;
	}

	.title-page .content {
		padding: 1em 0.75em;
	}

	/* Four stat cards two abreast rather than one under another: the panel is 334px wide
	   inside its padding, two pixels short of what the 160px minimum needs. */
	.title-page .stats-overview {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
}

@media screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.menu,
	.submenu,
	.menu-scrim,
	.menu.sheet-open,
	.submenu.sheet-open,
	body.mobile-sheet-open .menu-scrim {
		transition: none;
	}

	/* No rise, no stagger - the rows are simply there. The delays have to go too, or the
	   list would still appear a row at a time, just without the movement. */
	.menu > ul > *,
	.submenu .submenu-inner > * > *,
	.menu.sheet-open > ul > *,
	.submenu.sheet-open .submenu-inner > * > * {
		opacity: 1;
		transform: none;
		transition: none;
		transition-delay: 0s;
	}
}