/* Bricks Craft — State Engine frontend styles */

/* Smooth value changes on bound elements */
.bc-state-live,
[data-bc-bind] {
	transition: color .3s ease, background-color .3s ease, opacity .3s ease, transform .3s ease;
}

/* Live panel (state values + triggers + export) */
.bc-state-panel {
	--bc-accent: #6366f1;
	--bc-accent-2: #8b5cf6;
	--bc-bg: #ffffff;
	--bc-bg-soft: #f5f6fb;
	--bc-line: #eceef4;
	--bc-muted: #8a90a2;
	--bc-ink: #1e2230;
	box-sizing: border-box;
	/* Full-bleed: break out of the centered Bricks container to span the
	   full page/viewport width. */
	width: 88%;
	max-width: 1100px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin: 20px 0;
	padding: 0;
	border: 1px solid var(--bc-line);
	border-radius: 18px;
	background: var(--bc-bg);
	color: var(--bc-ink);
	font: 13px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 10px 40px rgba(31, 34, 48, .08), 0 2px 8px rgba(31, 34, 48, .04);
	overflow: hidden;
}
.bc-state-panel * { box-sizing: border-box; }

.bc-state-panel-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: .01em;
	color: #fff;
	background: linear-gradient(120deg, var(--bc-accent), var(--bc-accent-2));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.bc-state-panel-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: #4ade80;
	animation: bcPulse 1.8s ease-out infinite;
}
@keyframes bcPulse {
	0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
	70%  { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
	100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.bc-state-panel-sub {
	margin-inline-start: auto;
	font-weight: 700;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: #fff;
	background: rgba(255,255,255,.18);
	border: 1px solid rgba(255,255,255,.25);
	padding: 3px 10px;
	border-radius: 999px;
	backdrop-filter: blur(4px);
}

.bc-state-panel-label {
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--bc-muted);
	margin: 18px 18px 8px;
}

.bc-state-panel-values { padding: 0 18px; }
.bc-state-panel-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border: 1px solid var(--bc-line);
	border-radius: 12px;
	background: var(--bc-bg-soft);
	margin-bottom: 8px;
	animation: bcRowIn .25s ease both;
	transition: border-color .15s ease, transform .06s ease, box-shadow .15s ease;
}
@keyframes bcRowIn {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}
.bc-state-panel-row:hover {
	border-color: #d9ddf0;
	box-shadow: 0 2px 10px rgba(99, 102, 241, .08);
}
.bc-state-panel-key {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 700;
	color: var(--bc-accent);
}
.bc-state-panel-sep { color: var(--bc-muted); opacity: .6; }
.bc-state-panel-val {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 700;
	color: var(--bc-ink);
	background: #fff;
	border: 1px solid var(--bc-line);
	padding: 2px 10px;
	border-radius: 999px;
	word-break: break-all;
}
.bc-state-panel-init {
	margin-inline-start: auto;
	font-size: 11px;
	font-weight: 500;
	color: var(--bc-muted);
	white-space: nowrap;
}

