/*!
 * Blocksy Enhancements — Phase A UI chrome.
 *
 * - Customizer preview frame device-badge (visual hint when the
 *   viewport is below 900px / 600px).
 * - Custom code textarea monospace layout in the customizer pane.
 * - Color preset select swatch dots (when a preset is active, show
 *   5 swatches next to the select).
 *
 * The full drag-drop "active device" button row lives in Phase B.
 * This file only carries the visual scaffolding.
 *
 * @package License_Store
 */

/* Customizer preview frame — show a small device badge so the user
   knows which breakpoint they're looking at. The customizer iframe
   body has a class added by customize-devices.js. */
body.customize-device-mobile::before,
body.customize-device-tablet::before {
	content: attr(data-device-label);
	position: fixed;
	top: 0;
	right: 0;
	z-index: 999999;
	background: var(--ls-color-primary);
	color: #ffffff;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	border-bottom-left-radius: 4px;
	pointer-events: none;
}

body.customize-device-mobile::before {
	background: var(--ls-color-accent);
}

/* Custom code textareas in the customizer pane. */
#customize-control-ls_custom_css textarea,
#customize-control-ls_custom_css_desktop textarea,
#customize-control-ls_custom_css_tablet textarea,
#customize-control-ls_custom_css_mobile textarea,
#customize-control-ls_custom_js_header textarea,
#customize-control-ls_custom_js_footer textarea {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: 1.55;
	min-height: 140px;
	background: #f8fafc;
	border-left: 3px solid var(--ls-color-primary);
}

/* Color preset select — show a row of 5 swatch dots next to the
   label so the user can eyeball the palette before opening it. */
#customize-control-ls_color_preset .customize-control-title::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-left: 8px;
	border-radius: 50%;
	background: var(--ls-color-primary);
	vertical-align: middle;
	box-shadow:
		14px 0 0 0 var(--ls-color-primary-dark),
		28px 0 0 0 var(--ls-color-secondary),
		42px 0 0 0 var(--ls-color-accent),
		56px 0 0 0 var(--ls-color-bg-alt);
}

/* Typography weight select — give the dropdown options a visual
   weight that matches their value. Browsers vary in support; this
   is a best-effort enhancement. */
#customize-control-ls_h1_weight .customize-control-title::before,
#customize-control-ls_h2_weight .customize-control-title::before,
#customize-control-ls_h3_weight .customize-control-title::before,
#customize-control-ls_h4_weight .customize-control-title::before,
#customize-control-ls_h5_weight .customize-control-title::before,
#customize-control-ls_h6_weight .customize-control-title::before,
#customize-control-ls_font_weight_body .customize-control-title::before {
	content: "A";
	display: inline-block;
	margin-right: 6px;
	font-size: 16px;
	color: var(--ls-color-muted);
}