/*
 * JEDI Drop — CRT terminal theme.
 * Retheme by overriding any --jd-* variable on .jdrop from your own stylesheet.
 */
.jdrop {
	--jd-bg: #020904;
	--jd-panel: #04130a;
	--jd-fg: #39ff6a;
	--jd-dim: #23b14c;
	--jd-mute: #136a2e;
	--jd-line: rgba(57, 255, 106, .16);
	--jd-line-strong: rgba(57, 255, 106, .42);
	--jd-hover: rgba(57, 255, 106, .07);
	--jd-glow: 0 0 .32em rgba(57, 255, 106, .5);
	--jd-err: #ff5468;
	--jd-warn: #ffc23d;
	--jd-radius: 4px;
	--jd-font: "IBM Plex Mono", "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	position: relative;
	isolation: isolate;
	overflow: hidden;
	max-width: 960px;
	margin: 1.5em auto;
	padding: clamp(14px, 3vw, 26px);
	background: radial-gradient(ellipse at 50% -10%, #072414 0%, var(--jd-bg) 65%);
	color: var(--jd-fg);
	font: 14px/1.5 var(--jd-font);
	text-align: left;
	border: 1px solid var(--jd-line-strong);
	border-radius: var(--jd-radius);
	box-shadow: 0 0 0 1px #000, 0 0 28px rgba(57, 255, 106, .1), inset 0 0 80px rgba(0, 0, 0, .65);
	text-shadow: var(--jd-glow);
}

/* scanlines */
.jdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .2) 2px 3px);
}

/* theme-proofing resets */
.jdrop *, .jdrop *::before, .jdrop *::after { box-sizing: border-box; }
.jdrop a { color: inherit; text-decoration: none; box-shadow: none; border: 0; }
.jdrop ul, .jdrop ol { list-style: none; margin: 0; padding: 0; }
.jdrop li { margin: 0; }
.jdrop p { margin: 0; }
.jdrop button, .jdrop input, .jdrop summary { font: inherit; color: inherit; letter-spacing: inherit; }
.jdrop svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.jdrop :focus-visible { outline: 2px solid var(--jd-fg); outline-offset: 2px; }

/* title bar */
.jdrop-bar {
	margin: 0 0 1.1em;
	padding-bottom: .7em;
	border-bottom: 1px solid var(--jd-line);
}
.jdrop .jdrop-title {
	display: inline;
	margin: 0 .3em 0 .45em;
	padding: 0;
	font: inherit;
	font-size: 1.15em;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--jd-fg);
	border: 0;
	background: none;
}
.jdrop-prompt { color: var(--jd-dim); }
.jdrop-cursor { animation: jd-blink 1.05s steps(1) infinite; }
@keyframes jd-blink { 50% { opacity: 0; } }

/* upload zone */
.jdrop-upload { position: relative; margin-bottom: 1.25em; }
.jdrop-zone {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .3em;
	min-height: 150px;
	padding: 1.25em;
	text-align: center;
	cursor: pointer;
	border: 1px dashed var(--jd-line-strong);
	border-radius: var(--jd-radius);
	background: rgba(57, 255, 106, .025);
	transition: background-color .15s, border-color .15s;
}
.jdrop-zone:hover,
.jdrop-zone.is-over { background: rgba(57, 255, 106, .085); border-color: var(--jd-fg); border-style: solid; }
.jdrop-zone:focus-within { outline: 2px solid var(--jd-fg); outline-offset: 3px; }
.jdrop-zone-ic { width: 34px; height: 34px; margin-bottom: .2em; filter: drop-shadow(0 0 4px rgba(57, 255, 106, .6)); }
.jdrop-zone.is-over .jdrop-zone-ic { transform: translateY(-3px); }
.jdrop-zone-main { font-size: 1.05em; }
.jdrop-zone-main u { text-decoration: underline; text-underline-offset: 3px; }
.jdrop-zone-sub { color: var(--jd-dim); font-size: .85em; }
.jdrop-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.jdrop-types { margin-top: .6em; font-size: .8em; color: var(--jd-dim); }
.jdrop-types summary { cursor: pointer; width: max-content; }
.jdrop-types p { margin-top: .35em; word-spacing: .35em; line-height: 1.7; }
.jdrop-note { margin-top: .5em; font-size: .8em; color: var(--jd-dim); }
.jdrop-closed { padding: 1em; border: 1px dashed var(--jd-warn); color: var(--jd-warn); border-radius: var(--jd-radius); margin-bottom: 1.25em; }
.jdrop-btn {
	margin-top: .75em;
	padding: .45em 1.1em;
	background: transparent;
	border: 1px solid var(--jd-fg);
	border-radius: 3px;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: .1em;
}
.jdrop-btn:hover { background: var(--jd-fg); color: var(--jd-bg); text-shadow: none; }

