.main-menu-container {
	--icon-size: 1.75em;
	--icon-inline-padding: .125em;
	--icon-block-padding: .125em;
	--_hamburger-icon-size: var(--icon-size);
	--_hamburger-padding: var(--icon-block-padding);

	.actor.icon {
		color: var(--color-brand);
		aspect-ratio: 1;
		border-radius: 100%;
		border: 3px solid currentColor;
		overflow: hidden;
	}
}
.menu-option.actor {
	--_color-menu: var(--color-menu);
	--_color-menu-hover: var(--color-menu-hover);

	.menu-link {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			'icon realname'
			'icon email';
		align-items: center;
		gap: 0 1ch;

		.icon-container {
			grid-area: icon;
		}
		.realname {
			grid-area: realname;
			line-height: var(--lh-secondary);
		}
		.email {
			grid-area: email;
			font-size: var(--fs-x-small);
		}
	}

	&:is(:hover, :focus-visible){

		.icon-container {
			color: var(--color-brand-alt);
		}
	}
}
.mobile .menu-option.actor {
	--_color-menu: var(--color-mobile-menu);
	--_color-menu-hover: var(--color-mobile-menu-hovered);

	padding: .25lh .5em;
}

body:has(.sendora):not(.disable-animations) {
	--scale: 1.11;
	--color-boxshadow-hover: hsla(0deg, 0%, 0%, .125);
	--spread-boxshadow-hover: .5rem;

	.animated {
		--opacity: .9;

		position: relative;
		transition:
			transform 150ms linear,
			opacity 150ms linear;
		will-change: transform;
	}
	.animated::before {
		transition: opacity 150ms linear;

		content: '';
		position: absolute;
		inset: 0;
		border-radius: inherit;
		box-shadow:
			0 0 calc(var(--spread-boxshadow-hover) * 3) var(--spread-boxshadow-hover) var(--color-boxshadow-hover),
			0 0 var(--spread-boxshadow-hover) calc(var(--spread-boxshadow-hover) / 4) var(--color-boxshadow-hover);
		opacity: 0;
		z-index: -1;
	}
	.animated:is(:hover, :focus-within) {
		z-index: 1;
		&:not(:has(.command:is(:hover, :focus-within))) {
			transform: scale(var(--scale));
		}
	}
	.animated:is(:hover, :focus-within):not(:has(.command:is(:hover, :focus-within)))::before {
		opacity: 1;
	}
	*:has( > .item:is(:hover, :focus-within)) .item.animated:not(:hover, :focus-within) {
		opacity: var(--opacity);
	}
}

