/**
 * The branding guide.
 *
 * Built to branding-guide-modal-mockup.html.
 *
 * The controls inside are copies of the product page's — the same size table,
 * swatches, branding table and summary — so the guide reads as the interface
 * it describes. They are defined here rather than reused from tsd-product.css
 * because that stylesheet only loads on a product page, and the guide can be
 * placed anywhere.
 */

/* ==========================================================================
   1. THE BUTTONS
   ========================================================================== */

/* The wrapper only exists to carry the tokens, so it must not affect layout. */
.tsd-hg-wrap { display: inline-block; line-height: 0; }

/* The button. In a theme that styles every button, so it is forced. */
.tsd-hg-btn.tsd-hg-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	height: 40px !important;
	min-height: 0 !important;
	padding: 0 16px !important;
	background: #fff !important;
	border: 1.5px solid var(--tsd-line) !important;
	border-radius: var(--tsd-radius-sm) !important;
	box-shadow: none !important;
	font-family: var(--tsd-font-d) !important;
	font-weight: 600 !important;
	font-size: 13.5px !important;
	text-transform: uppercase !important;
	letter-spacing: .03em !important;
	color: var(--tsd-ink) !important;
	cursor: pointer;
	transition: .15s;
	width: auto !important;
	float: none !important;
}
.tsd-hg-btn.tsd-hg-btn:hover {
	border-color: var(--tsd-green) !important;
	color: var(--tsd-green-600) !important;
}

/* ==========================================================================
   2. THE MODAL
   ========================================================================== */

.tsd-hg[hidden] { display: none; }
.tsd-hg {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.tsd-hg__scrim { position: absolute; inset: 0; background: rgba(33, 33, 33, .55); }

/* the page behind must not scroll while it is open */
body.tsd-hg-open { overflow: hidden; }

/* Fixed height, not fitted to content: each step carries a different amount,
   and resizing as someone moves through makes the buttons jump under the
   cursor. The body scrolls if a step needs more room. */
.tsd-hg__modal {
	position: relative;
	width: min(760px, 100%);
	/* Taller than it needs for most steps, because the alternative is the
	   busiest one scrolling for the sake of a few pixels. 830 is what step 4
	   needs — it is the tallest, at 624px of content plus the header, steps
	   and footer. Still fixed, so the buttons do not move as someone goes
	   through. */
	height: 830px;
	max-height: calc(100vh - 48px);
	background: #fff;
	border-radius: var(--tsd-radius);
	box-shadow: 0 8px 30px rgba(33, 33, 33, .18);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* ---------- header ---------- */
.tsd-hg__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px 24px;
	background: var(--tsd-dark);
	color: #fff;
	flex-shrink: 0;
}
.tsd-hg__ic {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 9px;
	background: var(--tsd-green);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
/* Forced: the theme styles headings and paragraphs with !important, so on a
   dark header these rendered dark on dark. */
.tsd-hg__head h2.tsd-hg__head h2,
.tsd-hg__head h2 {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--tsd-font-d) !important;
	font-weight: 700 !important;
	font-size: 21px !important;
	line-height: 1.15 !important;
	text-transform: uppercase !important;
	letter-spacing: .02em !important;
	color: #fff !important;
}
.tsd-hg__head p {
	margin: 3px 0 0 !important;
	padding: 0 !important;
	font-family: var(--tsd-font-b) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	/* lighter than the old #b9bec2, which was thin against the dark */
	color: #d4d7d9 !important;
}
.tsd-hg__x.tsd-hg__x {
	margin-left: auto;
	width: 34px !important;
	height: 34px !important;
	min-height: 0 !important;
	padding: 0 !important;
	flex-shrink: 0;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: var(--tsd-radius-sm) !important;
	color: #cfd2d4 !important;
	font-size: 22px !important;
	line-height: 1 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.tsd-hg__x.tsd-hg__x:hover { background: rgba(255, 255, 255, .12) !important; color: #fff !important; }

/* ---------- progress ---------- */
.tsd-hg__steps {
	display: flex;
	background: var(--tsd-bg);
	border-bottom: 1px solid var(--tsd-line);
	flex-shrink: 0;
}
.tsd-hg__step.tsd-hg__step {
	flex: 1;
	position: relative;
	height: auto !important;
	min-height: 0 !important;
	padding: 11px 8px !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-align: center !important;
	font-family: var(--tsd-font-b) !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: .04em !important;
	color: var(--tsd-muted-2) !important;
	cursor: pointer;
	transition: .15s;
}
.tsd-hg__step:not(:last-child)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 18px;
	background: var(--tsd-line);
}
.tsd-hg__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--tsd-line);
	color: var(--tsd-muted);
	font-size: 11px;
	font-weight: 700;
	transition: .15s;
}
.tsd-hg__step.is-on.is-on { background: #fff !important; color: var(--tsd-ink) !important; }
.tsd-hg__step.is-on .tsd-hg__n { background: var(--tsd-green); color: #fff; }
.tsd-hg__step.is-done.is-done { color: var(--tsd-muted) !important; }
.tsd-hg__step.is-done .tsd-hg__n { background: var(--tsd-green-tint); color: var(--tsd-green-600); }

/* ---------- body ---------- */
.tsd-hg__body { flex: 1 1 auto; min-height: 0; padding: 24px; overflow-y: auto; overflow-x: hidden; }
.tsd-hg__pane { display: none; }
.tsd-hg__pane.is-on { display: block; }

.tsd-hg__title { margin-bottom: 6px; font-family: var(--tsd-font-d); font-weight: 700; font-size: 22px; line-height: 1.2; }
.tsd-hg__lead { margin: 0 0 20px; font-size: 14.5px; color: var(--tsd-muted); line-height: 1.6; }
.tsd-hg__lead b { color: var(--tsd-ink); font-weight: 600; }
.tsd-hg__sub {
	margin-bottom: 9px;
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--tsd-muted);
}

/* the live control, framed so it reads as "this is on your screen" */
.tsd-hg__demo {
	position: relative;
	margin-bottom: 18px;
	padding: 18px;
	background: var(--tsd-bg);
	border: 1px solid var(--tsd-line);
	border-radius: var(--tsd-radius);
}
.tsd-hg__demo::before {
	content: attr(data-label);
	position: absolute;
	top: -9px;
	left: 14px;
	padding: 1px 10px;
	background: #fff;
	border: 1px solid var(--tsd-line);
	border-radius: 20px;
	font-size: 10.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--tsd-muted-2);
}

