html, body, form, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

html {
	--background-color: #fff;
	background: var(--background-color);
}

body {
	--major-font-size: 1.6em;
	--major-padding: 0.8em 0.6em;
	--minor-font-size: 1.4em;
	--minor-padding: 0.5em;

	color: #333;
	font-size: 0.625em;
	font-variant-ligatures: none;
	text-size-adjust: none;
	hyphens: none;
	padding-block-end: 2em;
}

body, input, textarea, button {
	font-family: system-ui, "Segoe UI", "Noto Sans", "Liberation Sans", "Helvetica Neue", sans-serif;
}

input, textarea, button {
	color: inherit;
	font-size: var(--minor-font-size);
}

ul, ol, li {
	display: block;
	margin: 0;
	padding: 0;
}

a {
	display: block;
	padding: 0.5em;
	color: #000;
	text-decoration: none;
	outline: 0;
}

a:hover {
	background: #f5f5f5;
}

a:focus {
	background: #fffae0;
}

a:hover:focus {
	background: #faf7ea;
}

input, button {
	min-width: 0;
	margin: 0;
	padding: 0.25em 0;
}

input[type=text] {
	padding: 0.25em;
}

input[type=button], input[type=submit], input[type=reset], button {
	padding: 0.25em 0.5em;
}

input[type=button]:enabled,
input[type=submit]:enabled,
input[type=reset]:enabled,
input[type=file]:enabled,
input[type=checkbox]:enabled,
input[type=radio]:enabled,
button:enabled,
label {
	cursor: pointer;
}

em {
	font-style: normal;
	font-weight: normal;
	padding: 0 0.2em;
	border: 1px #ddd solid;
	border-radius: 3px;
}

.none {
	display: none;
}

.hidden {
	visibility: hidden;
}


html::after {
	display: none;
	content: '';
	position: fixed;
	z-index: 2;
	inset: 0;
	opacity: 0.7;
	background: #c9c;
}

html.dragging::after {
	display: block;
}


.path-list {
	display: flex;
	flex-wrap: wrap;
	font-size: var(--major-font-size);
	line-height: 1.2;
	border-block-end: 1px #ccc solid;
}

.path-list li {
	display: flex;
}

.path-list li a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1em;
	padding: var(--minor-padding);
	word-break: break-all;
}

.path-list li:not(:last-child) a {
	padding-inline-end: 1.2em;
}

.path-list li:last-child a {
	color: #666;
}

.path-list li:not(:last-child) a::after {
	content: '';
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 0.5em;
	inline-size: 0.4em;
	block-size: 0.4em;
	border: 1px solid;
	color: #ccc;
	border-color: currentColor currentColor transparent transparent;
	transform: rotate(45deg) translateY(-50%);
}

.tab {
	display: flex;
	gap: 0.5em;
	white-space: nowrap;
	margin: 1em 1em 0 1em;
}

.tab button {
	flex: 0 0 auto;
	appearance: none;
	outline: 0;
	border: 0;
	padding: 0.5em 1em;
	color: inherit;
	background: inherit;
}

.tab button:focus {
	text-decoration: underline 1px dotted;
}

.tab button:hover {
	background: #fbfbfb;
}

.tab button.active {
	color: #000;
	background: #f7f7f7;
}

.panel {
	margin: 1em;
	padding: 1em;
	background: #f7f7f7;
}

.tab + .panel {
	margin-block-start: 0;
}

.upload-status {
	visibility: hidden;
	position: sticky;
	z-index: 2;
	inset-inline-start: 0;
	inset-block-start: 0;
	inline-size: 100%;
	block-size: 4px;
	margin-block-end: -4px;
	background: rgba(204, 153, 204, 0.1);
	pointer-events: none;
}

.upload-status.uploading,
.upload-status.failed {
	visibility: visible;
}

.upload-status .label {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	inline-size: 100%;
	display: flex;
	justify-content: center;
	color: #fff;
	opacity: 0;
	transition: transform .2s, opacity .2s;
}

.upload-status .label .content {
	position: relative;
	padding-inline: 1em;
	padding-block: 0.5em;
	line-height: 1em;
	box-sizing: border-box;
	word-break: break-all;
}

.upload-status .info .content {
	padding-inline-start: 2.5em;
	background: rgba(204, 153, 204, 0.8);
}