main:has(.sendora.with-commands:not(.hidden)) {
	overflow-x: clip;
}
#main-container:has(.sendora.with-panels:has(.aside-area)) {
	@media (width <= 100ch){
		overflow-x: clip;
	}
}
.sendora {
	--mosaic-min-width: 32ch;
	--thumbnail-background: linear-gradient(to bottom, #ffffff, #f0f0f0);
	--top-margin: 1lh;

	--padding-block: .25lh;
	--padding-inline: 1ch;
	--padding: var(--padding-block) var(--padding-inline);

	--ui-border-radius: .5em;
	--aspect-ratio: 16 / 9;

	--command-color: var(--clr-300);
	--command-color-hover: var(--clr-700);
	--command-border-radius: .5em;

	--block-pad: 1lh;
	--inline-pad: 1ch;
	--scroll-gutter-safe: 2px;

	--base-color: var(--clr-300);
	--highlight-color: var(--clr-700);

	.jsu-notch-content.bottom-right {
		--_border-thickness: -1px;
	}

	h2, h3 {
		font-weight: var(--fw-bolder);
	}

	isolation: isolate;

	&.main-container {
		margin-block-start: var(--top-margin);

		display: grid;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			'header'
			'content';
		gap: .25lh 1ch;

		&.with-commands {
			grid-template-rows: auto 1fr auto;
			grid-template-areas:
				'header'
				'content'
				'commands';
		}

		&.with-panels {
			grid-template-columns: minmax(auto, 40ch) 1fr;
			grid-template-rows: auto auto 1fr;
			grid-template-areas:
				'panelswitch panelswitch'
				'header header'
				'aside content';

			&.with-commands {
				grid-template-rows: auto auto 1fr auto;
				grid-template-areas:
					'panelswitch panelswitch'
					'header header'
					'aside content'
					'commands commands';
			}
		}

		.panel-switch {
			grid-area: panelswitch;
			display: none;
		}
		.header-area {
			grid-area: header;
		}
		.aside-area {
			grid-area: aside;
		}
		.content-area {
			grid-area: content;
		}
		.commands-area {
			grid-area: commands;
			z-index: 9;
		}

		@media (width <= 100ch){
			&.with-panels:has(.aside-area) {
				--animation: 250ms ease;

				margin-block-start: 0;

				grid-template-columns: 1fr;
				grid-template-areas:
					'panelswitch'
					'header'
					'content';

				&.with-commands {
					grid-template-areas:
						'panelswitch'
						'header'
						'content'
						'commands';
				}

				.aside-area,
				.content-area {
					grid-area: content;
					opacity: 0;
					transform: translateX(-100%);

					transition: transform var(--animation), opacity var(--animation);
				}

				&:not(:has(.widget-panel-switch .value:checked)) {
					.aside-area {
						transform: translateX(0);
						opacity: 1;
					}
				}
				&:has(.widget-panel-switch .value:checked) {
					.content-area {
						transform: translateX(0);
						opacity: 1;
					}
				}

				.panel-switch {
					position: sticky;
					top: 0;
					display: grid;
					place-items: center;
					margin-block-end: var(--top-margin);

					z-index: 2;
				}
				&:is(#sendora-file-edit-container, #sendora-projects-upload-container) {
					.panel-switch {
						top: calc(var(--header-height) + 2px);
					}
				}
				.widget-panel-switch {
					display: inline-grid;
					padding-block: .25lh .125lh;
					padding-inline: 1.5ch;
					border-end-start-radius: var(--ui-border-radius);
					border-end-end-radius: var(--ui-border-radius);
					background: var(--blocks-background);
					box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

					.indicator {
						display: block;
						max-width: fit-content;
						transition: all 250ms ease;

						--icon-size: 1.25lh;
						--icon-inline-padding: 2px;
						--icon-block-padding: 2px;
					}

					&:has(.value) {
						.off {
							display: block;
						}
						.on {
							display: none;
						}
						.indicator {
							transform: scaleX(-1);
						}
					}
					&:has(.value:checked) {
						.off {
							display: none;
						}
						.on {
							display: block;
						}
						.indicator {
							transform: scaleX(1);
						}
					}
				}
			}
		}
	}

	&.with-drop-area {
		.drop-area-container {
			/* overlay */
			&:has(.drop-area) {
				position: relative;

				.drop-area {
					--icon-size: 4lh;

					position: absolute;
					inset: 0;
					z-index: 9;

					border: 1px dashed var(--ui-color-accent);
					border-radius: var(--ui-border-radius);
					background: var(--blocks-background);
					padding: 1lh 2ch;

					opacity: 0;
					pointer-events: none;
					transition: opacity 150ms ease-out;

					display: grid;
					place-items: center;

					&:not([aria-hidden="true"]) {
						opacity: 1;
						pointer-events: all;
					}
					.drop-info-container {
						margin-block-start: calc(-1 * var(--icon-size) + 1lh);
					}

					.drop-info-container > * {
						margin-inline: auto;
					}
				}
			}
			&:has(.drop-area:not([aria-hidden="true"])) .fullheight {
				overflow-y: hidden;
			}
			&:has(.drop-area:not([aria-hidden="true"])) * {
				pointer-events: none;
			}

			/* background */
			.empty-drop-area {
				--icon-size: 4lh;

				margin-block-start: calc(-1 * var(--icon-size));
				padding: 1lh 2ch;
				border-radius: var(--border-radius);

				&:has(.upload-icon) {
					cursor: pointer;

					.upload-icon {
						margin-inline: auto;
					}
				}
			}
		}
	}

	&.card {
		--border-radius: 1em;

		.project {
			border-radius: var(--border-radius);
			border: var(--ui-border);
			background: var(--blocks-background);
		}

		.thumbnail-container {
			position: relative;
			border-start-start-radius: inherit;
			border-start-end-radius: inherit;

			background: var(--thumbnail-background);
			aspect-ratio: var(--aspect-ratio);
			max-width: 100%;

			display: grid;
			place-items: center;

			& > :where(svg, img) {
				border-radius: inherit;
			}

			&:has(> svg){
				padding: .25lh .5ch;

				svg {
					height: 80%;
					max-width: 100%;
					max-height: 100%;
				}
			}

			.project-entity {
				--_box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

				position: absolute;
				inset-inline-start: 0;
				inset-block-start: 0;
				z-index: 1;

				padding: 0;
				border: 0;
				border-start-start-radius: inherit;
				border-start-end-radius: 0;
				border-end-end-radius: var(--ui-border-radius);
				border-end-start-radius: 0;
				background: transparent;

				&:is(:focus-visible) {
					outline-offset: 0;
					outline-color: var(--ui-color);
				}


				.project-entity-text {
					display: block;
					max-width: 30ch;

					color: var(--color-brand-on);
					padding: .25lh 2ch;
					box-shadow: var(--_box-shadow);
					font-size: var(--fs-smaller);
					position: relative;
					border-radius: inherit;

					&::before {
						position: absolute;
						content: '';
						z-index: -1;
						inset: 0;
						background: var(--color-brand);
						border-radius: inherit;
					}
				}

				&.interactive {
					.project-entity-text::before {
						opacity: .92;
					}
				}

				&.interactive:is(:hover, :focus-visible){
					.project-entity-text::before {
						opacity: 1;
						background: var(--color-brand-alt);
					}
				}
			}
		}
	}

	.file-form {
		--padding-block: .5lh;
		--padding-inline: 1ch;
		--padding: var(--padding-block) var(--padding-inline);

		border: var(--ui-border);
		border-color: var(--border-color);
		border-radius: inherit;
		padding: var(--padding);
		background: var(--blocks-background);

		display: grid;
		grid-template-rows: auto 1fr auto auto auto auto;
		grid-template-areas:
			'name'
			'desc'
			'tag'
			'meta'
			'playable';
		gap: .25lh 1ch;

		&:has(.playable-downloadable.hidden) {
			grid-template-rows: auto 1fr auto auto auto;
			grid-template-areas:
				'name'
				'desc'
				'tag'
				'meta';
		}

		.container {
			.name {
				grid-area: name;
			}
			.desc {
				grid-area: desc;

				--_min-height: 3lh;

				align-self: stretch;

				&:has(.ql-toolbar:not(.hidden)) {
					--_min-height: 3.28lh;
				}
			}
			.tag {
				grid-area: tag;
			}
		}

		.meta {
			grid-area: meta;

			font-size: var(--fs-small);
			color: var(--base-color);

			.value {
				font-size: var(--fs-smaller);

				&.origname,
				&.size {
					color: var(--highlight-color);
				}
			}
		}

		.playable-downloadable {
			grid-area: playable;

			&:has(.playable.value:not(:checked)) .play-only.container {
				display: none;
			}

			.container {
				padding-block: .125lh;

				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				justify-content: end;
				gap: 0 1ch;
			}

			.playable.container:has(.value:checked) {
				.legend.download {
					display: none;
				}
			}
			.playable.container:has(.value:not(:checked)) {
				.legend.download-play {
					display: none;
				}
			}
			.play-only.container:has(.value:checked) {
				.legend.download-play {
					display: none;
				}
			}
			.play-only.container:has(.value:not(:checked)) {
				.legend.play {
					display: none;
				}
			}
		}
	}

	.clamped {
		--block-end-fs: calc(1lh - 1rem);

		display: -webkit-box;
		-webkit-line-clamp: var(--clamp, 2);
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;

		padding-block-end: max(0px, var(--block-end-fs));
	}
	.break-anywhere {
		white-space: normal;
		overflow-wrap: anywhere;
		word-break: break-word;
		word-break: break-all;
		line-height: var(--lh-secondary);
	}
	.wider:where(div) {
		width: 100%;
		max-width: min(100%, var(--input-max-width));
	}
	.not-visible {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0,0,0,0);
		white-space: nowrap;
		border: 0;

		&:is(:focus, :focus-visible, :focus-within){
			outline: 0;
		}
	}

	input::placeholder, textarea::placeholder {
		color: rgba(0, 0, 0, .5);
		font-style: normal;
		font-size: var(--fs-smaller);
	}
	.fullheight {
		padding-block-start: 2px;
		min-height: 100%;
		height: 0;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-gutter: stable;
	}

	.command.icon-container {
		--_background: var(--blocks-background);
		--_color: var(--command-color);
		--_color-hover: var(--command-color-hover);
		--_border-radius: var(--command-border-radius);
		--_border: var(--ui-border);

		padding: 0;
		color: var(--_color);
		background: var(--_background);
		border-radius: var(--_border-radius);
		border: var(--_border);

		&:is(:focus-visible, :hover){
			color: var(--_color-hover);
		}
	}

	.project-member {
		--icon-size: 1.25lh;
		--icon-block-padding: .125em;
		--icon-color: var(--color-brand);
		--realname-fs: var(--fs-medium);
		--email-fs: var(--fs-small);

		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			'icon nameemail';
		align-items: center;
		gap: 0 1ch;

		.user-name-email {
			grid-area: nameemail;
			padding-block-end: calc(1lh - 1em);
		}

		.user-level {
			grid-area: icon;
			color: var(--icon-color);
			cursor: help;
		}
		.user-realname {
			grid-area: realname;
			font-size: var(--realname-fs);
		}
		.user-email {
			grid-area: email;
			font-size: var(--email-fs);
		}
		&[data-guest] {
			--icon-color: var(--color-brand-ternary);
		}
		&:not([data-guest]) {
			--icon-color: var(--color-brand-highlight);
		}
		&[data-level="owner"] {
			--icon-color: var(--color-brand);
		}
		&[data-level="manager"] {
			--icon-color: var(--color-brand-alt);
		}
	}

	.commands-area {
		--_background: color-mix(in display-p3, var(--color-brand-alt), transparent 50%);
		margin-block-start: 1lh;

		position: sticky;
		bottom: 0;
		display: flex;
		flex-flow: row wrap;
		gap: .25lh 1ch;
		align-items: center;
		justify-content: center;

		padding-block: 1lh;
		z-index: 1;

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			left: -50dvw;
			right: -50dvw;
			background-color: var(--_background);
			z-index: -1;

			opacity: 0;
			transition: opacity 250ms ease;
		}

		&.stuck::before {
			opacity: 1;
			transition: opacity 250ms ease;
		}
	}

	.header-area {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		gap: .25lh 1ch;

		.list-search {
			display: flex;
			flex-flow: row nowrap;
			align-items: center;

			border: var(--ui-border);
			border-radius: var(--ui-border-radius);
			background: var(--blocks-background, transparent);
			&:is(:focus-within) {
				outline: var(--ui-outline);
				outline-offset: var(--ui-outline-offset);
			}
			.search-input {
				min-width: 29ch;
				background: transparent;
				border: none;
				outline: none;
				padding: .25lh 1ch;

				&:focus {
					outline: none;
				}
			}

			button {
				border: 0;
				background: none;
				padding: 0;
			}
			.icon-container {
				color: var(--color-primary);
				border-radius: 0;

				& > svg {
					max-width: 50%;
					width: 100%;
				}

				&.empty:is(:hover, :focus-visible){
					color: var(--color-brand-alt);
					outline: 0;

					& > svg {
						border-radius: 100%;
						outline: 1px solid currentColor;
						outline-offset: 2px;
					}
				}
			}

			&:has(.search-input:not(:placeholder-shown)) .icon-search.info {
				display: none;
			}
			&:has(.search-input:placeholder-shown) .icon-search.empty {
				display: none;
			}
		}
	}


	&.dialog {
		--_min-width: var(--dialog-min-width, 40dvw);
		--_backdrop: hsla(0, 0%, 0%, .9);

		--_header-background: var(--dialog-background-close-bar, #333);
		--_header-title: var(--dialog-title, #fff);

		--_close-background: var(--dialog-background-close-button, hsl(12, 89%, 40%));
		--_close-background-hover: var(--dialog-background-close-button-hover, hsl(12, 89%, 58%));
		--_close-color: var(--dialog-color-close-button, #fff);

		margin: auto;
		place-self: center;
		border: 0;
		border-radius: .5em;
		background: var(--main-background);

		max-width: calc(90ch - 1rem);
		min-width: var(--_min-width);
		max-height: 100dvh;
		overflow: hidden;

		@media (width < 90ch) {
			margin-inline: .5rem;
		}

		&:focus {
			outline: 0;
		}
		&::backdrop {
			background-color: var(--_backdrop);
		}

		.dialog-container {
			display: grid;
			grid-template-rows: auto 1fr;
			grid-template-areas:
				'controlbar'
				'content';
		}

		.dialog-header {
			grid-area: controlbar;

			position: sticky;
			top: 0;

			display: grid;
			grid-template-columns: 1fr auto;
			grid-auto-flow: column;
			grid-template-areas: 'title close';
			align-items: center;

			background-color: var(--_header-background);
			color: var(--_header-title);

			.dialog-title {
				grid-area: title;

				font-size: var(--fs-medium);
				font-weight: var(--fw-normal);
				padding: .25em 1em;
			}
			.dialog-commands {
				--_inner-reduction: 60%;
				grid-area: close;

				&:not(.hidden) {
					border: none;
					border-radius: 0;
					padding: 0;
					width: 2rem;
					aspect-ratio: 1;

					display: grid;
					place-items: center;

					background-color: var(--_close-background);
					color: var(--_close-color);

					transition:
						background-color 250ms linear,
						color 250ms linear;
				}
				& > svg {
					fill: var(--_close-color);
					width: var(--_inner-reduction);
					height: var(--_inner-reduction);
				}
				&:is(:hover, :focus-visible) {
					color: var(--_close-color);
					background-color: var(--_close-background-hover);
					outline-offset: -1px;
				}
			}
		}

		.dialog-content {
			grid-area: content;
		}

		&.s2fa .dialog-content {
			min-height: 10lh;

			display: grid;
			grid-auto-flow: row;
			justify-items: center;
			gap: 1lh 0;
			padding: 1lh 2ch;

			.dialog-explain {
				max-width: 74ch;
				margin-inline: auto;
			}
			.command[disabled] {
				color: var(--clr-300);
				background: var(--clr-150);
				cursor: auto;
			}
		}
	}
}


#sendora-projects-list-container {

	.list-header {
		justify-content: space-between;

		padding-block-start: var(--block-pad);
		padding-block-end: calc(var(--block-pad) / 2);
		margin-block-end: calc(var(--block-pad) / 2);
		border-bottom: var(--ui-border);

		.list-title {
			color: var(--clr-700);
		}
	}
	.list-content {
		padding-block: .5lh;
		padding-inline: .125ch;
	}
	.list-content:not(:has(.project-alert)) {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(var(--mosaic-min-width), 100%), 1fr));
		gap: 3lh 1.5ch;
	}

	.project-container {
		padding: 0;
		border-radius: var(--border-radius);

		&.add {
			border: 1px dashed var(--ui-color);
			background: var(--blocks-background);
			padding: 1lh 1ch;
			display: grid;
			gap: 1lh 1ch;
			place-items: center;

			cursor: pointer;
			color: var(--color-primary);

			.image-add {
				max-width: 50%;

				svg {
					width: 100%;
					fill: currentColor;
				}
			}
			.text-add {
				font-size: var(--fs-normal);
				font-weight: var(--fw-bolder);
			}
		}
	}
	.project {
		display: grid;
		grid-template-areas:
			'thumbnail'
			'header'
			'info';
		grid-template-rows: auto auto 1fr;
		cursor: pointer;
		border-radius: inherit;
		height: 100%;

		.padded {
			padding-inline: var(--inline-pad);
		}

		.project-header {

			grid-area: header;
			align-self: stretch;
			align-content: center;
			padding-block-start: .25lh;
			min-height: 3lh;

			.project-name {
				--clamp: 2;

				font-size: var(--fs-large);
			}
		}
		.project-content {
			grid-area: info;
			padding-block-end: .25lh;

			display: grid;
			grid-template-rows: 1fr auto;
			gap: 1lh 0;

			.project-desc {
				--clamp: 4;
				font-size: var(--fs-small);
				color: var(--clr-300);
			}
			.project-meta {
				font-size: var(--fs-small);
			}
		}

		.thumbnail-container {
			grid-area: thumbnail;
		}

		.project-meta {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			justify-content: space-between;
			gap: .25lh 1ch;

			.meta {
				display: flex;
				flex-flow: row nowrap;
				align-items: center;
				gap: 0 1ch;
				cursor: help;
			}
			.icon-container {
				--icon-size: 1lh;
				--icon-inline-padding: 0;

				color: var(--color-primary);
			}
		}
	}
}


