/**
 * HomeRunner Toolkit — Property Actions (toolkit#788).
 *
 * The action row, its items, and the share dialog: a centered card on
 * desktop, a bottom sheet at phone width. Shipped as written, outside the
 * armor build, like the AI-Ready guest entry sheet it borrows its dialog
 * from.
 */

/* --------------------------------------------------------------------- bar
   inline-flex, so the builder's alignment (text-align on the element box)
   places the whole row; it wraps item by item on a narrow screen. */
.hrtk-pa {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em 1.5em;
	max-width: 100%;
}

.hrtk-pa--icon {
	gap: 0.25em 0.5em;
}

/* Save and Plan are other modules' controls; the slot only lines them up. */
.hrtk-pa__slot {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.hrtk-pa__slot:empty {
	display: none;
}

/* The delegated controls (Conversion Kit's heart or its Save link) get the
   same 44px target as the toolkit's own items. */
.hrtk-pa__slot > a,
.hrtk-pa__slot > button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/* Icon style: the AI-Ready trigger keeps its label for screen readers too. */
.hrtk-pa--icon .hrtk-aic-trigger__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hrtk-pa--icon .hrtk-aic-trigger {
	position: relative;
	justify-content: center;
	min-width: 44px;
}

/* ------------------------------------------------------------------- items
   An item of the property page's action row. The resets sit in :where()
   (zero specificity) so any class the operator or the theme puts on it wins
   over them: the item takes the row's own type and only adds the icon. */
:where(.hrtk-pa__item) {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.hrtk-pa__item[hidden] {
	display: none;
}

.hrtk-pa__icon {
	flex: none;
	width: 1.25em;
	height: 1.25em;
}

.hrtk-pa__item--link:hover .hrtk-pa__label {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.hrtk-pa__item--button {
	padding: 0 1.1em;
	border: 1px solid currentColor;
	border-radius: 999px;
}

.hrtk-pa__item--button:hover {
	background: rgba(127, 127, 127, 0.12);
}

/* Icon only: the label stays in the accessibility tree. */
.hrtk-pa__item--icon {
	position: relative;
	justify-content: center;
}

.hrtk-pa__item--icon .hrtk-pa__label,
.hrtk-pa-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The ring is drawn in the text color, which contrasts with the surface it
   sits on by definition; a fixed ring color cannot promise that. */
.hrtk-pa__item:focus-visible,
.hrtk-pa__slot > a:focus-visible,
.hrtk-pa__slot > button:focus-visible,
.hrtk-share-dialog__close:focus-visible,
.hrtk-share-dialog__copy-btn:focus-visible,
.hrtk-share-dialog__channel:focus-visible,
.hrtk-share-dialog__url:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The page scroll lock while the dialog is open. A class with !important, so
   another script resetting inline overflow on <html> (UIkit's modal cleanup)
   cannot undo it. Its own class, not the AI-Ready dialog's: each script
   keeps its own lock state, and one dialog's queued close event must not
   strip the class from under the other. */
html.hrtk-pa-lock {
	overflow: hidden !important;
}

/* ------------------------------------------------------------------- dialog
   A native <dialog>. It owns its surface (white), so its colors are fixed
   and measured: #1f2933 on #fff is 14.9:1, the muted #52606d is 6.4:1. */
.hrtk-share-dialog {
	box-sizing: border-box;
	width: min(440px, calc(100vw - 32px));
	max-width: none;
	max-height: min(85vh, 640px);
	max-height: min(85dvh, 640px);
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 16px;
	background: #fff;
	color: #1f2933;
	font-size: 1rem;
	line-height: 1.4;
	text-align: start;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}

.hrtk-share-dialog:not([open]) {
	display: none;
}

/* The container is not a control; focus lands on the close button inside. */
.hrtk-share-dialog:focus {
	outline: none;
}

.hrtk-share-dialog::backdrop {
	background: rgba(2, 24, 38, 0.55);
}

.hrtk-share-dialog__panel {
	box-sizing: border-box;
	position: relative;
	max-height: inherit;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 28px 28px 24px;
}

.hrtk-share-dialog__handle {
	display: none;
}

.hrtk-share-dialog__close {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-end: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f1f4f6;
	color: #1f2933;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.hrtk-share-dialog__close:hover {
	background: #e3e8ec;
}

.hrtk-share-dialog__icon {
	flex: none;
	width: 20px;
	height: 20px;
}

.hrtk-share-dialog__title {
	margin: 0;
	padding-inline-end: 52px;
	color: #1f2933;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.25;
}

.hrtk-share-dialog__subject {
	margin: 6px 0 0;
	padding-inline-end: 52px;
	color: #52606d;
	font-size: 0.9375rem;
}

.hrtk-share-dialog__subject:empty {
	display: none;
}
.hrtk-share-dialog__preview {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 12px 0 0;
	padding-inline-end: 52px;
}
.hrtk-share-dialog__cover {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	object-fit: cover;
	background: #f1f4f6;
}
.hrtk-share-dialog__cover[hidden] {
	display: none;
}
.hrtk-share-dialog__preview .hrtk-share-dialog__subject {
	margin: 0;
	padding-inline-end: 0;
}

.hrtk-share-dialog__copy {
	display: flex;
	gap: 8px;
	margin: 20px 0 0;
}

.hrtk-share-dialog__url {
	box-sizing: border-box;
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid #c9d1d6;
	border-radius: 10px;
	background: #f7f9fa;
	color: #1f2933;
	font: inherit;
	font-size: 0.875rem;
	text-overflow: ellipsis;
}

.hrtk-share-dialog__copy-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 10px;
	background: #1f2933;
	color: #fff;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.hrtk-share-dialog__copy-btn:hover {
	background: #323f4b;
}

/* The ring is currentColor (white) on the dark fill: move it outside. */
.hrtk-share-dialog__copy-btn:focus-visible {
	outline-color: #1f2933;
}

.hrtk-share-dialog__channels {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.hrtk-share-dialog__channels li {
	margin: 0;
	padding: 0;
}

.hrtk-share-dialog__channels li[hidden] {
	display: none;
}

.hrtk-share-dialog__channel {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	padding: 0 14px;
	border: 1px solid #c9d1d6;
	border-radius: 10px;
	background: #fff;
	color: #1f2933;
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

.hrtk-share-dialog__channel:hover {
	border-color: #1f2933;
	background: #f7f9fa;
	color: #1f2933;
	text-decoration: none;
}

.hrtk-share-dialog__status {
	min-height: 1.4em;
	margin: 12px 0 0;
	color: #52606d;
	font-size: 0.875rem;
}

@media (prefers-reduced-motion: no-preference) {
	.hrtk-share-dialog[open] {
		animation: hrtk-share-dialog-in 0.18s ease-out;
	}

	.hrtk-share-dialog[open]::backdrop {
		animation: hrtk-share-fade-in 0.18s ease-out;
	}
}

@keyframes hrtk-share-dialog-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

@keyframes hrtk-share-fade-in {
	from {
		opacity: 0;
	}
}

@media (max-width: 640px) {
	/* The same dialog as a bottom sheet. */
	.hrtk-share-dialog {
		width: 100%;
		max-height: 85vh;
		max-height: 85dvh;
		margin: auto 0 0;
		border-radius: 20px 20px 0 0;
	}

	.hrtk-share-dialog__panel {
		padding: 12px 20px calc(24px + env(safe-area-inset-bottom, 0px));
	}

	.hrtk-share-dialog__handle {
		display: block;
		width: 40px;
		height: 4px;
		margin: 0 auto 16px;
		border-radius: 2px;
		background: #c9d1d6;
	}

	.hrtk-share-dialog__close {
		inset-block-start: 8px;
		inset-inline-end: 10px;
	}

	@media (prefers-reduced-motion: no-preference) {
		.hrtk-share-dialog[open] {
			animation: hrtk-share-sheet-in 0.22s ease-out;
		}
	}
}

@keyframes hrtk-share-sheet-in {
	from {
		transform: translateY(100%);
	}
}

@media (max-width: 380px) {
	.hrtk-share-dialog__channels {
		grid-template-columns: minmax(0, 1fr);
	}
}