/*
 * Creator LMS — MAR tap-to-pick popover.
 *
 * Anchored popover (desktop / tablet) with auto-flip up/down, and a
 * bottom-sheet variant (.is-mobile) for narrow viewports. Backdrop is
 * only rendered on mobile so desktop clicks pass through normally.
 */

.crlms-mar-tap-picker-backdrop {
	position: fixed;
	inset: 0;
	background: rgba( 17, 24, 39, 0.45 );
	z-index: 99998;
}

.crlms-mar-tap-picker {
	position: fixed;
	z-index: 99999;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.18 );
	display: flex;
	flex-direction: column;
	overflow: hidden;
	font-family: inherit;
	color: #111827;
}

/* `display: flex` above wins specificity over the UA `[hidden]` rule,
 * so we have to re-assert display:none for the hidden state ourselves.
 * Same for the backdrop. */
.crlms-mar-tap-picker[hidden],
.crlms-mar-tap-picker-backdrop[hidden] { display: none !important; }

.crlms-mar-tap-picker.is-mobile {
	border-radius: 14px 14px 0 0;
	box-shadow: 0 -12px 32px rgba( 0, 0, 0, 0.22 );
}

.crlms-mar-tap-picker-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-bottom: 1px solid #e5e7eb;
	background: #f9fafb;
}

.crlms-mar-tap-picker-title {
	font-weight: 600;
	font-size: 14px;
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.crlms-mar-tap-picker-hint {
	font-size: 12px;
	color: #6b7280;
	flex: 0 0 auto;
}

.crlms-mar-tap-picker-x {
	appearance: none;
	background: transparent;
	border: 0;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: #6b7280;
	padding: 2px 6px;
	border-radius: 4px;
}
.crlms-mar-tap-picker-x:hover { background: #e5e7eb; color: #111827; }

.crlms-mar-tap-picker-list {
	overflow-y: auto;
	flex: 1 1 auto;
	padding: 4px 0;
	-webkit-overflow-scrolling: touch;
}

.crlms-mar-tap-picker-row {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #f3f4f6;
	text-align: left;
	cursor: pointer;
	font-size: 14px;
	color: #111827;
	min-height: 44px; /* iOS tap-target minimum */
}
.crlms-mar-tap-picker-row:last-child { border-bottom: 0; }
.crlms-mar-tap-picker-row:hover { background: #f3f4f6; }
.crlms-mar-tap-picker-row:focus { outline: 2px solid #2563eb; outline-offset: -2px; }

.crlms-mar-tap-picker-row.is-placed {
	background: #ecfdf5;
}
.crlms-mar-tap-picker-row.is-placed:hover { background: #d1fae5; }

.crlms-mar-tap-picker-check {
	flex: 0 0 18px;
	width: 18px;
	text-align: center;
	color: #059669;
	font-weight: 700;
}

.crlms-mar-tap-picker-type {
	flex: 0 0 auto;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #6b7280;
	background: #f3f4f6;
	padding: 2px 6px;
	border-radius: 3px;
}

.crlms-mar-tap-picker-label {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.crlms-mar-tap-picker-empty {
	padding: 16px;
	text-align: center;
	color: #6b7280;
	font-style: italic;
	font-size: 13px;
}

.crlms-mar-tap-picker-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-top: 1px solid #e5e7eb;
	background: #f9fafb;
}

.crlms-mar-tap-picker-clear {
	appearance: none;
	background: transparent;
	border: 1px solid #fca5a5;
	color: #b91c1c;
	border-radius: 6px;
	padding: 6px 12px;
	font-size: 13px;
	cursor: pointer;
	min-height: 36px;
}
.crlms-mar-tap-picker-clear:hover { background: #fee2e2; }

.crlms-mar-tap-picker-done {
	appearance: none;
	background: #2563eb;
	border: 0;
	color: #fff;
	border-radius: 6px;
	padding: 6px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	min-height: 36px;
	margin-left: auto;
}
.crlms-mar-tap-picker-done:hover { background: #1d4ed8; }

/* Cells get a subtle tap affordance so users discover the interaction. */
.crlms-mar-runner [data-cell].is-dropzone,
.crlms-mar-builder-wrap [data-cell].is-dropzone {
	cursor: pointer;
}