@keyframes wheel {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.upload-status .info .content::before,
.upload-status .info .content::after {
	content: '';
	position: absolute;
	inset-inline-start: 1em;
	inset-block-start: 0.5em;
	inline-size: 1em;
	block-size: 1em;
	box-sizing: border-box;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	animation: wheel 1s linear infinite;
}

.upload-status .info .content::after {
	border-color: currentColor transparent transparent transparent;
}

.upload-status .warn .content {
	background: rgba(128, 0, 0, 0.8);
}

.upload-status.uploading .info,
.upload-status.failed .warn {
	opacity: 1;
	transform: translateY(25%);
}

.upload-status .progress {
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	inline-size: 0;
	block-size: 100%;
	max-inline-size: 100%;
	background: #c9c;
}

.login {
	position: absolute;
	z-index: 2;
	inset-inline-end: 0;
	padding: 0.5em 1em;
}

.upload form {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.5em;
}

.upload button {
	position: absolute;
	inset-inline-end: 0;
}

.mkdir form {
	display: flex;
	align-items: center;
}

.mkdir .name {
	flex: 1 1 auto;
}

.entry-form {
	display: flex;
	flex-direction: column;
}

.entry-list {
	margin: 1em;
	line-height: 2em;
	font-variant-numeric: tabular-nums;
	font-kerning: none;
	font-family: "Cascadia Mono", Consolas, "Lucida Console", "San Francisco Mono", Menlo, Monaco, "Andale Mono", "DejaVu Sans Mono", "Jetbrains Mono NL", monospace;
}

.entry-list li {
	position: relative;
}

.entry-list a {
	padding: var(--major-padding);
}

/* select */
.entry-list .toggle-select {
	position: absolute;
	inset-inline-start: 0;
	inset-block: 0;
	inline-size: 2.5em;
}

.entry-list .toggle-select {
	font-size: inherit;
	box-sizing: border-box;
}

.entry-list .toggle-select::before {
	content: '';
	position: absolute;
	inset-inline-start: 50%;
	inline-size: 0.5em;
	margin-inline-start: -0.3em;
	inset-block-start: 50%;
	block-size: 1em;
	margin-block-start: -0.65em;
	border: 0 currentColor solid;
	border-inline-end-width: 1px;
	border-block-end-width: 1px;
	transform: rotate(30deg);
}

.selecting .entry-list .toggle-select::before {
	transform: none;
	border-inline-end: 0;
	block-size: 0;
	margin-inline-start: -0.25em;
	margin-block-start: 0;
}

.entry-list .select {
	display: none;
	position: absolute;
	inset: 0;
	user-select: none;
}

.entry-list .select:hover {
	background: #ffffff0c;
}

.selecting .entry-list .select {
	display: block;
}

.entry-list .select input {
	font-size: inherit;
	block-size: 100%;
	margin-inline-start: 0.6em;
}

.entry-list li:has(.select input:checked) {
	background: #cee;
}

.entry-list .detail {
	position: relative;
	display: flex;
	gap: 1em;
	align-items: center;
	padding-inline-start: 3em;
	border-block-end: 1px #f5f5f5 solid;
	overflow: hidden;
}

/* icon - common */
.entry-list .detail::before,
.entry-list .detail::after {
	content: '';
	position: absolute;
	color: #999;
	border: 1px currentColor solid;
}

/* icon - header or selecting */
.selecting .entry-list .detail::before,
.selecting .entry-list .detail::after,
.entry-list .header .detail::before,
.entry-list .header .detail::after {
	content: none;
	display: none;
}

/* icon - parent */
.entry-list .parent .detail::before {
	inset-inline-start: 0.9em;
	inline-size: 0.9em;
	block-size: 1em;
	border-block-width: 0 1px;
	border-inline-width: 1px 0;
	border-end-start-radius: 0.3em;
}

.entry-list .parent .detail::after {
	inset-inline-start: 0.65em;
	margin-top: calc(-1em - 2px);
	inline-size: 0;
	block-size: 0;
	border-inline-width: 0.3em;
	border-block-width: 0 0.6em;
	border-inline-color: transparent;
}

/* icon - dir */
.entry-list .dir .detail::before,
.entry-list .dir .detail::after {
	--gradient-color-from: #ffd;
	--gradient-color-to: #fec;
	background: linear-gradient(to bottom, var(--gradient-color-from), var(--gradient-color-to));
}

.entry-list .dir .detail::before {
	inset-inline-start: 0.6em;
	inline-size: 1em;
	block-size: 1em;
}

.entry-list .dir .detail::after {
	inset-inline-start: 0.6em;
	inline-size: 1em;
	block-size: 0.6em;
	margin-block-end: -0.4em;
	transform: skewX(-30deg);
	transform-origin: center bottom;
}

/* icon - file */
.entry-list .file .detail::before {
	inset-inline-start: 0.6em;
	inline-size: 1.2em;
	block-size: 1.2em;
	border-start-end-radius: 0.4em;
	--gradient-color-from: #fff;
	--gradient-color-to: #f1f1f1;
	background: linear-gradient(to bottom, var(--gradient-color-from), var(--gradient-color-to));
}

.entry-list .file .detail::after {
	inset-inline-start: 0.85em;
	inline-size: 0.8em;
	block-size: 0.3em;
	border-block-width: 2px;
	border-inline-width: 0;
	border-style: dotted;
	transform: skew(20deg);
}

.entry-list .field {
	flex-shrink: 0;
}

.entry-list .name {
	flex: 1 1 0;
	margin-inline-start: 0;
	font-size: var(--major-font-size);
	white-space: pre-wrap;
	word-break: break-all;
}

.entry-list .size {
	white-space: nowrap;
	text-align: end;
	color: #666;
}

.entry-list .size:empty {
	display: none;
}

.entry-list .time {
	color: #999;
	text-align: end;
	white-space: nowrap;
	overflow: hidden;
}

.entry-list .header {
	position: sticky;
	inset-block-start: 0;
	z-index: 1;
}

.entry-list .header .detail {
	gap: 0;
	background: #fcfcfc;
}

.entry-list .header .field {
	display: inline-block;
	font-size: var(--minor-font-size);
	color: #808080;
	overflow: hidden;
}

.entry-list .header .name {
	flex: 0 0 auto;
}

.entry-list .header .filter {
	flex: 1 1 0;
	align-self: stretch;
	display: flex;
	position: relative;
}

.entry-list .header .filter label {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	padding: 0 0.5em;
}

.entry-list .header .filter label input {
	flex: 1 1 0;
	inline-size: 0;
	font-size: var(--minor-font-size);
}

.entry-list .header .filter label input:placeholder-shown {
	opacity: 0.4;
}

.entry-list .header .filter label input:focus {
	opacity: 1;
}

.entry-list .header .filter button {
	display: none;
	position: absolute;
	inset: 0 0 0 auto;
	padding: 0 1em;
	border: 0;
	appearance: none;
	color: inherit;
	background: none;
}

.entry-list .header .time {
	inline-size: 6.5em;
	text-align: center;
}

.select-rect {
	position: absolute;
	z-index: 1;
	display: none;
	box-sizing: border-box;
	background: #6662;
	border: 1px #7777 dashed;
	pointer-events: none;
}

.select-rect.pinching {
	display: block;
}

.action-list {
	position: sticky;
	bottom: 0;
	margin-inline: 1em;
	padding: 1em;
	align-self: flex-end;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 1em;
	backdrop-filter: blur(0.5em);
	mask-image: linear-gradient(to bottom, transparent, #000 0.6em);
}

.action-list a,
.action-list button {
	display: flex;
	align-items: center;
	padding: 0.5em;
	box-sizing: content-box;
	block-size: 1.2em;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	border: 2px #f5f5f5 solid;
	font-size: var(--minor-font-size);
	background: var(--background-color);
}

.action-list a:hover,
.action-list button:enabled:hover {
	border-color: #ddd;
}

.action-list button {
	position: relative;
	appearance: none;

	--padding-start: 2.4em;
	--padding-end: 1em;
	padding-inline: var(--padding-start) var(--padding-end);
}

.action-list button:disabled {
	opacity: 0.5;
}

.action-list .download::before,
.action-list .download::after {
	--arrow-edge: 0.4em;
	--border-width: 2px;
	--vert-bar-offset: 0.7em;
	--vert-bar-size: 0.8em;

	content: '';
	position: absolute;
	inset-inline-start: calc(var(--padding-start) - 1.5em);
	inline-size: var(--arrow-edge);
	border: 0 #aaa solid;
}

.action-list .download::before {
	inset-block-start: var(--vert-bar-offset);
	block-size: var(--vert-bar-size);
	border-inline-end-width: var(--border-width);
}

.action-list .download::after {
	margin-inline-start: calc(-1.5 * var(--border-width));
	margin-block-start: calc(-1 * var(--border-width));
	inset-block-start: calc(var(--vert-bar-offset) + var(--vert-bar-size) - var(--arrow-edge));
	block-size: var(--arrow-edge);
	border-width: var(--border-width);
	border-inline-start-color: transparent;
	border-block-start-color: transparent;
	transform-origin: right bottom;
	transform: rotate(45deg);
}

.action-list .delete:enabled:hover {
	background: #fee;
}

.action-list .delete::before,
.action-list .delete::after {
	content: '';
	position: absolute;
	inset-inline-start: calc(var(--padding-start) - 1.6em);
	inset-block-start: 1.05em;
	inline-size: 1em;
	border: 1px currentColor solid;
	border-inline-width: 0;
	color: #800000;
}

.action-list .delete::before {
	transform: rotate(45deg);
}

.action-list .delete::after {
	transform: rotate(-45deg);
}

.error {
	margin: 1em;
	padding: 1em;
	background: #ffc;
}

@media screen and (prefers-color-scheme: light) {
	html {
		color-scheme: light;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html {
		color-scheme: dark;
		--background-color: #111;
	}

	body {
		color: #ccc;
	}

	a {
		color: #ddd;
	}

	a:hover {
		background-color: #333;
	}

	a:focus {
		background-color: #330;
	}

	a:hover:focus {
		background-color: #33331a;
	}

	em {
		border-color: #555;
	}

	.path-list {
		border-block-end-color: #333;
	}

	.path-list li:not(:last-child) a::after {
		color: #555;
	}

	.path-list li:last-child a {
		color: #aaa;
	}


	.tab button:hover {
		background-color: #181818;
	}

	.tab button.active {
		color: #fff;
		background-color: #222;
	}

	.panel {
		background-color: #222;
	}

	.action-list a,
	.action-list button {
		border-color: #222;
	}

	.action-list a:hover,
	.action-list button:enabled:hover {
		border-color: #555;
	}

	.action-list .delete:enabled:hover {
		background-color: #433;
	}

	.action-list .delete::before,
	.action-list .delete::after {
		color: #f99;
	}

	.entry-list li:has(.select input:checked) {
		background: #244;
	}

	.entry-list .detail {
		border-block-end-color: #222;
	}

	.entry-list .detail::before,
	.entry-list .detail::after {
		color: #444;
	}

	.entry-list .parent .detail::before,
	.entry-list .parent .detail::after {
		color: #999;
	}

	.entry-list .dir .detail::before,
	.entry-list .dir .detail::after {
		--gradient-color-from: #a74;
		--gradient-color-to: #963;
	}

	.entry-list .file .detail::before {
		--gradient-color-from: #bbb;
		--gradient-color-to: #aaa;
	}

	.entry-list .size {
		color: #999;
	}

	.entry-list .time {
		color: #666;
	}

	.entry-list .header .detail {
		background-color: #181818;
	}

	.error {
		background: #663;
	}
}

@media screen and (max-width: 450px) {
	.action-list {
		gap: 0.5em;
		padding: 0.5em;
	}

	.action-list button {
		--padding-start: 2em;
		--padding-end: 0.6em;
	}

	.entry-list .header .time {
		inline-size: 4.05em;
	}
}

@media screen and (max-width: 375px) {
	.action-list {
		padding-inline: 0;
	}

	.action-list button {
		--padding-start: 1.8em;
		--padding-end: 0.4em;
	}

	.entry-list .header .filter {
		display: none;
	}

	.entry-list .header .name {
		flex: 1 1 0;
	}

	.entry-list .detail .time span {
		display: none;
	}
}

@media screen and (max-width: 350px) {
	.entry-list .detail .time {
		display: none;
	}
}

@media print {
	body {
		padding-block-end: initial;
	}

	.login, .panel, .tab, .action-list, .toggle-select {
		display: none;
	}

	.entry-list {
		margin-inline: 0;
	}

	.entry-list .header {
		position: relative;
	}

	.entry-list .header .name {
		flex: 1 1 auto;
	}

	.entry-list .header .filter {
		display: none;
	}

	.entry-list li {
		break-inside: avoid;
	}

	.entry-list li.parent {
		display: none;
	}
}