.lay-rowscroll-project-desc {
	position: fixed;
	/* Above project modal (1000000) and its toolbar (1000002). */
	z-index: 1000010;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: var(--lay-rs-pd-width, 360px);
	height: var(--lay-rs-pd-height, 280px);
	max-width: calc(100vw - 24px);
	max-height: calc(100vh - 24px);
	padding:
		var(--lay-rs-pd-pad-top, 16px)
		var(--lay-rs-pd-pad-right, 16px)
		var(--lay-rs-pd-pad-bottom, 16px)
		var(--lay-rs-pd-pad-left, 16px);
	background-color: var(--lay-rs-pd-bg, #e8e8e8);
	color: var(--lay-rs-pd-color, #000);
	border-radius: var(--lay-rs-pd-radius, 16px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
	isolation: isolate;
	font-family: var(--lay-rs-pd-font-family, inherit);
	font-size: var(--lay-rs-pd-font-size, 14px);
	line-height: var(--lay-rs-pd-line-height, 1.45);
	overflow: hidden;
	opacity: 0;
	transform: translateY(10px) scale(0.98);
	/* No height transition — animating to height:auto shifts the header on minimize. */
	transition:
		opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
		transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: auto;
	overscroll-behavior: contain;
}

.lay-rowscroll-project-desc[hidden] {
	display: none !important;
}

.lay-rowscroll-project-desc.is-open {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.lay-rowscroll-project-desc.is-dragging {
	transition: none;
	cursor: grabbing;
	user-select: none;
}

.lay-rowscroll-project-desc.is-draggable .lay-rowscroll-project-desc__header {
	cursor: grab;
}

/* Same padding open/minimized — only height collapses. */
.lay-rowscroll-project-desc.is-minimized {
	height: auto;
	min-height: 0;
	max-height: none;
}

/* Liquid glass — same frosted blur language as .lay-rowscroll-project-modal__toolbar */
.lay-rowscroll-project-desc.is-bg-glass {
	background-color: color-mix(in srgb, var(--lay-rs-pd-bg, #e8e8e8) 38%, transparent);
	background-image: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.45) 0%,
		color-mix(in srgb, var(--lay-rs-pd-bg, #e8e8e8) 22%, transparent) 45%,
		color-mix(in srgb, var(--lay-rs-pd-bg, #e8e8e8) 28%, transparent) 100%
	);
	-webkit-backdrop-filter: blur(22px) saturate(165%);
	backdrop-filter: blur(22px) saturate(165%);
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.lay-rowscroll-project-desc.is-bg-glass {
		background-color: color-mix(in srgb, var(--lay-rs-pd-bg, #e8e8e8) 94%, white);
		background-image: none;
	}
}

@supports not (background-color: color-mix(in srgb, white 50%, transparent)) {
	.lay-rowscroll-project-desc.is-bg-glass {
		background-color: rgba(232, 236, 240, 0.42);
		background-image: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.45) 0%,
			rgba(236, 240, 244, 0.22) 45%,
			rgba(236, 240, 244, 0.28) 100%
		);
	}
}

.lay-rowscroll-project-desc__header {
	position: relative;
	flex: 0 0 28px;
	box-sizing: border-box;
	width: 100%;
	height: 28px;
	min-height: 28px;
	max-height: 28px;
	margin: 0 0 12px;
	padding: 0 30px 0 0; /* room for absolutely positioned toggle */
}

.lay-rowscroll-project-desc.is-minimized .lay-rowscroll-project-desc__header {
	margin-bottom: 0;
}

.lay-rowscroll-project-desc__title {
	display: block;
	width: 100%;
	height: 28px;
	margin: 0;
	padding: 0;
	font-weight: 600;
	font-size: inherit;
	line-height: 28px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Same clean line style as .lay-rowscroll-project-modal__close.
   Absolutely pinned so open/minimized never shifts its Y. */
.lay-rowscroll-project-desc__toggle {
	position: absolute;
	top: 3px; /* (28 - 22) / 2 — fixed, not flex-dependent */
	right: 0;
	box-sizing: content-box;
	display: block;
	width: 22px;
	height: 22px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: none !important;
	background: transparent !important;
	color: inherit !important;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	border-radius: 0 !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

.lay-rowscroll-project-desc__toggle:focus,
.lay-rowscroll-project-desc__toggle:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

.lay-rowscroll-project-desc__toggle-icon {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.lay-rowscroll-project-desc__toggle-line {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 2px;
	margin-top: -1px;
	margin-left: -50%;
	background: currentColor;
	border-radius: 1px;
	transform: rotate(0deg);
	transition:
		transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Expanded = minus (−): vertical line hidden */
.lay-rowscroll-project-desc__toggle-line--v {
	opacity: 0;
	transform: rotate(90deg);
}

/* Hover/focus while open: − → + (same timing as modal close − → ×) */
.lay-rowscroll-project-desc:not(.is-minimized) .lay-rowscroll-project-desc__toggle:hover .lay-rowscroll-project-desc__toggle-line--v,
.lay-rowscroll-project-desc:not(.is-minimized) .lay-rowscroll-project-desc__toggle:focus-visible .lay-rowscroll-project-desc__toggle-line--v {
	opacity: 1;
}

/* Minimized = plus (+) */
.lay-rowscroll-project-desc.is-minimized .lay-rowscroll-project-desc__toggle-line--v {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.lay-rowscroll-project-desc__toggle-line {
		transition: none;
	}

	.lay-rowscroll-project-desc:not(.is-minimized) .lay-rowscroll-project-desc__toggle:hover .lay-rowscroll-project-desc__toggle-line--v,
	.lay-rowscroll-project-desc:not(.is-minimized) .lay-rowscroll-project-desc__toggle:focus-visible .lay-rowscroll-project-desc__toggle-line--v {
		opacity: 1;
	}
}

.lay-rowscroll-project-desc__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	touch-action: pan-y;
}

.lay-rowscroll-project-desc.is-minimized .lay-rowscroll-project-desc__body {
	display: none;
}

.lay-rowscroll-project-desc__content,
.lay-rowscroll-project-desc__content p,
.lay-rowscroll-project-desc__content span,
.lay-rowscroll-project-desc__content a {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.lay-rowscroll-project-desc__content p:first-child {
	margin-top: 0;
}

.lay-rowscroll-project-desc__content p:last-child {
	margin-bottom: 0;
}