/* a note under a control */
.tsd-hg__tip {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin-bottom: 14px;
	padding: 11px 13px;
	background: var(--tsd-green-tint);
	border: 1px solid var(--tsd-green-line);
	border-radius: var(--tsd-radius-sm);
	font-size: 13px;
	color: #2c5c25;
	line-height: 1.5;
}
.tsd-hg__tip svg { flex-shrink: 0; margin-top: 1px; color: var(--tsd-green-600); }
.tsd-hg__tip.is-warn { background: var(--tsd-amber-bg); border-color: var(--tsd-amber-line); color: #7a4a00; }
.tsd-hg__tip.is-warn svg { color: var(--tsd-amber); }
.tsd-hg__tip b { font-weight: 600; }

/* ---------- footer ---------- */
.tsd-hg__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 24px;
	border-top: 1px solid var(--tsd-line);
	background: #fff;
	flex-shrink: 0;
}
.tsd-hg__dots { display: flex; gap: 6px; margin-right: auto; }
.tsd-hg__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tsd-line); transition: .15s; }
.tsd-hg__dot.is-on { width: 22px; border-radius: 4px; background: var(--tsd-green); }

/* ==========================================================================
   3. THE CONTROLS INSIDE
   ========================================================================== */

/* colour swatches */
.tsd-hg__demo .tsd-hg-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.tsd-hg__demo .tsd-hg-swatch.tsd-hg-swatch {
	position: relative;
	width: 40px !important;
	height: 40px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: var(--swatch, #ccc) !important;
	box-shadow: 0 0 0 1px var(--tsd-line) !important;
	cursor: pointer;
	transition: .12s;
}
.tsd-hg__demo .tsd-hg-swatch:hover { transform: scale(1.06); }
.tsd-hg__demo .tsd-hg-swatch.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tsd-green) !important; }
.tsd-hg__demo .tsd-hg-swatch.is-on::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 47%;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -50%) rotate(45deg);
}