/* honeypot */
.jdrop-hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* upload queue */
.jdrop-queue { display: grid; gap: .6em; margin: 0 0 1.25em; }
.jdrop-queue[hidden] { display: none; }
.jdrop-q {
	padding: .7em .85em;
	border: 1px solid var(--jd-line);
	border-left: 3px solid var(--jd-mute);
	border-radius: var(--jd-radius);
	background: var(--jd-panel);
	margin-bottom: 1em;
}
.jdrop-queue .jdrop-q { margin: 0; }
.jdrop-q.is-ok { border-left-color: var(--jd-fg); }
.jdrop-q.is-err { border-left-color: var(--jd-err); }
.jdrop-q-head { display: flex; gap: 1em; justify-content: space-between; }
.jdrop-q-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jdrop-q-size { flex: none; color: var(--jd-dim); font-variant-numeric: tabular-nums; }
.jdrop-q-bar { height: 4px; margin: .5em 0 .4em; background: rgba(57, 255, 106, .1); border-radius: 2px; overflow: hidden; }
.jdrop-q-bar > span { display: block; width: 0; height: 100%; background: var(--jd-fg); box-shadow: 0 0 8px var(--jd-fg); transition: width .12s linear; }
.jdrop-q.is-ok .jdrop-q-bar, .jdrop-q.is-err .jdrop-q-bar { display: none; }
.jdrop-q-msg { font-size: .85em; color: var(--jd-dim); }
.jdrop-q.is-ok .jdrop-q-msg { color: var(--jd-fg); }
.jdrop-q.is-err .jdrop-q-msg { color: var(--jd-err); text-shadow: 0 0 .3em rgba(255, 84, 104, .5); }
.jdrop-q-warn { margin-top: .45em; font-size: .8em; color: var(--jd-warn); text-shadow: 0 0 .3em rgba(255, 194, 61, .45); }
.jdrop-link { display: flex; align-items: center; gap: .5em; margin-top: .5em; font-size: .85em; }
.jdrop-link > span { flex: none; width: 5.5em; color: var(--jd-dim); text-transform: uppercase; letter-spacing: .08em; font-size: .9em; }
.jdrop-link input {
	flex: 1;
	min-width: 0;
	padding: .3em .5em;
	background: var(--jd-bg);
	border: 1px solid var(--jd-line);
	border-radius: 3px;
	color: var(--jd-fg);
	text-shadow: none;
}
.jdrop-link.is-secret input { border-color: rgba(255, 194, 61, .45); color: var(--jd-warn); }
.jdrop-link button {
	flex: none;
	padding: .3em .7em;
	background: transparent;
	border: 1px solid var(--jd-line-strong);
	border-radius: 3px;
	cursor: pointer;
}
.jdrop-link button:hover { background: var(--jd-fg); color: var(--jd-bg); text-shadow: none; }

/* search */
.jdrop-search {
	display: flex;
	align-items: center;
	gap: .6em;
	margin: 0 0 .6em;
	padding: .4em .6em;
	border: 1px solid var(--jd-line);
	border-radius: var(--jd-radius);
	background: var(--jd-panel);
}
.jdrop-search:focus-within { border-color: var(--jd-line-strong); }
.jdrop-search-label { color: var(--jd-dim); }
.jdrop-search-label::before { content: "$ "; }
.jdrop .jdrop-search-input {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: .2em 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--jd-fg);
	text-shadow: var(--jd-glow);
	-webkit-appearance: none;
	appearance: none;
}
.jdrop .jdrop-search-input:focus { outline: none; }
.jdrop .jdrop-search-input::placeholder { color: var(--jd-mute); text-shadow: none; opacity: 1; }

