/* The global Project navigation is deliberately quieter than the raised document. */
:root {
	--document-shell-header-height: calc(3rem + env(safe-area-inset-top));
}

.room-header {
	height: var(--document-shell-header-height);
	min-height: var(--document-shell-header-height);
}

@media (min-width: 1024px) {
	:root {
		--document-shell-header-height: calc(50px + env(safe-area-inset-top));
	}
}

@media (max-width: 639px) {
	:root[data-plan-coarse-pointer] {
		--document-shell-header-height: calc(3.75rem + env(safe-area-inset-top));
	}
}

.navigation-shell {
	position: relative;
	display: flex;
	height: 100%;
	min-height: 100%;
	overflow: hidden;
	background: var(--color-ground);
}

.navigation-content {
	position: relative;
	min-width: 0;
	min-height: 0;
	flex: 1;
}

.navigation-content[data-project-sidebar-trigger] .room-header {
	padding-left: 44px;
}

.anchored-child-host,
.anchored-child-parent {
	position: relative;
	height: 100%;
	min-height: 0;
}

.anchored-child-parent .workspace-frame {
	transition:
		filter 240ms cubic-bezier(0.16, 1, 0.3, 1),
		opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.anchored-child-host[data-child-visible] .anchored-child-parent .workspace-frame {
	filter: blur(3px);
	transform: scale(0.99);
	transform-origin: center;
	opacity: 0.68;
}

.anchored-child-host[data-child-presentation="closing"] .anchored-child-parent .workspace-frame {
	filter: none;
	transform: none;
	opacity: 1;
	transition-duration: 170ms;
	transition-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
}

.anchored-child-backdrop {
	position: absolute;
	z-index: 30;
	inset: var(--document-shell-header-height) 0 0;
	background: transparent;
	cursor: pointer;
	touch-action: manipulation;
}

.anchored-child-surface {
	position: absolute;
	z-index: 40;
	/* The centered 0.99 parent scale withdraws 0.5% from each edge. */
	inset: calc(var(--document-shell-header-height) + 12px + 0.5%) calc(24px + 0.5%)
		calc(24px + 0.5%);
	overflow: hidden;
	border: var(--edge-width) solid var(--color-edge);
	border-radius: var(--radius-xl);
	background: var(--color-page);
	box-shadow: var(--shadow-overlay);
	transform-origin: 50% 75%;
	animation: anchored-child-enter 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.anchored-child-host[data-child-presentation="closing"] .anchored-child-surface {
	animation: anchored-child-exit 170ms cubic-bezier(0.55, 0, 1, 0.45) both;
}

.anchored-child-surface .room-header {
	display: none;
}

.anchored-child-surface > [data-workspace-surface="child"] {
	background: transparent;
}

.anchored-child-surface .workspace-frame {
	margin: 0;
	border-radius: inherit;
	box-shadow: none;
}

@keyframes anchored-child-enter {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.975);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes anchored-child-exit {
	from {
		opacity: 1;
		transform: none;
	}
	to {
		opacity: 0;
		transform: translateY(6px) scale(0.985);
	}
}

@media (max-width: 1023px) {
	.anchored-child-surface {
		inset: var(--document-shell-header-height) 0 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.anchored-child-parent .workspace-frame {
		transition: none;
	}

	.anchored-child-host[data-child-visible] .anchored-child-parent .workspace-frame {
		transform: none;
	}

	.anchored-child-surface {
		animation-name: anchored-child-fade;
		animation-duration: 120ms;
	}

	.anchored-child-host[data-child-presentation="closing"] .anchored-child-surface {
		animation-name: anchored-child-fade-out;
	}

	@keyframes anchored-child-fade {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes anchored-child-fade-out {
		from {
			opacity: 1;
		}
		to {
			opacity: 0;
		}
	}
}

.project-sidebar-frame {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	min-width: 0;
	background: var(--color-ground);
}

.project-sidebar-motion-content {
	display: flex;
	width: 100%;
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
}

.motion-sidebar {
	width: 0;
	transition: width var(--sidebar-open-dur) var(--motion-move);
}

.motion-sidebar .project-sidebar {
	width: var(--project-sidebar-width, 0px);
	flex: 0 0 var(--project-sidebar-width, 0px);
	opacity: 0;
	transform: translateX(calc(-1 * var(--drawer-distance)));
	transition:
		opacity var(--sidebar-open-dur) var(--motion-move),
		transform var(--sidebar-open-dur) var(--motion-move);
	will-change: opacity, transform;
}

.motion-sidebar.is-open {
	width: var(--project-sidebar-width, 0px);
}

.motion-sidebar.is-open .project-sidebar {
	opacity: 1;
	transform: translateX(0);
}

.motion-sidebar.is-closing,
.motion-sidebar.is-closing .project-sidebar {
	pointer-events: none;
	transition-duration: var(--sidebar-close-dur);
}

.project-sidebar {
	--project-sidebar-hover: var(--color-gray-200);
	--project-sidebar-selected: color-mix(
		in oklch,
		var(--color-gray-200) 75%,
		var(--color-gray-300)
	);

	display: flex;
	width: 100%;
	min-width: 0;
	flex-direction: column;
	background: var(--color-ground);
	color: var(--color-text-tertiary);
}

.project-sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px 12px;
}

.project-sidebar-primary-actions,
.project-sidebar-footer-actions {
	display: flex;
	flex-direction: column;
	padding: 0 8px;
}

.project-sidebar-footer-actions {
	flex: 0 0 auto;
}

.project-sidebar-primary-action {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 10px;
	border-radius: 6px;
	padding: 6px 8px;
	font-size: var(--text-sm);
	font-weight: 500;
	text-align: left;
	color: var(--color-text-tertiary);
}

.project-sidebar-primary-action img,
.project-sidebar-action img {
	opacity: 0.5;
}

.project-sidebar-primary-action:hover,
.project-sidebar-primary-action:focus-visible,
.project-sidebar-project-row:hover,
.project-sidebar-project-row:focus-within,
.project-sidebar-document:hover,
.project-sidebar-document:focus-within,
.project-sidebar-account:hover,
.project-sidebar-account:focus-visible {
	background: var(--project-sidebar-hover);
}

.project-sidebar-projects-heading,
.project-sidebar-project-row,
.project-sidebar-document,
.project-sidebar-account {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.project-sidebar-projects-heading {
	padding: 4px 8px;
	font-size: var(--text-sm);
	font-weight: 500;
	color: color-mix(in srgb, var(--color-text-tertiary) 60%, transparent);
}

.project-sidebar-projects,
.project-sidebar-documents,
.project-sidebar-children {
	display: flex;
	flex-direction: column;
}

.project-sidebar-project-row {
	min-height: 32px;
	gap: 10px;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: var(--text-sm);
}

.project-sidebar-document {
	min-height: 33px;
	border-radius: 8px;
	padding: 4px 4px 4px 32px;
	font-size: var(--text-sm);
}

.project-sidebar-document-link {
	display: flex;
	align-items: center;
	gap: 6px;
	overflow: hidden;
}

.project-sidebar-document-current {
	background: var(--project-sidebar-selected);
	color: var(--color-text-primary);
}

.project-sidebar-document-ancestor {
	color: var(--color-text-primary);
}

.project-sidebar-child {
	display: flex;
	min-height: 30px;
	align-items: center;
	margin-left: 32px;
	border-left: var(--edge-width) solid var(--color-gray-300);
	border-radius: 0 6px 6px 0;
}

.project-sidebar-child:hover,
.project-sidebar-child:focus-within {
	background: var(--project-sidebar-hover);
}

.project-sidebar-child-link {
	display: flex;
	min-width: 0;
	flex: 1;
	align-items: center;
	padding: 5px 4px 5px 14px;
	overflow: hidden;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.25rem;
}

.project-sidebar-child-current {
	border-left-color: var(--color-brand);
	background: var(--project-sidebar-selected);
	color: var(--color-text-primary);
}

.project-sidebar-document-actions {
	display: flex;
	width: 0;
	flex: 0 0 auto;
	align-items: center;
	overflow: hidden;
	visibility: hidden;
}

.group\/document:hover .project-sidebar-document-actions,
.group\/document:focus-within .project-sidebar-document-actions,
:root[data-plan-coarse-pointer] .project-sidebar .project-sidebar-document-actions {
	width: auto;
	overflow: visible;
	visibility: visible;
}

.project-sidebar-action,
.project-sidebar-document-action {
	display: inline-flex;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	padding: 5px;
	color: inherit;
	opacity: 0;
	transition:
		opacity var(--duration-fast) var(--ease-out),
		background var(--duration-fast) var(--ease-out);
}

.project-sidebar-action:focus-visible,
.project-sidebar-document-action:focus-visible,
.project-sidebar-action:hover,
.project-sidebar-document-action:hover {
	background: var(--project-sidebar-selected);
	opacity: 1;
}

:is(.group\/sidebar-header, .group\/projects-heading, .group\/project):hover
	.project-sidebar-action,
:is(.group\/sidebar-header, .group\/projects-heading, .group\/project):focus-within
	.project-sidebar-action,
.project-sidebar-document:hover .project-sidebar-document-action,
.project-sidebar-document:focus-within .project-sidebar-document-action,
.project-sidebar-child:hover .project-sidebar-document-action,
.project-sidebar-child:focus-within .project-sidebar-document-action {
	opacity: 1;
}

.project-sidebar-status,
.project-sidebar-load-more {
	padding: 0 8px 4px 32px;
	font-size: 0.6875rem;
	line-height: 1rem;
	color: var(--color-text-quaternary);
}

.project-sidebar-load-more:hover,
.project-sidebar-load-more:focus-visible {
	color: var(--color-text-primary);
}

.project-sidebar-account {
	width: 100%;
	justify-content: flex-start;
	gap: 8px;
	border-radius: 6px;
	padding: 8px;
	font-size: var(--text-sm);
	font-weight: 500;
	text-align: left;
}

.project-sidebar-account-wrap {
	position: relative;
	padding: 8px;
}

.project-sidebar-account[aria-expanded="true"] {
	background: var(--project-sidebar-selected);
}

.project-sidebar-resize {
	position: absolute;
	inset-block: 0;
	right: -2px;
	z-index: 50;
	width: 4px;
	cursor: col-resize;
}

.project-sidebar-resize::after {
	position: absolute;
	inset-block: 0;
	left: 1px;
	width: 1px;
	background: var(--color-edge);
	content: "";
}

.project-sidebar-resize:focus-visible::after,
.project-sidebar-resize:hover::after {
	background: var(--color-brand);
}

.project-sidebar-expand {
	margin-right: 8px;
}

.project-sidebar-expand img {
	opacity: 0.5;
}

.navigation-shell > .project-sidebar-expand {
	position: absolute;
	left: 8px;
	top: 11px;
	z-index: 20;
}

.navigation-drawer {
	position: fixed;
	inset: 0;
	z-index: 50;
}

.motion-drawer {
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--drawer-open-dur) var(--motion-smooth-out);
	will-change: opacity;
}

.motion-drawer .navigation-focus-scope {
	transform: translateX(calc(-1 * var(--drawer-distance)));
	transition: transform var(--drawer-open-dur) var(--motion-smooth-out);
	will-change: transform;
}

.motion-drawer.is-open {
	pointer-events: auto;
	opacity: 1;
}

.motion-drawer.is-open .navigation-focus-scope {
	transform: translateX(0);
}

.motion-drawer.is-closing {
	opacity: 0;
	transition-duration: var(--drawer-close-dur);
}

.motion-drawer.is-closing .navigation-focus-scope {
	transform: translateX(calc(-1 * var(--drawer-distance)));
	transition-duration: var(--drawer-close-dur);
}

.navigation-drawer-backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	background: rgb(0 0 0 / 20%);
}

.navigation-drawer > .navigation-focus-scope {
	position: relative;
	z-index: 1;
	height: 100%;
	width: min(280px, calc(100vw - 24px));
}

.navigation-drawer .project-sidebar-frame {
	position: relative;
	height: 100%;
	width: 100%;
	box-shadow: var(--shadow-overlay);
}

.navigation-error {
	position: absolute;
	left: 16px;
	right: 16px;
	top: 16px;
	z-index: 15;
	border-radius: 6px;
	background: var(--color-destructive-wash);
	padding: 8px 12px;
	font-size: var(--text-sm);
	color: var(--color-destructive-ink);
}

.navigation-modal {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: grid;
	place-items: center;
	padding: 16px;
}

.motion-modal {
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--modal-open-dur) var(--modal-ease);
	will-change: opacity;
}

.motion-modal .navigation-modal-content {
	transform: scale(var(--modal-scale));
	transition: transform var(--modal-open-dur) var(--modal-ease);
	will-change: transform;
}

.motion-modal.is-open {
	pointer-events: auto;
	opacity: 1;
}

.motion-modal.is-open .navigation-modal-content {
	transform: scale(1);
}

.motion-modal.is-closing {
	opacity: 0;
	transition-duration: var(--modal-close-dur);
}

.motion-modal.is-closing .navigation-modal-content {
	transform: scale(var(--modal-scale-close));
	transition-duration: var(--modal-close-dur);
}

.navigation-modal-backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	background: rgb(0 0 0 / 20%);
}