/* buttons shown as examples — they are not clickable, so they are not buttons */
.tsd-hg__fakebtn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	margin-top: 14px;
	padding: 0 22px;
	background: var(--tsd-dark);
	border-radius: var(--tsd-radius-sm);
	color: #fff;
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 15.5px;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.tsd-hg__fakebtn.is-green { background: var(--tsd-green); }
.tsd-hg__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tsd-hg__actions .tsd-hg__fakebtn { margin-top: 0; }

/* the branding summary */
.tsd-hg__summary { background: #fff; border: 1px solid var(--tsd-green-line); border-radius: var(--tsd-radius); overflow: hidden; }
.tsd-hg__sumhead {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	background: var(--tsd-green-tint);
	border-bottom: 1px solid var(--tsd-green-line);
	font-family: var(--tsd-font-d);
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--tsd-green-600);
}
.tsd-hg__sumhead svg { color: var(--tsd-green-600); }
.tsd-hg__sumbody { padding: 14px 16px; }
.tsd-hg__sumrow { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 13.5px; color: #3a3d40; }
.tsd-hg__sumrow .v { font-weight: 600; color: var(--tsd-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tsd-hg__sumrow.is-total {
	margin-top: 9px;
	padding-top: 12px;
	border-top: 2px solid var(--tsd-green);
	font-family: var(--tsd-font-d);
	font-weight: 700;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--tsd-ink);
}
.tsd-hg__sumrow.is-total .v { font-size: 22px; color: var(--tsd-green-600); }

/* ==========================================================================
   4. PHONES

   The modal fills the screen. 100dvh rather than 100vh, because with vh the
   footer sits behind the browser's address bar.
   ========================================================================== */

@media screen and (max-width: 640px) {
	.tsd-hg { padding: 0; align-items: stretch; }
	.tsd-hg__modal {
		width: 100%;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		border-radius: 0;
	}

	.tsd-hg__head { padding: 16px 18px; }
	.tsd-hg__head h2 { font-size: 18px !important; }
	.tsd-hg__head p { font-size: 12px !important; }
	.tsd-hg__body { padding: 18px; }
	.tsd-hg__foot { padding: 12px 18px; flex-wrap: wrap; }
	.tsd-hg__dots { width: 100%; justify-content: center; margin: 0 0 10px; }
	.tsd-hg__foot .tsd-btn { flex: 1; }

	.tsd-hg__title { font-size: 19px; }
	.tsd-hg__lead { font-size: 13.5px; margin-bottom: 16px; }
	.tsd-hg__demo { padding: 14px; }

	/* room is tight, so the labels go and the numbers carry it */
	.tsd-hg__tx { display: none; }
	.tsd-hg__n { margin-right: 0; }

	.tsd-hg__actions { grid-template-columns: 1fr; }

	/* The tables need nothing here.

	   They are the product page's own — tsd-grid, tsd-qty, tsd-stock — and
	   tsd-product.css already sizes them for a phone, including the column
	   widths. Every earlier attempt at this failed on percentages I invented
	   here instead of using the ones that work. */

	/* THE FRAME GOES.

	   On a phone it was a border, 28px of padding and a floating label around
	   a table that needs every pixel of the width. The heading above already
	   says what the customer is looking at. */
	.tsd-hg__demo {
		padding: 0;
		background: none;
		border: none;
	}
	.tsd-hg__demo::before { display: none; }




}

/* a short window — a landscape phone, or a small laptop */
@media screen and (max-height: 700px) {
	.tsd-hg__modal { height: calc(100vh - 48px); }
}
@media screen and (max-height: 560px) {
	.tsd-hg__head { padding: 12px 18px; }
	.tsd-hg__head p { display: none; }
	.tsd-hg__head h2 { font-size: 17px !important; }
	.tsd-hg__step { padding: 8px 6px !important; }
}