:host {
	display: block;
}

.document-manager {
	margin-block-start: var(--space-6, 1.5rem);
	padding: var(--space-5, 1.25rem);
	border: 1px solid var(--border, #dce5df);
	border-radius: var(--radius-xl, 1.375rem);
	background: var(--surface, #ffffff);
}

header p {
	margin: 0;
	color: var(--text-muted, #687670);
}

.document-list {
	display: grid;
	gap: var(--space-3, 0.75rem);
	margin: var(--space-5, 1.25rem) 0 0;
	padding: 0;
	list-style: none;
}

.document-list li {
	min-width: 0;
	padding: var(--space-4, 1rem);
	border-radius: var(--radius-md, 0.8125rem);
	background: var(--surface-soft, #e9efeb);
	overflow-wrap: anywhere;
}

.document-list h3,
.file-name {
	margin-block-end: var(--space-2, 0.5rem);
}

.file-name,
.document-list dt {
	color: var(--text-muted, #687670);
	font-size: 0.8rem;
}

.document-list dl {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
	gap: var(--space-3, 0.75rem);
	margin: 0;
}

.document-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1, 0.25rem);
}

.document-list dd {
	margin: var(--space-1, 0.25rem) 0 0;
}

.upload-form {
	display: grid;
	gap: var(--space-3, 0.75rem);
	margin-block-start: var(--space-6, 1.5rem);
	padding-block-start: var(--space-5, 1.25rem);
	border-block-start: 1px solid var(--border, #dce5df);
}

.upload-form h3,
.form-error {
	margin: 0;
}

.upload-form fieldset {
	display: grid;
	gap: var(--space-3, 0.75rem);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.form-error {
	color: var(--danger, #b42318);
}

.upload-submit {
	justify-self: start;
}

.file-picker {
	display: grid;
	gap: var(--space-2, 0.5rem);
	min-width: 0;
	color: var(--text, #17211e);
	font-weight: 700;
}

.file-picker input {
	min-height: 2.75rem;
	max-width: 100%;
}

.file-picker small {
	color: var(--text-muted, #687670);
	font-weight: 400;
	overflow-wrap: anywhere;
}

.date-fields {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
	gap: var(--space-3, 0.75rem);
}