/**
 * Chart Maker Live — Diagram Preview styles (Phase 3, desktop).
 *
 * The diagram container is LTR so columns read A..E (C centred) regardless of an
 * RTL admin/theme; card text uses dir="auto" for Hebrew. Connectors live on an
 * SVG layer BEHIND the whole grid (grid z-index 2 > layer z-index 1), so cards
 * and gutters always paint above the lines while the lines show through the
 * gutter lanes. No horizontal scroll: a too-narrow container shows a notice.
 */

.cml-diagram {
	font-size: 13px;
}

.cml-dg {
	position: relative;
	isolation: isolate;        /* scope the connector/card stacking */
	padding: 20px;
	overflow: hidden;          /* never scroll horizontally */
	color: #1d2327;
	background: #faf5ee;       /* warm off-white / soft cream */
	border-radius: 10px;
}

.cml-dg-stage {
	position: relative;
	width: max-content;
	max-width: 100%;
	margin-inline: auto;   /* centre the whole diagram in the available width (cards unchanged) */
}

.cml-dg-grid {
	position: relative;
	z-index: 2;                /* whole grid (cards + gutters) above the lines */
	display: grid;
	width: max-content;
}

/* ---- Connector layer ---- */
.cml-connector-layer {
	position: absolute;
	inset: 0;
	z-index: 1;                /* behind the grid */
	pointer-events: none;
	overflow: visible;
}
.cml-dg-conn {
	fill: none;
	stroke: #6b7280;           /* grey */
	stroke-width: 2.5;         /* slightly thicker than v3.1 */
	stroke-linejoin: round;
	stroke-linecap: round;
}

/* ---- Cards ---- */
.cml-dg-card {
	position: relative;
	z-index: 10;               /* belt-and-suspenders above the layer */
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow: hidden;          /* clip the top strip to the rounded corners */
	box-sizing: border-box;
	padding: 8px 12px;
	border: 1px solid #e3e5e8;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.06 ), 0 6px 14px rgba( 16, 24, 40, 0.05 );
}
.cml-dg-card--folder {
	border-color: #e7d9a8;
	background: #fffdf5;
}
/* Primary ("ראשי"): a filled card PLUS an emphasis ring in its own colour and a
 * stronger shadow, so it reads as the main node and is distinct from a plain
 * filled ("מלא") card. Primary keeps a white body and a coloured top strip (the
 * "פס עליון" header band), so it reads as the main node and is clearly distinct
 * from a solid filled card. Give it slightly stronger elevation than a plain card. */
.cml-dg-card.is-primary {
	box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.08 ), 0 10px 22px rgba( 16, 24, 40, 0.12 );
}
/* Parent cards take their colour from the top strip (set inline). */
.cml-dg-strip {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.cml-dg-card-head {
	display: flex;
	align-items: center;
	gap: 6px;
}
.cml-dg-icon {
	flex: 0 0 auto;
	font-size: 0.95em;
	line-height: 1;
}
.cml-dg-title {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	/* Wrap up to 2 lines (RTL preserved via dir="auto"); ellipsis only beyond 2.
	   Card width is unchanged — the title just wraps within it. */
	white-space: normal;
	overflow-wrap: anywhere;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}
.cml-dg-desc {
	font-size: 0.9em;
	opacity: 0.85;
	/* Shown in full; the card row grows to fit (see grid row sizing). */
	overflow-wrap: anywhere;
}
.cml-dg-items {
	margin: 2px 0 0;
	padding-inline-start: 18px;
	font-size: 0.9em;
	line-height: 1.4;
}

/* ---- Fallback / empty states ---- */
.cml-dg-narrow,
.cml-dg-empty {
	padding: 14px 16px;
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	background: #f6f7f7;
	color: #50575e;
	text-align: center;
}

/* ---- Admin meta box chrome ---- */
.cml-diagram-toolbar {
	margin-bottom: 10px;
}

/* W-ROUTE advisory (admin only; non-blocking, informational). */
.cml-dg-hint {
	margin-top: 12px;
	padding: 6px 12px;
	border-inline-start: 3px solid #d9a300;
	background: #fcf9ee;
	color: #6b5900;
	font-size: 12px;
}

/* Subtle transparency on cards a connector routes behind — so the coloured line
   reads as continuing behind them. Kept gentle: text stays readable (not disabled). */
.cml-dg-card.is-behind {
	opacity: 0.85;
}

/* Folder card: compact, clickable, with an item-count badge. */
.cml-dg-card.is-folder-btn {
	cursor: pointer;
}
.cml-dg-card.is-folder-btn:hover {
	box-shadow: 0 0 0 2px rgba( 184, 134, 11, 0.35 );
}
.cml-dg-card.is-folder-btn:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 1px;
}
.cml-dg-count {
	flex: 0 0 auto;
	min-width: 1.4em;
	text-align: center;
	font-size: 0.8em;
	background: #f0e2a8;
	color: #6b5900;
	border-radius: 9px;
	padding: 0 6px;
}