#sendora-projects-edit-container {

	--max-width: 56ch;
	--border: var(--ui-border);
	--border-radius: var(--ui-border-radius);
	--deco-background: var(--thumbnail-background);

	.sendora-form {
		margin-block-end: 2lh;
		margin-inline: 2px;
	}
	.form-commands {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		gap: .125lh 1ch;
	}

	.sendora-fieldset {
		display: grid;
		grid-template-columns: 3fr 2fr;
		grid-template-areas:
			'entity thumbnail'
			'name thumbnail'
			'desc thumbnail';
		gap: .5lh 1ch;
		justify-items: start;
		align-items: end;

		background: transparent;
		border: none;
		padding: 1lh 0;
	}
	.entity.value {
		grid-area: entity;
	}
	.name.value {
		grid-area: name;
	}
	.desc-container.value {
		--_min-height: 8lh;

		grid-area: desc;
	}

	.thumbnail-container {
		grid-area: thumbnail;
		width: 100%;

		.legend {
			font-size: var(--fs-smaller);
		}
	}

	@media ( width <= 140ch ){
		.sendora-fieldset {
			grid-template-columns: 1fr;
			grid-template-areas:
				'entity'
				'name'
				'desc'
				'thumbnail';
		}
	}
}

#sendora-projects-details-container {

	/* header */
	.project-details-header {
		grid-area: header;

		padding-block: .25lh;

		.project-back-link {
			--_border: var(--ui-outline);

			--icon-size: 1em;
			--icon-inline-padding: .75lh;
			--icon-block-padding: .75lh;

			border-radius: 50%;
		}
		.project-name {
			flex-grow: 1;
			padding-inline-start: .5ch;
			margin-block-start: calc(-1 * (1lh - 1em));
		}
	}
	&:not(:has(.project-no-files:not(.hidden))) .project-details-header:has(.upload-icon) {

		.upload-icon {
			--icon-size: 1.25lh;

			cursor: pointer;
		}
	}
	&:has(.project-no-files:not(.hidden)) .project-details-header .upload-icon {
		display: none;
	}

	/* aside */
	.projects-outter-def {
		display: grid;
		align-items: stretch;

		&.fullheight {
			padding-block-start: 0;
		}

		.projects-def {
			--border-radius: 0;

			border: 0;
			background: var(--blocks-background);

			/* project details */
			.project-container {

				.project {
					display: grid;
					grid-template-areas:
						'header'
						'thumbnail'
						'def';

					border: 0;

					.project-details-title {
						grid-area: header;
					}
					.thumbnail-container {
						grid-area: thumbnail;
					}
					.project-commands {
						grid-area: thumbnail;

						--icon-size: 1lh;
						--icon-block-padding: .25lh;
						--icon-block-padding: .75lh;

						z-index: 1;
						display: inline-flex;
						height: fit-content;
						width: fit-content;
						background: color-mix(in display-p3, var(--blocks-background), transparent 10%);
						border-start-start-radius: var(--ui-border-radius);
						place-self: end;

						.command {
							border: 0;
							background: transparent;
						}
					}
					.project-def {
						grid-area: def;

						display: grid;
						grid-auto-flow: row;
						gap: 1lh 0;
						padding-inline: var(--inline-pad);

						margin-inline: var(--inline-pad);
						padding-block: var(--block-pad) calc(var(--block-pad) + .5lh);
						border-block-end: var(--ui-border);
						border-width: .125em;
						border-color: var(--color-brand);

						.project-desc {
							font-size: var(--fs-smaller);
						}

						.project-meta {
							font-size: var(--fs-small);
							color: var(--clr-300);

							.project-stat {
								display: grid;
								grid-template-columns: auto 1fr;
								align-items: center;
								gap: .125lh 1ch;

								.legend {
									grid-column: 1;
								}
								.value {
									grid-column: 2;
								}
							}
						}
					}
				}
			}


			/* members */
			.projects-members-container {

				.project-members-header {
					margin-block-start: var(--block-pad);

					display: flex;
					flex-flow: row nowrap;
					align-items: center;
					justify-content: space-between;

					margin-inline: var(--inline-pad);

					.project-members-title {
						font-size: var(--fs-medium);
						font-weight: var(--fw-bolder);
						padding-block: .5lh;
					}

					.project-members-list-manage {
						--_background: transparent;
						--_color: var(--command-color);
						--_color-hover: var(--command-color-hover);
						--_border: 0;
					}
				}

				.project-members {
					--_list-gap: .5lh;

					display: grid;
					grid-auto-flow: row;
					gap: var(--_list-gap) 0;

					padding-block: var(--_list-gap) var(--block-pad);
					padding-inline: var(--inline-pad);

					.project-member:not([data-guest]) + .project-member[data-guest] {
						border-block-start: var(--ui-border);
						margin-block-start: var(--_list-gap);
						padding-block-start: var(--_list-gap);
					}
				}
			}
		}
	}

	/* content */
	.project-files-container {
	}
	.project-files-inner-container {
		padding-block-end: .25lh;
		padding-inline-start: var(--scroll-gutter-safe);
		padding-inline-end: calc(var(--scroll-gutter-safe) + 2 * var(--ui-outline-offset));

		display: grid;
		grid-template-rows: 1fr;
	}

	.project-files {
		display: grid;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			'header'
			'content';
		grid-auto-flow: row;
		height: fit-content;

		.files-header {
			grid-area: header;
			padding-block-end: .5lh;
		}
		.files-container {
			grid-area: content;
		}
		&.alive {
			align-self: stretch;
		}

		&:has(.project-no-files:not(.hidden)) {
			height: auto;
			align-self: stretch;
			place-items: center;
			grid-template-columns: 1fr;
		}
	}

	.files-container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(calc(1.25 * var(--mosaic-min-width)), 100%), 1fr));
		gap: 1lh 2ch;
	}

	.project-file {
		--scale: 1;
		--spread-boxshadow-hover: .25rem;

		--icon-size: 1lh;
		--icon-inline-padding: 1em;
		--icon-block-padding: 1em;

		--jsu-notch-border-thickness: 1px;
		--jsu-notch-border-radius: var(--command-border-radius);
		--jsu-notch-content-size: calc(var(--icon-size) + var(--icon-inline-padding));
		--jsu-notch-border: var(--ui-border);
		--jsu-notch-safe: .125em;
		--jsu-notch-content-gap: calc(var(--jsu-notch-safe) - var(--jsu-notch-border-thickness));

		align-self: stretch;
		border-radius: var(--ui-border-radius);
		position: relative;

		&:has(.project-file-inner:is(:hover)) {
			--jsu-notch-border: var(--jsu-notch-border-thickness) solid var(--ui-color-accent);
		}

		.file-commands {
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			gap: 0 .125em;

			.command {
				background: var(--blocks-background);
				border: var(--ui-border);
				border-radius: var(--ui-border-radius);

				&:is(:hover, :focus-visible){
					border-color: var(--ui-color-accent);
				}
			}
		}
	}
	.project-file-inner {
		height: 100%;

		border-radius: inherit;
		border: var(--ui-border);
		background: var(--blocks-background);

		display: grid;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			'header'
			'info';
		align-items: start;
		cursor: pointer;

		transition: border-color 125ms ease;

		&:is(:hover){
			border-color: var(--ui-color-accent);
		}

		.file-header {
			grid-area: header;

			display: grid;
			grid-template-columns: 1fr auto;
			grid-template-areas:
				'name tag';
			align-items: start;
			min-height: 2lh;

			.name-container {
				grid-area: name;
				padding: var(--padding);

				height: 100%;
				display: grid;
				align-items: center;

				.name {
					--clamp: 2;

					font-size: var(--fs-medium);
					font-weight: var(--fw-bolder);
					color: var(--color-brand);
				}
			}
			.tag {
				grid-area: tag;

				font-size: var(--fs-smaller);
				border-start-end-radius: var(--ui-border-radius);
				border-end-start-radius: var(--ui-border-radius);
				background: var(--color-brand-alt);
				color: var(--color-brand-alt-on);
				padding: var(--padding);
			}
		}
		.info {
			grid-area: info;
			height: 100%;

			display: grid;
			grid-template-rows: 1fr auto;
			grid-template-areas:
				'desc'
				'meta'
				'metacomp';
			align-items: start;
			gap: .5lh .5ch;
			color: var(--base-color);
			padding-inline: var(--padding-inline);

			.desc-container {
				grid-area: desc;
				min-height: 2lh;

				.desc {
					font-size: var(--fs-small);
					--clamp: 5;
				}
			}
			.meta {
				display: grid;
				grid-template-columns: auto 1fr auto;
				grid-template-areas:
					'download origname origname'
					'download size size'
					'owner owner time';
				align-items: center;
				gap: 0 1ch;

				color: var(--base-color);
				font-size: var(--fs-small);

				.container {
					&.file-icon {
						grid-area: download;
					}
					&.origname {
						grid-area: origname;
						color: var(--highlight-color);
					}
					&.size {
						grid-area: size;
					}
					&.owner {
						grid-area: owner;
						padding-block: .25lh .125lh;
					}
					&.time {
						grid-area: time;
						align-self: end;
						padding-block: .125lh;

						/* .5em: roughly, difference between font-size small vs normal in the computing of notch size */
						margin-inline-end: calc(var(--_notch-width-bottom-right) + var(--_notch-content-children-right) * .5em);
					}
				}
				.legend {
					font-size: var(--fs-smaller);
				}
				.value {
					max-width: fit-content;
					font-size: var(--fs-smaller);

					&.time {
						color: var(--highlight-color);
					}
				}
				.user-name-email {
					padding-block: 0;
				}

				.file-command {
					--icon-size: 1.25lh;
					--icon-block-padding: .75lh;

					padding: 0;
					border: 0;
				}
				.file-icon.viewed .file-command {
					color: var(--ui-color-positive);

					&:is(:focus-visible, :hover) {
						color: var(--ui-color-positive-highligth);
					}
				}
			}
		}
	}
}

