/* Item 12 (Joel, 13 Oct): on phones, a back arrow at the start of the member header row on inner pages, LinkedIn style.
   html.smesa-mrb-back is set in <head> by 12-back-arrow.php (inner pages only, signed-in members), so this layout is in place
   before the first paint: the arrow's 44 px slot is reserved, the logo shows its mark only (the full logo and the arrow do not
   both fit beside the search pill, two icons and the photo on a 360 px phone), and the left padding moves so the arrow's icon
   starts where the logo starts on every other page. 12-back-arrow.js then puts the button in the slot, so nothing moves.
   Phones only (< 768 px); desktop, visitors and the bar destinations (Hub, Network, Inbox, own profile) are untouched. */

.sh-top .smesa-mrb-back-btn { display: none; }

@media (max-width: 767px) {
	html.smesa-mrb-back .sh-top .sh-top-in {
		padding-left: 2px;
	}
	/* the slot, until the button is in */
	html.smesa-mrb-back .sh-top .sh-top-in::before {
		content: "";
		flex: none;
		order: -1;
		width: 44px;
		height: 44px;
		margin-right: -4px;
	}
	html.smesa-mrb-back .sh-top .sh-top-in.smesa-mrb-has-back::before { content: none; display: none; }

	/* the logo becomes its mark (the left 30 px of the same image) */
	html.smesa-mrb-back .sh-top .sh-logo img {
		width: 30px !important;
		height: 34px !important;
		max-width: none;
		object-fit: cover;
		object-position: 0 50%;
	}

	/* the button: 44 x 44, navy arrow, the hub header's own hover / press colour */
	html.smesa-mrb-back .sh-top .smesa-mrb-back-btn,
	html.smesa-mrb-back .sh-top .smesa-mrb-back-btn:hover,
	html.smesa-mrb-back .sh-top .smesa-mrb-back-btn:focus,
	html.smesa-mrb-back .sh-top .smesa-mrb-back-btn:visited {
		all: unset;
		box-sizing: border-box;
		display: grid !important;
		place-items: center;
		flex: none;
		order: -1;
		width: 44px;
		height: 44px;
		margin: 0 -4px 0 0;
		border-radius: 50%;
		color: #0A2C3D !important;
		background: transparent;
		cursor: pointer;
		text-decoration: none !important;
		box-shadow: none !important;
		-webkit-tap-highlight-color: transparent;
	}
	html.smesa-mrb-back .sh-top .smesa-mrb-back-btn svg {
		display: block;
		width: 24px;
		height: 24px;
		stroke: currentColor;
		pointer-events: none;
	}
	html.smesa-mrb-back .sh-top .smesa-mrb-back-btn:active {
		background: #F7E9E9 !important;
		color: #9C1C1F !important;
	}
	html.smesa-mrb-back .sh-top .smesa-mrb-back-btn:focus-visible {
		outline: 2px solid #9C1C1F;
		outline-offset: -2px;
	}
}

@media (max-width: 767px) and (hover: hover) {
	html.smesa-mrb-back .sh-top .smesa-mrb-back-btn:hover { background: #F7E9E9 !important; }
}