/* Layer list styling */
.layer-list { list-style: none !important; list-style-type: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--pfse-spacing-2); }
.layer-list > li { list-style: none !important; }
.layer-list li::marker { content: ""; }


.layer-item {
	position: relative;
	border: 1px solid var(--pfse-border-secondary);
	border-radius: var(--pfse-radius-md);
	background: var(--pfse-surface-primary);
	padding: var(--pfse-spacing-2);
	display: flex;
	flex-direction: column;
	gap: var(--pfse-spacing-2);
	transition:
		border-color var(--pfse-anim-micro) var(--pfse-ease-standard),
		box-shadow var(--pfse-anim-micro) var(--pfse-ease-standard),
		background-color var(--pfse-anim-micro) var(--pfse-ease-standard);
	overflow: visible;
}

.layer-item.selected,
.layer-item[data-state="active"] {
	border-color: var(--pfse-accent-primary);
	box-shadow: 0 0 0 1px var(--pfse-accent-primary);
	padding-left: calc(var(--pfse-spacing-2) + var(--pfse-spacing-2));
	background: color-mix(in srgb, var(--pfse-accent-primary) 10%, var(--pfse-surface-primary) 90%);
}

.layer-item.selected::before,
.layer-item[data-state="active"]::before {
	content: "";
	position: absolute;
	inset: var(--pfse-spacing-2) auto var(--pfse-spacing-2) 0;
	width: 6px;
	border-radius: var(--pfse-radius-sm);
	background: var(--pfse-accent-primary);
}

.layer-item.selected::after,
.layer-item[data-state="active"]::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(-100%, -50%);
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid var(--pfse-accent-primary);
	pointer-events: none;
}

.layer-item:hover:not(.selected):not([data-state="active"]) {
	background: color-mix(in srgb, var(--pfse-accent-primary) 6%, var(--pfse-surface-primary) 94%);
	border-color: var(--pfse-border-primary);
}

.layer-item:focus-visible,
.layer-item:focus-within {
	outline: var(--pfse-focus-ring-width) solid var(--pfse-focus-ring-color);
	outline-offset: 3px;
}

.layer-item[aria-disabled="true"] {
	opacity: 0.65;
	cursor: not-allowed;
}

.layer-badge--active {
	margin-left: var(--pfse-spacing-2);
	padding: var(--pfse-spacing-1) var(--pfse-spacing-2);
	border-radius: var(--pfse-radius-sm);
	border: 1px solid var(--pfse-accent-primary);
	background: color-mix(in srgb, var(--pfse-accent-primary) 16%, var(--pfse-surface-primary) 84%);
	color: var(--pfse-text-high);
	font-size: 12px;
	font-weight: 700;
}

.layer-row { display: flex; align-items: center; gap: var(--pfse-spacing-2); }

.layer-row--title { justify-content: space-between; }

.layer-title-group { display: inline-flex; align-items: center; gap: var(--pfse-spacing-2); min-width: 0; }

.layer-row--subtitle { justify-content: space-between; }

.layer-name { background: transparent; border: none; color: var(--pfse-text-high); font-weight: 600; font-size: 16px; padding: 0; text-align: left; cursor: pointer; flex: 1 1 auto; }

.layer-name:hover { color: var(--pfse-text-muted); }

.layer-actions { display: inline-flex; align-items: center; gap: var(--pfse-spacing-2); }

.layer-pill { display: inline-flex; align-items: center; gap: var(--pfse-spacing-1); padding: 4px 8px; border-radius: var(--pfse-radius-sm); border: 1px solid var(--pfse-border-secondary); background: var(--pfse-surface-secondary); color: var(--pfse-text-high); font-size: 12px; font-weight: 600; transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease, box-shadow 120ms ease; }

.layer-meta { display: inline-flex; align-items: center; gap: var(--pfse-spacing-2); color: var(--pfse-text-muted); font-size: 12px; }

.layer-meta span { display: inline-flex; align-items: center; gap: 4px; }

.layer-meta .layer-pill + .layer-pill { margin-left: var(--pfse-spacing-1); }

.layer-icon-btn { background: transparent; border: 1px solid var(--pfse-border-secondary); color: var(--pfse-text-high); border-radius: var(--pfse-radius-sm); padding: 6px; min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

.layer-icon-btn:hover { border-color: var(--pfse-border-primary); }

.layer-icon-btn[aria-pressed="true"] { border-color: var(--pfse-accent-primary); background: color-mix(in srgb, var(--pfse-accent-primary) 14%, var(--pfse-surface-primary) 86%); }

.layer-stats { display: inline-flex; gap: var(--pfse-spacing-2); }

.layer-row--trace-tabs { align-items: center; flex-wrap: wrap; gap: var(--pfse-spacing-2); }

.layer-trace-tabs { display: inline-flex; gap: var(--pfse-spacing-2); }

.layer-pill--ghost { background: var(--pfse-surface-primary); color: var(--pfse-text-muted); border-style: dashed; }

.layer-pill--active { border-color: var(--pfse-accent-primary); background: color-mix(in srgb, var(--pfse-accent-primary) 18%, var(--pfse-surface-primary) 82%); color: var(--pfse-text-high); font-weight: 700; }

.layer-pill--solid { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pfse-accent-primary) 22%, transparent); }

.layer-pill:hover:not(.layer-pill--active) { border-color: var(--pfse-border-primary); background: color-mix(in srgb, var(--pfse-accent-primary) 10%, var(--pfse-surface-secondary) 90%); color: var(--pfse-text-high); }

.layer-pill:focus-visible { outline: var(--pfse-focus-ring-width) solid var(--pfse-focus-ring-color); outline-offset: 2px; }

.layer-pill[disabled],
.layer-pill[aria-disabled="true"] {
	opacity: 0.6;
	cursor: not-allowed;
	border-style: dashed;
	background: var(--pfse-surface-primary);
	color: var(--pfse-text-muted);
}

.layer-replicator { display: inline-flex; align-items: center; gap: var(--pfse-spacing-2); margin-left: auto; }

.layer-replicator-controls { display: inline-flex; align-items: center; gap: var(--pfse-spacing-1); }

.layer-replicator-input { width: 72px; text-align: center; background: var(--pfse-surface-secondary); color: var(--pfse-text-high); border: 1px solid var(--pfse-border-secondary); border-radius: var(--pfse-radius-sm); padding: 4px 6px; }