.navigation-modal > .navigation-focus-scope {
	display: grid;
	height: 100%;
	width: 100%;
	place-items: center;
	pointer-events: none;
}

.navigation-modal-content {
	position: relative;
	width: min(100%, 28rem);
	border-radius: var(--radius-lg);
	background: var(--color-page);
	padding: 20px;
	box-shadow: var(--shadow-overlay);
	pointer-events: auto;
}

.navigation-dialog-list {
	display: flex;
	max-height: min(50vh, 20rem);
	flex-direction: column;
	gap: 4px;
	overflow-y: auto;
	margin-top: 12px;
}

.navigation-dialog-option {
	display: flex;
	min-height: 48px;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-radius: var(--radius-md);
	padding: 8px;
	text-align: left;
}

.navigation-dialog-option:hover:not(:disabled),
.navigation-dialog-option:focus-visible {
	background: var(--color-hover);
}

.navigation-account-menu {
	position: absolute;
	bottom: calc(100% + 4px);
	left: 8px;
	z-index: 1;
	border-radius: var(--radius-md);
	background: var(--color-page);
	padding: 4px;
	box-shadow: var(--shadow-overlay);
	transform-origin: bottom left;
}

.navigation-account-menu button {
	border-radius: var(--radius-sm);
	padding: 8px 12px;
	font-size: var(--text-sm);
}

