/**
 * PSDM Designer Guide overlay styling.
 *
 * The SVG overlay sits on top of the Fabric canvas (inside .canvas-container) and
 * is click-through (pointer-events:none) so it never blocks designing. The color
 * LEGEND and the "Guides" toggle now live OFF the canvas — the legend in the
 * designer's native bottom-left notice, the toggle in the top tool bar — so the
 * canvas stays clean. This file also hides the stock chrome we replace: the native
 * "Cut line / Safe zone" notice chips and the bottom-center sides navigation bar.
 *
 * @package PSDM
 */

.psdm-guide-overlay {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	z-index: 60;
}

.psdm-guide-overlay svg {
	display: block;
	overflow: visible;
}

/* ---- off-canvas color legend (lives in the native bottom-left notice) ---- */

.psdm-guide-legend {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-left: 10px;
	padding: 7px 14px;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	font: 600 12px/1.2 Inter, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
	color: #333;
	pointer-events: none;
}

.psdm-guide-legend-item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.psdm-guide-legend-item i {
	display: inline-block;
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-right: 6px;
	border-radius: 50%;
}

/* ---- "Guides" toggle — injected as a top tool-bar menu item ---- */
/* Styled from the AX designer-theme design tokens so it reads as native: a soft
   tinted "active nav pill" (the theme's own selected-pill language) when ON, a
   neutral ghost when OFF — NOT a loud solid fill. Literal fallbacks keep it sane
   when the AX theme is off. opacity:1 overrides the designer fading non-active
   .menu-center items to 0.15 (the original washed-out bug). */

.nbd-main-bar .menu-item.psdm-guide-toggle {
	/* The designer's .menu-item stacks icon-over-label (column); force icon + word
	   side by side. !important beats the stock column rule. */
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center;
	gap: 8px;
	margin: 0 4px;
	/* Designer forces .menu-item padding:0 15px !important — override so the pill
	   gets real height (fills the ~38px tool-bar row like the other items). */
	padding: 10px 18px !important;
	border: 0;
	border-radius: var(--ax-r-pill, 999px);
	line-height: 1;
	cursor: pointer;
	color: var(--ax-gray-900, #171922);
	background: transparent;
	font-family: var(--ax-font, inherit);
	opacity: 1 !important;
	transition: background var(--ax-t-fast, 0.15s) ease;
}

.nbd-main-bar .menu-item.psdm-guide-toggle span {
	color: inherit !important;
	opacity: 1 !important;
	font-weight: 700;
	font-size: var(--ax-text, 14px);
}

.nbd-main-bar .menu-item.psdm-guide-toggle:hover {
	background: var(--ax-accent-100, #eef1ff);
}

/* ON = guides showing -> soft lavender "active pill" (flat: no border/shadow). */
.nbd-main-bar .menu-item.psdm-guide-toggle.psdm-guide-on {
	background: var(--ax-cta-tint-strong, linear-gradient(135deg, #e3e8ff 0%, #ece2ff 100%));
}

.nbd-main-bar .menu-item.psdm-guide-toggle .psdm-guide-ic-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

.nbd-main-bar .menu-item.psdm-guide-toggle .psdm-guide-ic {
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.nbd-main-bar .menu-item.psdm-guide-toggle .psdm-guide-ic path,
.nbd-main-bar .menu-item.psdm-guide-toggle .psdm-guide-ic rect {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@supports ((-webkit-mask: none) or (mask: none)) {
	.nbd-main-bar .menu-item.psdm-guide-toggle .psdm-guide-ic-wrap {
		--psdm-guide-icon-mask: url("../images/psdm-guides-on.png");
	}

	.nbd-main-bar .menu-item.psdm-guide-toggle:not(.psdm-guide-on) .psdm-guide-ic-wrap {
		--psdm-guide-icon-mask: url("../images/psdm-guides-off.png");
	}

	.nbd-main-bar .menu-item.psdm-guide-toggle .psdm-guide-ic {
		display: none;
	}

	.nbd-main-bar .menu-item.psdm-guide-toggle .psdm-guide-ic-wrap::before {
		content: "";
		display: block;
		width: 20px;
		height: 20px;
		background: currentColor;
		opacity: 0.92;
		-webkit-mask: var(--psdm-guide-icon-mask) center / 20px 20px no-repeat;
		mask: var(--psdm-guide-icon-mask) center / 20px 20px no-repeat;
	}
}

/* ---- hide the stock chrome we replace ---- */

/* Native "Cut line / Safe zone" notice chips — superseded by .psdm-guide-legend.
   (The font-warning chip in the same notice is left intact.) */
.nbd-guidelines-notice .nbd-guideline-bleedline,
.nbd-guidelines-notice .nbd-guideline-safezone {
	display: none !important;
}

/* Bottom-center sides navigation bar — removed per design. Side switching stays
   available via the right-hand page arrows and the title bar. */
.nbd-stages-nav {
	display: none !important;
}

/* The designer's OWN on-canvas guide layer (.stage-guideline → .bleed-line red +
   .safe-line green). Our .psdm-guide-overlay fully replaces it; left visible it
   double-draws a conflicting red/green box over our clean bleed/cut/safe guide —
   the "extra inner box / inaccurate guide" artifact. Hide the whole native layer. */
.stage-guideline {
	display: none !important;
}