/* Folder popover (appended to <body>; sits above everything). */
.cml-dg-pop {
	position: absolute;
	z-index: 100000;
	min-width: 200px;
	max-width: 320px;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 8px;
	box-shadow: 0 8px 30px rgba( 0, 0, 0, 0.18 );
	font-size: 14px;
	color: #1d2327;
}
.cml-dg-pop-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-bottom: 1px solid #f0f0f1;
}
.cml-dg-pop-title {
	flex: 1 1 auto;
	font-weight: 700;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cml-dg-pop-x {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: #50575e;
}
.cml-dg-pop-count {
	padding: 8px 12px 0;
	color: #50575e;
	font-size: 13px;
}
.cml-dg-pop-items {
	margin: 6px 0;
	padding-inline-start: 28px;
	padding-inline-end: 12px;
}
.cml-dg-pop-items li {
	padding: 2px 0;
}
.cml-dg-pop-foot {
	padding: 8px 12px 12px;
	text-align: center;
	border-top: 1px solid #f0f0f1;
}
.cml-dg-pop-close {
	border: 0;
	background: transparent;
	color: #2271b1;
	font-weight: 600;
	cursor: pointer;
}

/* ---- Phase 3.2: icon, description visibility, spacing ---- */
.cml-dg-icon .cml-ic {
	width: 16px;
	height: 16px;
	display: block;
}

/* Description visibility (chart setting). Always = default (visible). */
.cml-dg--desc-never .cml-dg-desc { display: none; }
.cml-dg--desc-hover .cml-dg-desc { display: none; }
.cml-dg--desc-hover .cml-dg-card:hover .cml-dg-desc,
.cml-dg--desc-hover .cml-dg-card:focus-within .cml-dg-desc { display: block; }

/* Spacing (chart setting). Gutters are sized in JS; this tunes card padding. */
.cml-dg--compact .cml-dg-card { padding: 6px 9px; }
.cml-dg--large .cml-dg-card { padding: 12px 16px; }

/* ---- Mobile accordion / tree (narrow containers) — no SVG, no horizontal scroll ---- */
.cml-dg-mobile {
	padding: 12px;
	background: #faf5ee;
	border-radius: 10px;
	overflow-x: hidden;
	color: #1d2327;
}
.cml-dg-m-children {
	padding-inline-start: 14px;
	margin-inline-start: 8px;
	border-inline-start: 2px solid #e7e2d8;
}
.cml-dg-m-card {
	position: relative;
	background: #fff;
	border: 1px solid #e3e5e8;
	border-inline-start: 4px solid #e3e5e8;
	border-radius: 12px;
	padding: 9px 12px;
	margin: 6px 0;
	box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.06 );
}
.cml-dg-m-card.is-primary {
	box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.08 ), 0 4px 12px rgba( 16, 24, 40, 0.12 );
}
/* Strip cards clip the absolutely-positioned top strip to the rounded corners,
 * and drop the default thick inline-start border so the strip is the only accent. */
