/**
 * Persona Pattern Tool — editor styles.
 */
.persona-pattern-tool {
	--pt-border: #d9d4cc;
	--pt-accent: var(--wp--preset--color--primary, #b06883);
	--pt-accent-dark: var(--wp--preset--color--primary-dark, #8f4f68);
	--pt-bg: #faf8f4;
	--pt-ruler: 26px;
	font-family: var(--wp--preset--font-family--sans, "Nunito", system-ui, sans-serif);
	color: #2c2a27;
}

/* ---- top toolbar ---- */
.pt-toolbar {
	display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end;
	padding: 14px 16px; background: var(--pt-bg);
	border: 1px solid var(--pt-border); border-radius: 10px 10px 0 0; border-bottom: none;
}
.pt-field { display: flex; flex-direction: column; gap: 4px; }
.pt-field__label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #8a8378; font-weight: 700; }
.pt-info-ico { display: inline-block; color: var(--pt-accent); cursor: help; font-size: 12px; line-height: 1; vertical-align: baseline; text-transform: none; letter-spacing: 0; }
.pt-info-ico:hover, .pt-info-ico:focus { color: var(--pt-accent-dark); outline: none; }
.pt-select { font: inherit; padding: 7px 9px; border: 1px solid var(--pt-border); border-radius: 7px; background: #fff; min-width: 120px; }
.pt-zoom { display: flex; gap: 4px; }
.pt-zoom .pt-btn { min-width: 40px; }

.pt-btn { font: inherit; font-weight: 600; padding: 7px 12px; border: 1px solid var(--pt-border); border-radius: 7px; background: #fff; cursor: pointer; transition: background .15s, border-color .15s; }
.pt-btn:hover { background: #f0ece5; }
.pt-btn--primary, .pt-btn--primary:hover { background: var(--pt-accent); color: #fff; border-color: var(--pt-accent); }
.pt-btn--danger { color: #fff; background: #c0584e; border-color: #c0584e; width: 100%; margin-top: 10px; }

/* ---- body layout ---- */
.pt-body {
	display: flex; align-items: stretch;
	border: 1px solid var(--pt-border); border-radius: 0 0 10px 10px; overflow: hidden;
	min-height: 560px;
}

/* left palette */
.pt-palette { display: flex; flex-direction: column; gap: 4px; padding: 10px; background: var(--pt-bg); border-right: 1px solid var(--pt-border); width: 92px; flex: 0 0 auto; }
.pt-tool { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; font: inherit; }
.pt-tool:hover { background: #efe8e0; }
.pt-tool--on { background: #fff; border-color: var(--pt-accent); }
.pt-tool__icon { font-size: 20px; line-height: 1; }
.pt-tool__name { font-size: 11px; color: #6f685e; }
.pt-tool--clear { margin-top: auto; }
.pt-tool--reset .pt-tool__icon { color: #c0584e; }
.pt-tool--reset:hover { background: #f3dcd8; }

/* hover tooltip describing each tool */
.pt-tooltip {
	position: fixed; display: none; z-index: 60;
	max-width: 220px; transform: translateY( -50% );
	background: #3a2630; color: #fff;
	font-size: 12px; line-height: 1.4;
	padding: 8px 11px; border-radius: 8px;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, .22 );
	pointer-events: none;
}

/* stage = corner + rulers + canvas */
.pt-stage {
	flex: 1 1 auto; min-width: 0;
	display: grid;
	grid-template-columns: var(--pt-ruler) 1fr;
	grid-template-rows: var(--pt-ruler) 1fr;
	background: #fff;
}
.pt-corner { background: #ece5db; border-right: 1px solid #c9bfb2; border-bottom: 1px solid #c9bfb2; }
.pt-ruler { display: block; }
.pt-ruler--top { border-bottom: 1px solid #c9bfb2; }
.pt-ruler--left { border-right: 1px solid #c9bfb2; }
.pt-canvaswrap { position: relative; overflow: hidden; background:
	repeating-linear-gradient( 45deg, #fff, #fff 11px, #fcfbf9 11px, #fcfbf9 22px ); }
.pt-canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* canvas content */
.pt-grid { stroke: #e7e2d9; stroke-width: 1; }
.pt-grid--minor { stroke: #f1ede6; }
.pt-axis { stroke: #c9b9a6; stroke-width: 1.4; }
.pt-shape { fill: none; stroke: #6f685e; stroke-width: 2; }
.pt-shape--fill { fill: rgba( 176, 104, 131, .06 ); }
.pt-shape--active { stroke: var(--pt-accent); stroke-width: 2.4; }
.pt-shape--curve { fill: none; }
.pt-seam { fill: none; stroke: var(--pt-accent); stroke-width: 2; stroke-dasharray: 0.1 7; stroke-linecap: round; }
.pt-measure { stroke: #3f7d8c; stroke-width: 1.3; stroke-dasharray: 6 4; }
.pt-measure-lbl { fill: #3f7d8c; font-size: 12px; font-weight: 700; text-anchor: middle; font-family: "Nunito", sans-serif; }
.pt-bust-handle { fill: #fff; stroke: #3f7d8c; stroke-width: 2.5; cursor: move; }
.pt-guide-line { stroke: #3f7d8c; stroke-width: 1.4; stroke-dasharray: 7 4; }
.pt-guide-line.pt-shape--active { stroke: #2b6171; stroke-width: 2; }
.pt-gather { fill: none; stroke: #c98a2e; stroke-width: 1.6; }
.pt-gather-lbl { fill: #b5781f; font-size: 11px; font-weight: 700; text-anchor: middle; font-family: "Nunito", sans-serif; }
.pt-len-lbl { fill: #3a2630; font-size: 11px; font-weight: 700; text-anchor: middle; font-family: "Nunito", sans-serif; pointer-events: none; paint-order: stroke; stroke: #fbf4f1; stroke-width: 3px; stroke-linejoin: round; }
.pt-node-lbl { fill: #6f685e; font-size: 11px; font-family: "Nunito", sans-serif; pointer-events: none; }
.pt-text { fill: #2b2b2b; font-family: "Nunito", sans-serif; font-weight: 600; cursor: move; }
.pt-text--active { fill: var(--pt-accent); }
.pt-text-box { fill: none; stroke: var(--pt-accent); stroke-width: 1; stroke-dasharray: 4 3; }
.pt-node-lbl--sel { fill: var(--pt-accent); font-weight: 700; }
.pt-arm { stroke: #c9a7b6; stroke-width: 1; stroke-dasharray: 3 3; }
.pt-handle { fill: #fff; stroke: var(--pt-accent); stroke-width: 2; cursor: grab; }
.pt-handle--ctrl { fill: var(--pt-accent); stroke: #fff; }
.pt-handle--sel { fill: var(--pt-accent); stroke: #3a2630; }
.pt-dartline { stroke: var(--pt-accent); stroke-width: 1.5; stroke-dasharray: 5 4; }
.pt-rot { fill: #fff; stroke: var(--pt-accent); stroke-width: 2; cursor: grab; }
.pt-scale { fill: #fff; stroke: var(--pt-accent); stroke-width: 2; cursor: nwse-resize; }
.pt-rot-ico { fill: var(--pt-accent); font-size: 12px; text-anchor: middle; dominant-baseline: central; pointer-events: none; font-family: sans-serif; }

/* seam-match bar */
.pt-match {
	display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
	padding: 8px 16px; background: #fff;
	border-left: 1px solid var(--pt-border); border-right: 1px solid var(--pt-border);
	font-size: 13px; color: #6f685e;
}
.pt-match__label { font-weight: 700; color: #2c2a27; }
.pt-match__diff { font-weight: 700; color: var(--pt-accent-dark); }
.pt-match__clear { margin-left: auto; padding: 4px 10px; font-size: 12px; }

/* node tangent editor */
.pt-node { margin: 4px 0 12px; padding: 10px; background: #fff; border: 1px solid var(--pt-border); border-radius: 8px; }
.pt-node__title { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--pt-accent-dark); }
.pt-node__quick { display: flex; gap: 6px; margin-bottom: 8px; }
.pt-node__quick .pt-btn { flex: 1; padding: 6px 4px; font-size: 12px; }
.pt-prop__matchbtns { display: flex; gap: 6px; margin-top: 12px; }
.pt-prop__matchbtns .pt-btn { flex: 1; font-size: 12px; }

.pt-tip { position: absolute; display: none; pointer-events: none; background: #3a2630; color: #fff; font-size: 11px; padding: 3px 7px; border-radius: 5px; white-space: nowrap; z-index: 5; }

/* French curve guide */
.pt-french { fill: rgba( 155, 181, 166, .22 ); stroke: #5f8a74; stroke-width: 1.5; stroke-dasharray: 5 4; cursor: grab; }
.pt-french__trace { fill: none; stroke: var(--pt-accent); stroke-width: 3; }
.pt-french__anchor { fill: var(--pt-accent); stroke: #fff; stroke-width: 2; }

/* eraser cursor */
.pt-eraser { fill: rgba( 192, 88, 78, .12 ); stroke: #c0584e; stroke-width: 1.5; stroke-dasharray: 4 3; pointer-events: none; }

/* figure / image guide layer */
.pt-guide-fig { fill: none; stroke: #7c8a9a; stroke-width: 1.4; }
.pt-guide-img { /* opacity set inline */ }
.pt-guide-box { fill: none; stroke: #5f8a74; stroke-width: 1.2; stroke-dasharray: 6 4; }

/* right column: grids + properties */
.pt-side { width: 232px; flex: 0 0 auto; display: flex; flex-direction: column; border-left: 1px solid var(--pt-border); }
.pt-grids { padding: 12px 14px; background: #f3ece3; border-bottom: 1px solid var(--pt-border); }
.pt-grids__title { margin: 0 0 8px; font-weight: 700; font-size: 15px; }
.pt-grids__actions { display: flex; gap: 5px; margin-bottom: 8px; }
.pt-grids__actions .pt-btn { flex: 1; padding: 6px 4px; font-size: 12px; }
.pt-grids__list { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow: auto; }
.pt-grid { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border: 1px solid transparent; border-radius: 7px; cursor: pointer; background: #fff; }
.pt-grid:hover { background: #efe8e0; }
.pt-grid--active { border-color: var(--pt-accent); background: #fff; }
.pt-grid__cb { flex: 0 0 auto; }
.pt-grid__name { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; border: 1px solid transparent; background: transparent; border-radius: 5px; padding: 3px 4px; }
.pt-grid__name:focus { border-color: var(--pt-border); background: #fff; outline: none; }
.pt-grid__del { flex: 0 0 auto; border: none; background: transparent; cursor: pointer; font-size: 13px; opacity: .6; }
.pt-grid__del:hover { opacity: 1; }
.pt-grids__hint { margin: 8px 0 0; font-size: 11px; color: #8a8378; line-height: 1.4; }

/* properties panel */
.pt-prop { flex: 1 1 auto; overflow: auto; padding: 14px; background: var(--pt-bg); }
.pt-prop__empty, .pt-prop__note { font-size: 13px; color: #8a8378; line-height: 1.5; }
.pt-prop__title { margin: 0 0 12px; font-weight: 700; font-size: 15px; }
.pt-prop__field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 12px; color: #6f685e; font-weight: 600; }
.pt-prop__field input { font: inherit; font-weight: 400; padding: 7px 9px; border: 1px solid var(--pt-border); border-radius: 7px; background: #fff; }
.pt-prop__field textarea { font: inherit; font-weight: 400; padding: 7px 9px; border: 1px solid var(--pt-border); border-radius: 7px; background: #fff; width: 100%; resize: vertical; box-sizing: border-box; }
.pt-prop__xy { margin-bottom: 10px; }
.pt-prop__xylabel { display: block; font-size: 12px; font-weight: 600; color: #6f685e; margin-bottom: 4px; }
.pt-prop__xy input { width: 46%; font: inherit; padding: 6px 8px; border: 1px solid var(--pt-border); border-radius: 7px; background: #fff; margin-right: 4px; }

@media ( max-width: 782px ) {
	.pt-body { flex-direction: column; min-height: auto; }
	.pt-palette { flex-direction: row; width: auto; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--pt-border); }
	.pt-tool--clear { margin-top: 0; margin-left: auto; }
	.pt-stage { height: 460px; }
	.pt-side { width: auto; border-left: none; border-top: 1px solid var(--pt-border); }
	.pt-prop__xy input { width: 30%; }
}