/* Background simulation of the Tagtician panel in the homepage hero (js/hero-sim.js). */

.top {
	overflow: hidden;
}

.hero-sim {
	position: absolute;
	top: 50%;
	right: 2%;
	width: 47%;
	max-width: 980px;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 1;
}

.hero-sim-stage {
	transform-origin: right center;
	transform: perspective(2200px) rotateY(-8deg) rotateX(2deg);
}

/* Fades the mock into the page on the side next to the headline. */
.hero-sim::after {
	content: '';
	position: absolute;
	top: -10%;
	bottom: -10%;
	left: -2px;
	width: 22%;
	background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

@media screen and (max-width: 1100px) {
	.hero-sim {
		width: 50%;
		right: 1%;
		opacity: .85;
	}
}

/* Tablets and phones: the headline is centered over the whole hero, so there's no room.
   Skip it (hero-sim.js pauses while it's hidden). */
@media screen and (max-width: 800px) {
	.hero-sim {
		display: none;
	}
}

/* The panel mock. Sized in px at 900x560 and scaled to fit by hero-sim.js. */
.hs-window {
	position: relative;
	width: 900px;
	height: 560px;
	border-radius: 8px;
	overflow: hidden;
	background: #eeeff1;
	box-shadow: 0 30px 80px rgba(41, 46, 58, .25), 0 6px 18px rgba(41, 46, 58, .12);
	font-family: 'Roboto', Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	color: #3c3d3f;
	text-align: left;
}

.hs-devtools {
	display: flex;
	align-items: center;
	height: 30px;
	padding: 0 12px;
	background: #f3f3f3;
	border-bottom: 1px solid #d4d5d7;
	font-size: 12px;
	color: #6b6e75;
}

.hs-devtools span {
	padding: 0 12px;
	line-height: 29px;
}

.hs-devtools .active {
	color: #292e3a;
	border-bottom: 2px solid #1a73e8;
}

.hs-header {
	display: flex;
	align-items: center;
	height: 40px;
	background: #fff;
	border-bottom: 1px solid #d4d5d7;
	transition: background .5s ease;
}

.hs-logo {
	width: 22px;
	height: 22px;
	margin: 0 14px 0 12px;
	color: #292e3a;
}

.hs-search {
	flex: 1;
	color: #a1a2a4;
}

.hs-library {
	padding: 0 16px;
	line-height: 40px;
	color: #6b6e75;
	border-left: 1px solid #eeeff1;
}

.hs-env {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	min-width: 130px;
	padding: 0 18px;
	background: #292e3a;
	color: #fff;
	font-weight: 700;
	transition: background .5s ease;
}

.hs-env-clear {
	display: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .3);
	font-size: 11px;
	line-height: 16px;
	text-align: center;
	font-weight: 400;
}

/* An environment loaded by Tagtician: the header turns orange, like the extension. */
.hs-window.swapped .hs-header {
	background: #f7901e;
	border-bottom-color: #f7901e;
}

.hs-window.swapped .hs-search,
.hs-window.swapped .hs-library,
.hs-window.swapped .hs-logo {
	color: #fff;
}

.hs-window.swapped .hs-library {
	border-left-color: rgba(255, 255, 255, .3);
}

.hs-window.swapped .hs-env {
	background: #d97706;
}

.hs-window.swapped .hs-env-clear {
	display: inline-block;
}

.hs-body {
	position: relative;
	height: calc(100% - 71px);
}

.hs-build {
	padding: 22px 30px 12px;
	font-size: 11px;
	font-weight: 500;
	color: #a1a2a4;
}

.hs-rules {
	margin: 0 30px;
	background: #fff;
	box-shadow: 0 2px 6px rgba(41, 46, 58, .08);
}

.hs-rule {
	position: relative;
	display: flex;
	align-items: center;
	height: 0;
	overflow: hidden;
	padding: 0 20px 0 16px;
	border-bottom: 1px solid transparent;
	opacity: 0;
	transition: height .35s ease, opacity .35s ease, background .6s ease;
}

.hs-rule.in {
	height: 54px;
	opacity: 1;
	border-bottom-color: #eeeff1;
}

.hs-rule.flash {
	background: #e9fbf5;
}

.hs-rule.selected {
	background: #f7f8f9;
}

.hs-rule.selected::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: #292e3a;
}

.hs-check {
	flex: none;
	width: 16px;
	height: 16px;
	margin-right: 14px;
	border-radius: 50%;
	background: #04c491;
	transform: scale(0);
	transition: transform .3s cubic-bezier(.3, 1.6, .5, 1) .15s;
}

.hs-check svg {
	display: block;
	width: 16px;
	height: 16px;
}

.hs-rule.in .hs-check {
	transform: scale(1);
}

.hs-rule-name {
	font-size: 15px;
	color: #3c3d3f;
}

.hs-rule-meta {
	margin-top: 4px;
	font-size: 11.5px;
	font-weight: 500;
	color: #a1a2a4;
}

/* Detail shelf */
.hs-shelf {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 47%;
	padding: 26px 28px;
	background: #fff;
	border-left: 1px solid #d4d5d7;
	box-shadow: -8px 0 24px rgba(41, 46, 58, .08);
	transform: translateX(105%);
	transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.hs-window.shelf-open .hs-shelf {
	transform: none;
}

.hs-shelf h4 {
	margin: 0 0 18px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.15;
	color: #292e3a;
}

.hs-box {
	padding: 12px 14px;
	margin-bottom: 18px;
	border: 1px solid #d4d5d7;
}

.hs-box-title,
.hs-actions-title {
	font-weight: 700;
	color: #292e3a;
	margin-bottom: 6px;
}

.hs-kv {
	display: flex;
	padding: 4px 8px;
	border-bottom: 1px solid #eeeff1;
	font-size: 12px;
}

.hs-kv span:first-child {
	width: 45%;
	color: #6b6e75;
}

.hs-kv span:last-child {
	font-family: Menlo, Consolas, monospace;
	font-size: 11.5px;
}

.hs-step {
	position: relative;
	padding: 0 0 12px 30px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .35s ease, transform .35s ease;
}

.hs-step.in {
	opacity: 1;
	transform: none;
}

.hs-step::before {
	content: attr(data-n);
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #292e3a;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
}

.hs-step::after {
	content: '';
	position: absolute;
	left: 9.5px;
	top: 22px;
	bottom: 2px;
	width: 1px;
	background: #d4d5d7;
}

.hs-step:last-child::after {
	display: none;
}

.hs-step-name {
	line-height: 20px;
	font-weight: 500;
	color: #6b6e75;
	margin-bottom: 2px;
}

/* Toast, like the extension's brief "Saved" / "Reload to apply" notes */
.hs-toast {
	position: absolute;
	left: 50%;
	bottom: 18px;
	padding: 8px 16px;
	border-radius: 4px;
	background: #292e3a;
	color: #fff;
	font-size: 12px;
	opacity: 0;
	transform: translate(-50%, 10px);
	transition: opacity .3s ease, transform .3s ease;
}

.hs-toast.in {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Keep the headline above the mock, and on the left half where there's room for both. */
.top .messaging {
	position: relative;
	z-index: 10;
}

@media screen and (min-width: 801px) {
	.top .messaging h1,
	.top .messaging h3 {
		max-width: calc(50vw - 90px);
	}
}