/* list */
.jdrop-listwrap { transition: opacity .12s; }
.jdrop-listwrap.is-loading { opacity: .5; }
.jdrop-head,
.jdrop-row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 9.5rem 6rem 2.5rem;
	align-items: center;
	column-gap: .8rem;
}
.jdrop-head {
	padding: .45em .6em;
	border-bottom: 1px solid var(--jd-line-strong);
	font-size: .76em;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--jd-dim);
}
.jdrop-h {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	width: max-content;
	padding: .2em .35em;
	margin: -.2em -.35em;
	border-radius: 3px;
	cursor: pointer;
}
.jdrop-h:hover { color: var(--jd-fg); background: var(--jd-hover); }
.jdrop-h.is-active { color: var(--jd-fg); }
.jdrop-h-size { justify-self: end; }
.jdrop-arrow { font-size: .9em; opacity: .45; }
.jdrop-h.is-active .jdrop-arrow { opacity: 1; }

.jdrop-row { padding: .5em .6em; border-bottom: 1px solid var(--jd-line); }
.jdrop-row:hover { background: var(--jd-hover); }
.jdrop-ic { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--jd-ic, var(--jd-fg)); }
.jdrop-ic svg { width: 26px; height: 26px; filter: drop-shadow(0 0 3px currentColor); }
.jdrop-ext { max-width: 44px; overflow: hidden; text-overflow: ellipsis; font-size: 9px; line-height: 1; letter-spacing: .05em; color: var(--jd-dim); }
.jdrop-ic--image   { --jd-ic: #5cf2ff; }
.jdrop-ic--video   { --jd-ic: #c38bff; }
.jdrop-ic--audio   { --jd-ic: #ff8bd8; }
.jdrop-ic--archive { --jd-ic: #ffc23d; }
.jdrop-ic--pdf     { --jd-ic: #ff6b6b; }
.jdrop-ic--doc     { --jd-ic: #7fb4ff; }
.jdrop-ic--sheet   { --jd-ic: #7dff9b; }
.jdrop-ic--slides  { --jd-ic: #ffa45c; }
.jdrop-ic--code    { --jd-ic: #b6ff5c; }
.jdrop-ic--key     { --jd-ic: #fff36b; }
.jdrop-ic--binary  { --jd-ic: #ff7a4d; }
.jdrop-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jdrop-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.jdrop-date, .jdrop-size { color: var(--jd-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.jdrop-size { text-align: right; }
.jdrop-dl {
	justify-self: end;
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	border: 1px solid var(--jd-line-strong);
	border-radius: 3px;
	transition: background-color .12s, color .12s;
}
.jdrop-dl svg { width: 18px; height: 18px; }
.jdrop-dl:hover { background: var(--jd-fg); color: var(--jd-bg); text-shadow: none; }
.jdrop-empty { padding: 2em .6em; text-align: center; color: var(--jd-dim); }
.jdrop-empty::before { content: "> "; }
.jdrop-empty::after { content: "_"; animation: jd-blink 1.05s steps(1) infinite; }

.jdrop-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: .8em .6em 0;
	font-size: .82em;
	color: var(--jd-dim);
}
.jdrop-pg { padding: .3em .6em; border: 1px solid var(--jd-line-strong); border-radius: 3px; }
a.jdrop-pg:hover { background: var(--jd-fg); color: var(--jd-bg); text-shadow: none; }
.jdrop-pg.is-off { opacity: .3; border-color: var(--jd-line); }
.jdrop-count { text-align: center; }

/* small screens: name on top, date · size underneath */
@media (max-width: 600px) {
	.jdrop { font-size: 13px; }
	.jdrop-head { display: flex; gap: 1.1rem; }
	.jdrop-h-ic, .jdrop-h-dl { display: none; }
	.jdrop-row {
		grid-template-columns: 38px auto 1fr 2.4rem;
		grid-template-areas: "ic name name dl" "ic date size dl";
		row-gap: .1em;
		column-gap: .6rem;
	}
	.jdrop-row .jdrop-ic { grid-area: ic; }
	.jdrop-row .jdrop-name { grid-area: name; }
	.jdrop-row .jdrop-date { grid-area: date; font-size: .85em; }
	.jdrop-row .jdrop-size { grid-area: size; font-size: .85em; text-align: left; }
	.jdrop-row .jdrop-size::before { content: "· "; }
	.jdrop-row .jdrop-dl { grid-area: dl; }
	.jdrop-link > span { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.jdrop-cursor, .jdrop-empty::after { animation: none; }
	.jdrop * { transition: none !important; }
}

@media (forced-colors: active) {
	.jdrop::after { display: none; }
}