/* Scope badge shown next to every state, colored by scope. */
.bc-state-badge {
	font-size: 9px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 3px 8px;
	border-radius: 999px;
	border: 1px solid transparent;
}
.bc-state-badge-global  { color: #fff; background: linear-gradient(135deg, #7c3aed, #4338ca); box-shadow: 0 1px 3px rgba(67, 56, 202, .35); }
.bc-state-badge-page    { color: #065f46; background: #d1fae5; border-color: #a7f3d0; }
.bc-state-badge-element { color: #fff; background: linear-gradient(135deg, #0891b2, #0e7490); box-shadow: 0 1px 3px rgba(14, 116, 144, .35); }
.bc-state-badge-local   { color: #334155; background: #e2e8f0; border-color: #cbd5e1; }

.bc-state-panel-actions {
	display: flex;
	flex-direction: row;
	
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 16px 4px;
}
.bc-state-panel-actions .bc-action-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	padding: 8px 14px;
	font-size: 12px;
	line-height: 1.2;
	font-weight: 600;
	color: #fff;
	background: linear-gradient(180deg, #6366f1, #4f46e5);
	border: 1px solid #4f46e5;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(79, 70, 229, .25);
	transition: transform .06s ease, box-shadow .15s ease, filter .15s ease;
}
.bc-state-panel-actions .bc-action-trigger:hover {
	filter: brightness(1.07);
	box-shadow: 0 4px 14px rgba(79, 70, 229, .35);
}
.bc-state-panel-actions .bc-action-trigger:active {
	transform: translateY(1px);
	box-shadow: 0 1px 4px rgba(79, 70, 229, .3);
}
.bc-state-panel-actions .bc-action-trigger:focus-visible {
	outline: 2px solid #c7d2fe;
	outline-offset: 2px;
}
.bc-state-panel-actions .bc-action-reset {
	color: #b45309;
	background: #fffbeb;
	border-color: #fcd34d;
	box-shadow: none;
}
.bc-state-panel-actions .bc-action-reset:hover {
	color: #fff;
	background: linear-gradient(180deg, #f59e0b, #d97706);
	border-color: #d97706;
	box-shadow: 0 4px 14px rgba(217, 119, 6, .3);
}

.bc-state-panel-export {
	border-top: 1px solid var(--bc-line);
	margin-top: 10px;
	padding: 12px 16px 16px;
	background: #fbfbfe;
}
.bc-state-panel-export > summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--bc-muted);
	list-style: none;
}
.bc-state-panel-export > summary::-webkit-details-marker { display: none; }
.bc-state-panel-export > summary::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-inline-end: 8px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--bc-muted);
	transform: rotate(-90deg);
	transition: transform .15s ease;
	vertical-align: middle;
}
.bc-state-panel-export[open] > summary::before { transform: rotate(0deg); }
.bc-state-panel-export textarea.bc-state-export {
	width: 100%;
	min-height: 140px;
	margin-top: 10px;
	padding: 10px 12px;
	border: 1px solid var(--bc-line);
	border-radius: 9px;
	background: #0f172a;
	color: #d1fae5;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	line-height: 1.5;
	resize: vertical;
}
.bc-state-panel-export .bc-state-copy {
	margin-top: 8px;
	cursor: pointer;
	padding: 7px 14px;
	border: none;
	border-radius: 9px;
	background: var(--bc-accent);
	color: #fff;
	font: inherit;
	font-weight: 700;
}
.bc-state-panel-export .bc-state-copy:hover { background: #4338ca; }

/* Toast alerts (errors + empty states) */
#bc-toasts {
	position: fixed;
	inset-block-start: 16px;
	inset-inline-end: 16px;
	z-index: 1000000;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 320px;
	pointer-events: none;
}
.bc-toast {
	pointer-events: auto;
	padding: 10px 14px;
	border-radius: 10px;
	font: 13px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	color: #fff;
	box-shadow: 0 8px 24px rgba(0,0,0,.25);
	opacity: 1;
	transform: translateY(0);
	transition: opacity .3s ease, transform .3s ease;
}
.bc-toast-hide { opacity: 0; transform: translateY(-8px); }
.bc-toast-info  { background: #334155; }
.bc-toast-warn  { background: #b45309; }
.bc-toast-error { background: #b91c1c; }

/* List binding container */
.bc-each { display: block; }

/* Floating monitor inside the Bricks builder (removed/hidden on the frontend) */
.bc-builder-monitor {
	display: none; /* hidden everywhere unless JS activates it in the builder */
}
.bc-builder-monitor--active {
	display: block;
	position: fixed;
	inset-inline-start: 12px;
	inset-block-end: 12px;
	z-index: 999999;
	max-width: 260px;
	max-height: 60vh;
	overflow: auto;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba(20, 22, 28, .92);
	color: #fff;
	font: 12px/1.5 ui-monospace, monospace;
	box-shadow: 0 6px 24px rgba(0,0,0,.35);
	pointer-events: none; /* observe only — never hijack builder selection */
}
.bc-builder-monitor--active .bc-builder-monitor-head {
	font-weight: 700;
	margin-bottom: 6px;
	opacity: .8;
}
.bc-builder-monitor--active .bc-builder-monitor-row { padding: 1px 0; }
.bc-builder-monitor--active .bc-builder-monitor-key { color: #8fd3ff; }
.bc-builder-monitor--active .bc-builder-monitor-init { color: rgba(255,255,255,.55); font-size: 10px; }
.bc-builder-monitor--active .bc-builder-monitor-actions {
	display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;
	pointer-events: none;
}
.bc-builder-monitor--active .bc-builder-monitor-actions .bc-action-trigger {
	font-size: 10px; padding: 4px 9px; border-radius: 999px;
	border: 1px solid rgba(255,255,255,.28); background: rgba(99,102,241,.85); color: #fff;
	cursor: pointer; transition: filter .15s ease, transform .06s ease;
}
.bc-builder-monitor--active .bc-builder-monitor-actions .bc-action-trigger:hover { filter: brightness(1.12); }
.bc-builder-monitor--active .bc-builder-monitor-actions .bc-action-trigger:active { transform: translateY(1px); }
.bc-builder-monitor--active .bc-builder-monitor-actions .bc-action-reset {
	background: rgba(245,158,11,.85); border-color: rgba(253,230,138,.6);
}

/* Watchers section inside the builder monitor */
.bc-builder-monitor--active .bc-builder-monitor-watchers {
	margin-top: 8px;
	border-top: 1px solid rgba(255,255,255,.18);
	padding-top: 6px;
}
.bc-builder-monitor--active .bc-builder-monitor-label {
	font-weight: 700; opacity: .7; margin-bottom: 4px;
}
.bc-builder-monitor--active .bc-builder-monitor-watch {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
	padding: 1px 0; font-size: 11px;
}
.bc-builder-monitor--active .bc-builder-monitor-wstate { color: #8fd3ff; }
.bc-builder-monitor--active .bc-builder-monitor-wop { color: #ffd479; }
.bc-builder-monitor--active .bc-builder-monitor-wval { color: #fff; }
.bc-builder-monitor--active .bc-builder-monitor-arrow { opacity: .5; }
.bc-builder-monitor--active .bc-builder-monitor-waction { color: #b6f5c2; }
.bc-builder-monitor--active .bc-builder-monitor-welse { color: rgba(255,255,255,.6); font-size: 10px; }

/* Watchers section inside the live panel */
.bc-state-panel-watchers {
	border-top: 1px solid var(--bc-line);
	margin-top: 10px;
	padding: 12px 16px 4px;
}
.bc-state-panel-watch {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	padding: 3px 0; font-size: 12px;
}
.bc-state-panel-wstate { font-weight: 600; color: var(--bc-accent); }
.bc-state-panel-wop { color: var(--bc-muted); }
.bc-state-panel-wval { color: var(--bc-ink); }
.bc-state-panel-warrow { color: var(--bc-muted); }
.bc-state-panel-arrow { color: var(--bc-muted); }
.bc-state-panel-waction { font-weight: 600; }
.bc-state-panel-welse { color: var(--bc-muted); font-size: 11px; }