/* Share-a-Trip graphic sheet (Mikayla preview).
   Overlay only — never restyle the site header or page behind it.
   Do not use "backdrop"/"overlay" in class names: header.php forces those
   to a global z-index that fights the masthead. */

html body .dnd-tsg-root {
	position: fixed !important;
	inset: 0 !important;
	z-index: 2147483647 !important;
	display: block;
	margin: 0;
	padding: 0;
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	box-sizing: border-box;
	isolation: isolate;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}

html body .dnd-tsg-root:focus,
html body .dnd-tsg-root:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

html body .dnd-tsg-dim {
	position: fixed !important;
	inset: 0 !important;
	z-index: 0;
	background: rgba(0, 0, 0, 0.72);
	margin: 0;
	padding: 0;
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
}

html body .dnd-tsg-dim:focus,
html body .dnd-tsg-dim:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

html body .dnd-tsg-sheet {
	position: fixed !important;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	width: min(736px, calc(100vw - 32px));
	height: min(max-content, 90vh);
	height: min(max-content, 90dvh);
	max-height: 90vh;
	max-height: 90dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #0a0a0a;
	color: #f4f4f5;
	border: 0;
	border-radius: 28px;
	box-sizing: border-box;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
	outline: none !important;
	-webkit-tap-highlight-color: transparent;
}

html body .dnd-tsg-sheet:focus,
html body .dnd-tsg-sheet:focus-visible {
	outline: none !important;
}

.dnd-tsg-chrome {
	flex: 0 0 auto;
	padding: 25px 32px 0;
	background: #0a0a0a;
	position: relative;
	z-index: 2;
}

.dnd-tsg-kicker {
	margin: 0 0 4px;
	text-align: center;
	font: 700 15px/1.2 Helvetica Neue, Helvetica, Arial, sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #e8e8ea;
}

/* "Tag @dndvideo" nudge under the title. */
.dnd-tsg-tag {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 14px 0 2px;
	padding: 14px 16px;
	border: 1.5px solid rgba(34, 184, 230, 0.55);
	border-radius: 14px;
	background: #1a1a1a;
	box-sizing: border-box;
	text-align: left;
}

.dnd-tsg-tag__pill {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 999px;
	background: #22b8e6;
	color: #0a0a0a;
	font: 700 17px/1 Helvetica Neue, Helvetica, Arial, sans-serif;
	letter-spacing: 0;
}

.dnd-tsg-tag__pill svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: #0a0a0a;
	stroke-width: 2;
}

.dnd-tsg-tag__text {
	margin: 0;
	font: 400 17px/1.35 Helvetica Neue, Helvetica, Arial, sans-serif;
	letter-spacing: 0;
	text-transform: none;
	color: #f4f4f5;
}

.dnd-tsg-tag__text strong {
	font-weight: 700;
	color: #fff;
}

.dnd-tsg-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	padding: 14px 32px 9px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.dnd-tsg-foot {
	flex: 0 0 auto;
	padding: 9px 32px calc(18px + env(safe-area-inset-bottom, 0px));
	background: #0a0a0a;
}