.navigation-account-menu button:hover,
.navigation-account-menu button:focus-visible {
	background: var(--color-hover);
}

.document-actions-menu {
	position: fixed;
	z-index: 60;
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-md);
	background: var(--color-page);
	padding: 4px;
	box-shadow: var(--shadow-overlay);
}

.document-actions-menu button {
	min-height: 34px;
	border-radius: var(--radius-sm);
	padding: 7px 10px;
	font-size: var(--text-sm);
	text-align: left;
	color: var(--color-text-secondary);
}

.document-actions-menu button:hover,
.document-actions-menu button:focus-visible {
	background: var(--color-hover);
	color: var(--color-text-primary);
}

.document-actions-menu .document-actions-menu-destructive {
	color: var(--color-destructive-ink);
}

.document-actions-menu .document-actions-menu-destructive:hover,
.document-actions-menu .document-actions-menu-destructive:focus-visible {
	color: var(--color-destructive-ink);
}

.document-status-badge {
	display: inline-flex;
	min-width: 0;
	flex: 0 0 auto;
	align-items: center;
	border-radius: 9999px;
	background: var(--color-warning-wash);
	padding: 1px 6px;
	font-size: 0.625rem;
	font-weight: 600;
	line-height: 1rem;
	color: var(--color-warning-ink);
}