.cml-dg-m-card.has-strip {
	overflow: hidden;
	border-inline-start-width: 1px;
	border-inline-start-color: #e3e5e8;
}
.cml-dg-m-card.is-branch,
.cml-dg-m-card.is-folder-btn { cursor: pointer; }
.cml-dg-m-card.is-folder-btn { background: #fffdf5; border-color: #e7d9a8; }
.cml-dg-m-card.is-branch:focus-visible,
.cml-dg-m-card.is-folder-btn:focus-visible { outline: 2px solid #2271b1; outline-offset: 1px; }
.cml-dg-m-head {
	display: flex;
	align-items: center;
	gap: 8px;
}
.cml-dg-m-title {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}
.cml-dg-m-chev {
	flex: 0 0 auto;
	color: #787c82;
	font-size: 12px;
}
.cml-dg-m-card.is-collapsed .cml-dg-m-chev { display: inline-block; transform: rotate( -90deg ); }

/* ============================================================================
 * Phase 3.3 — Subtle animations (Option A).
 *
 * Opt-in only: motion runs when the chart carries the `.cml-anim` class
 * (Chart setting Animations = Subtle). The whole block is wrapped in
 * prefers-reduced-motion: no-preference, so an OS "reduce motion" preference
 * disables every effect regardless of the chart setting.
 *
 * CSS transform/opacity only. No layout shift: hover lift uses translate +
 * shadow (no margin/size change); folder pulse is a finite box-shadow ring;
 * popover and mobile children animate transform/opacity from their own box.
 * Connector routing, grid geometry and SVG are untouched.
 * ==========================================================================*/
@media ( prefers-reduced-motion: no-preference ) {

	/* Smooth the hover state change (desktop). */
	.cml-dg.cml-anim .cml-dg-card {
		transition: transform 0.16s ease, box-shadow 0.16s ease;
		will-change: transform;
	}

	/* (0) Entrance on load — cards fade + rise in once, staggered top-to-bottom.
	 * `cml-entering` pre-hides via opacity ONLY (never a transform), so connectors
	 * are measured at the cards' final positions before the reveal. The JS then
	 * swaps to `cml-enter`, which runs the animation. fill-mode: backwards means the
	 * finished cards revert to their base style, so the hover lift (transform) and
	 * the is-behind 0.85 opacity keep working afterwards. Gated here, so reduced
	 * motion shows the cards immediately (both classes become no-ops). */
	.cml-dg.cml-entering .cml-dg-card,
	.cml-dg.cml-entering .cml-connector-layer {
		opacity: 0;
	}
	.cml-dg.cml-enter .cml-dg-card {
		animation: cml-card-enter 0.42s ease-out backwards;
		animation-delay: var( --cml-enter-delay, 0ms );
	}
	.cml-dg.cml-enter .cml-connector-layer {
		animation: cml-fade-in 0.5s ease-out backwards;
	}
	@keyframes cml-card-enter {
		from { opacity: 0; transform: translateY( 8px ); }
		to   { opacity: 1; transform: translateY( 0 ); }
	}
	@keyframes cml-fade-in {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	/* (1) Card hover lift — desktop only, very subtle, no layout shift. */
	@media ( hover: hover ) and ( pointer: fine ) {
		.cml-dg.cml-anim .cml-dg-card:hover {
			transform: translateY( -2px );
			box-shadow: 0 2px 4px rgba( 16, 24, 40, 0.08 ), 0 12px 24px rgba( 16, 24, 40, 0.10 );
		}
	}

	/* (2) Folder click hint — soft one-time tap ring. Runs twice then stops,
	 * so it never repeats aggressively. Uses box-shadow (no layout shift). */
	.cml-dg.cml-anim .cml-dg-card.is-folder-btn {
		animation: cml-folder-hint 1.6s ease-out 0.4s 2;
	}
	@keyframes cml-folder-hint {
		0%   { box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.06 ), 0 6px 14px rgba( 16, 24, 40, 0.05 ), 0 0 0 0 rgba( 184, 134, 11, 0.0 ); }
		35%  { box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.06 ), 0 6px 14px rgba( 16, 24, 40, 0.05 ), 0 0 0 4px rgba( 184, 134, 11, 0.28 ); }
		100% { box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.06 ), 0 6px 14px rgba( 16, 24, 40, 0.05 ), 0 0 0 0 rgba( 184, 134, 11, 0.0 ); }
	}
	/* The hover ring should win over the hint while pointing at it. */
	.cml-dg.cml-anim .cml-dg-card.is-folder-btn:hover {
		animation: none;
	}

	/* (3) Folder popover fade + scale — subtle open, anchored top, no layout shift. */
	.cml-dg-pop.cml-anim {
		transform-origin: top center;
		animation: cml-pop-in 0.14s ease-out both;
	}
	@keyframes cml-pop-in {
		from { opacity: 0; transform: translateY( -4px ) scale( 0.98 ); }
		to   { opacity: 1; transform: translateY( 0 ) scale( 1 ); }
	}

	/* (4) Mobile accordion ease — children slide+fade in on expand. */
	.cml-dg-mobile.cml-anim .cml-dg-m-children.is-opening {
		animation: cml-acc-in 0.18s ease-out both;
	}
	@keyframes cml-acc-in {
		from { opacity: 0; transform: translateY( -4px ); }
		to   { opacity: 1; transform: translateY( 0 ); }
	}
}