.dnd-tsg-preview-wrap {
	position: relative;
	margin: 10px auto 22px;
	/* Basis = 460px wide at 9:16. The body is overflow:hidden and this is
	   the only flexible child, so on a short viewport the preview shrinks
	   (width follows height via aspect-ratio) instead of the sheet
	   scrolling. */
	flex: 1 1 818px;
	min-height: 0;
	width: auto;
	max-width: min(460px, 100%);
	aspect-ratio: 9 / 16;
	align-self: center;
	overflow: hidden;
	border-radius: 22px;
	background: #1c1c1c;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.dnd-tsg-actions,
.dnd-tsg-linkrow {
	flex: 0 0 auto;
}

/* Desktop: larger sheet; the preview is what they're about to post, so it
   dominates. Everything below it scales to the 560px width and stays
   full-width. */
@media (min-width: 641px) {
	.dnd-tsg-chrome {
		padding: 33px 44px 0;
	}

	.dnd-tsg-kicker {
		font-size: 15px;
	}

	.dnd-tsg-body {
		padding: 20px 44px 12px;
	}

	.dnd-tsg-foot {
		padding: 14px 44px calc(28px + env(safe-area-inset-bottom, 0px));
	}

	.dnd-tsg-actions {
		margin: 5px 0 19px;
		gap: 10px;
	}

	.dnd-tsg-act {
		font-size: 17px;
		gap: 12px;
	}

	.dnd-tsg-act__ico {
		width: 64px;
		height: 64px;
	}

	.dnd-tsg-act__ico svg {
		width: 25px;
		height: 25px;
	}

	.dnd-tsg-linkrow {
		width: 100%;
		gap: 14px;
		margin-bottom: 17px;
	}

	.dnd-tsg-link {
		padding: 17px 25px;
		font-size: 17px;
	}

	.dnd-tsg-copy {
		padding: 17px 28px;
		font-size: 17px;
	}

	.dnd-tsg-done {
		padding: 20px;
		font-size: 19px;
	}
}

@media (max-width: 640px) {
	.dnd-tsg-body {
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 8px 20px 4px;
	}

	.dnd-tsg-preview-wrap {
		flex: 0 1 auto;
		/* ~330px of chrome/actions/links + ~75px for the tag callout. */
		width: min(168px, 100%, calc((85vh - 405px) * 9 / 16));
		width: min(168px, 100%, calc((85dvh - 405px) * 9 / 16));
		max-height: calc(85vh - 405px);
		max-height: calc(85dvh - 405px);
		margin: 4px auto 16px;
	}

	.dnd-tsg-chrome {
		padding: 14px 20px 0;
	}

	.dnd-tsg-tag {
		margin: 10px 0 0;
		padding: 10px 12px;
		gap: 10px;
	}

	.dnd-tsg-tag__pill {
		width: 44px;
		height: 44px;
		font-size: 16px;
	}

	.dnd-tsg-tag__text {
		font-size: 16px;
	}

	.dnd-tsg-foot {
		padding: 8px 20px calc(14px + env(safe-area-inset-bottom, 0px));
	}
}

.dnd-tsg-skel {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #1c1c1c;
	overflow: hidden;
}

.dnd-tsg-skel::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		110deg,
		rgba(255, 255, 255, 0) 20%,
		rgba(255, 255, 255, 0.08) 50%,
		rgba(255, 255, 255, 0) 80%
	);
	transform: translateX(-100%);
	animation: dnd-tsg-shimmer 1.15s ease-in-out infinite;
}

@keyframes dnd-tsg-shimmer {
	to { transform: translateX(100%); }
}

.dnd-tsg-preview {
	position: absolute;
	inset: 0;
	display: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	border-radius: inherit;
	background: transparent;
}

.dnd-tsg-preview-wrap.is-ready .dnd-tsg-skel {
	display: none;
}

.dnd-tsg-preview-wrap.is-ready .dnd-tsg-preview {
	display: block;
}

.dnd-tsg-root.is-desktop [data-tsg-share="instagram"],
.dnd-tsg-root.is-desktop [data-tsg-share="tiktok"],
.dnd-tsg-root.is-desktop [data-tsg-share="messages"] {
	display: none;
}

.dnd-tsg-root:not(.is-file-share):not(.is-desktop) [data-tsg-share="instagram"],
.dnd-tsg-root:not(.is-file-share):not(.is-desktop) [data-tsg-share="tiktok"] {
	display: none;
}

.dnd-tsg-actions {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	margin: 4px 0 14px;
}

.dnd-tsg-actions.is-waiting,
.dnd-tsg-act.is-waiting {
	opacity: 0.38;
	pointer-events: none;
}

.dnd-tsg-act {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	border: 0;
	background: transparent;
	color: #ececec;
	font: 500 14px/1.2 Helvetica Neue, Helvetica, Arial, sans-serif;
	cursor: pointer;
	padding: 0;
}

.dnd-tsg-act:disabled {
	opacity: 0.45;
	cursor: wait;
}

.dnd-tsg-act__ico {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #1b1b1b;
	border: 1px solid #2c2c2c;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dnd-tsg-act__ico svg {
	width: 22px;
	height: 22px;
	stroke: #fff;
	fill: none;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dnd-tsg-linkrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.dnd-tsg-link {
	flex: 1;
	min-width: 0;
	border: 0;
	background: #161616;
	color: #a1a1aa;
	border-radius: 999px;
	padding: 12px 18px;
	font: 500 15px/1.3 Helvetica Neue, Helvetica, Arial, sans-serif;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dnd-tsg-copy {
	flex: none;
	border: 0;
	background: #0ea5e9;
	color: #04151c;
	border-radius: 999px;
	padding: 12px 18px;
	font: 700 16px/1 Helvetica Neue, Helvetica, Arial, sans-serif;
	cursor: pointer;
	white-space: nowrap;
}

.dnd-tsg-done {
	width: 100%;
	border: 0;
	background: #22d3ee;
	color: #04222a;
	border-radius: 999px;
	padding: 16px;
	font: 700 20px/1 Helvetica Neue, Helvetica, Arial, sans-serif;
	cursor: pointer;
}