#sendora-projects-upload-container {

	--border-radius: var(--ui-border-radius);

	&:not(:has(.upload-members-container)) {
		display: grid;
		grid-template-rows: auto 1fr auto;
		grid-template-areas:
			'header'
			'content'
			'commands';
		gap: .25lh 1ch;
	}

	.upload-header {
		grid-area: header;
		padding-block: .25lh;
	}
	.upload-area {
		grid-area: content;
	}
	.upload-members-container {
		align-self: stretch;
		background: var(--blocks-background);

		.members-title {
			font-size: var(--fs-normal);
			font-weight: var(--fw-bolder);
			margin-block-start: .5lh;
			color: var(--color-brand-alt);
			padding-block-end: var(--ui-border-radius);
			text-align: center;
		}
	}
	.upload-area-commands {
		grid-area: commands;
	}

	.upload-area {
		align-self: start;
		display: grid;
		grid-auto-flow: row;
		gap: .25lh 1ch;
	}

	.upload-tag-all {
		min-width: 30ch;
	}

	&:not(:has(.upload-file:nth-child(2))) .upload-settings {
		display: none;
	}

	/* header */
	&:has(.upload-file) .upload-header {
		display: grid;
		grid-template-columns: 1fr auto;

		.upload-icon {
			--icon-size: 1.25lh;

			cursor: pointer;
		}
	}
	&:not(:has(.upload-file)) .upload-header {
		.upload-icon {
			display: none;
		}
	}

	&:has(.upload-file) {
		.empty-drop-area {
			display: none;
		}
	}
	&:not(:has(.upload-file)) {
		.upload-settings,
		.upload-files-list {
			display: none;
		}
		.upload-area {
			grid-template-areas: 'droparea';
			align-self: stretch;
			place-items: center;
		}
		.drop-area,
		.upload-no-files {
			grid-area: droparea;
		}
	}
	:has(> .drop-area[aria-hidden="false"]) {
		align-self: stretch;

		.drop-area {
			display: block;
		}
		.drop-info-container {
			position: sticky;
			top: calc(50dvh - 4lh);
			text-align: center;
		}
	}

	.upload-files-list {
		--scale: 1;
		--spread-boxshadow-hover: .25rem;

		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(calc(1.5 * var(--mosaic-min-width)), 100%), 1fr));
		gap: 1lh 2ch;
		height: fit-content;
	}
	.upload-file {
		--border-color: var(--ui-color);

		--icon-size: 1lh;
		--icon-inline-padding: .75lh;
		--icon-block-padding: .75lh;

		--jsu-notch-border-thickness: 1px;
		--jsu-notch-border-radius: var(--command-border-radius);
		--jsu-notch-content-size: calc(var(--icon-size) + var(--icon-inline-padding));
		--jsu-notch-safe: .25em;
		--jsu-notch-content-gap: calc(var(--jsu-notch-safe) - var(--jsu-notch-border-thickness));

		--jsu-notch-border: 1px solid var(--border-color);

		border-radius: var(--border-radius);
		align-self: stretch;

		&.error {
			--border-color: var(--ui-color-negative);
		}

		.command {
			background: var(--blocks-background);
			border: var(--ui-border);
			border-radius: var(--jsu-notch-border-radius);
		}
	}
	.upload-file-inner {
		height: 100%;
	}

	.upload-file-inner {
		grid-template-rows: auto 1fr auto auto auto auto;
		grid-template-areas:
			'name'
			'desc'
			'tag'
			'meta'
			'playable'
			'progress';
		gap: .25lh 1ch;

		&:has(.playable-downloadable.hidden) {
			grid-template-rows: auto 1fr auto auto auto;
			grid-template-areas:
				'name'
				'desc'
				'tag'
				'meta'
				'progress';
		}

		.upload-progress {
			grid-area: progress;

			display: grid;
			grid-template-columns: 1fr auto;
			grid-template-areas: 'bar percent';
			align-items: center;
			gap: 0 1ch;

			margin-inline-end: 8ch;
			margin-block-end: -.5lh;

			font-size: var(--fs-small);
			line-height: 1lh;

			.upload-bar {
				grid-area: bar;

				--progress: 0%;

				position: relative;

				height: 1em;
				background: hsl(0 0% 90%);
				overflow: hidden;

				border: var(--ui-border);
				border-radius: 100vw;

				&::before {
					content: '';
					position: absolute;
					inset: 0;
					background: var(--color-brand-highlight);
					width: var(--progress, 0%);
					transition: width 0250ms linear;
				}
				&::after {
					content: '';
					position: absolute;
					inset: 0;
					background-image: repeating-linear-gradient(
						90deg,
						transparent 0,
						hsl(0 0% 100% / 0.1) 1ch,
						hsl(0 0% 100% / 0.15) 1.5ch,
						hsl(0 0% 100% / 0.1) 2ch,
						transparent 3ch
					);
					background-size: 6ch 100%;
					animation: upload-progress-stripes 2.5s linear infinite;
					pointer-events: none;
				}
			}
			.upload-tick {
				grid-area: bar;

				--icon-size: 1lh;
				justify-self: end;

				&.succeed {
					color: var(--ui-color-positive);
				}
				&.failed {
					color: var(--ui-color-negative);
				}
			}
			.upload-percent {
				grid-area: percent;

				font-variant-numeric: tabular-nums;
				min-width: 4ch;
				text-align: right;
			}
		}
	}

	.upload-members-container {
		padding: var(--padding);
	}

	.upload-command[disabled] {
		opacity: .5;
		cursor: not-allowed;
	}
}

@keyframes upload-progress-stripes {
	to {background-position: 6ch 0;}
}

#sendora-project-members-manage-container {
	display: grid;
	grid-template-rows: auto 1fr auto;

	.members-list {
		min-width: 40dvw;
		padding: .5lh 1ch;
		background: var(--blocks-background);
		border-radius: var(--ui-border-radius);
	}
}


#sendora-file-edit-container {
	--border-radius: 1em;

	gap: .25lh 1ch;

	.file-edit-header {
		grid-area: header;
		padding-block: .25lh;
	}
	.file-edit-members-area {
		background: var(--blocks-background);
		padding: var(--padding);
	}
	.file-edit-area {
	}
	.file-edit-commands-area {
		grid-area: commands;
	}

	.file-edit {
		width: min(100%, var(--input-max-width));
		border-radius: var(--border-radius);
		border: var(--ui-border);
	}
}