.document-read-only-status {
	margin-left: 6px;
}

:root[data-plan-coarse-pointer]
	.project-sidebar
	:where(.project-sidebar-action, .project-sidebar-document-action) {
	min-width: 44px;
	min-height: 44px;
}

:root[data-plan-coarse-pointer]
	.project-sidebar
	:where(.project-sidebar-action, .project-sidebar-document-action) {
	opacity: 1;
}

:root[data-plan-coarse-pointer]
	.project-sidebar
	:where(.project-sidebar-primary-action, .project-sidebar-project-row, .project-sidebar-document, .project-sidebar-account) {
	min-height: 44px;
}

:root[data-plan-coarse-pointer] .document-actions-menu button {
	min-height: 44px;
}

.document-title-trigger,
.document-title-label {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 2px;
	border-radius: var(--radius-sm);
	padding: 4px;
	font-size: var(--text-sm);
	color: var(--color-text-tertiary);
}

.document-title-trigger:hover:not(:disabled),
.document-title-trigger:focus-visible {
	background: var(--color-hover);
}

.document-parent-breadcrumb {
	min-width: 0;
	flex: 0 1 auto;
	justify-content: flex-start;
	padding-inline: 4px;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text-secondary);
}

.document-breadcrumb-separator {
	opacity: 0.45;
}

.document-child-breadcrumb {
	min-width: 0;
	flex: 1 1 auto;
	font-size: var(--text-sm);
	font-weight: 400;
	color: var(--color-text-primary);
}

@media (prefers-reduced-motion: reduce) {
	.motion-sidebar,
	.motion-sidebar .project-sidebar,
	.motion-drawer,
	.motion-drawer .navigation-focus-scope,
	.motion-modal,
	.motion-modal .navigation-modal-content {
		transition: none;
	}
}