@layer components {
	.files-app {
		--files-gutter: clamp(0.9rem, 3vw, 1.65rem);
		--files-row-space: 0.85rem;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		flex: 1;
		width: 100%;
		min-width: 0;
		max-width: 88rem;
		min-height: calc(100svh - 5rem);
		margin-inline: auto;
		padding: var(--files-gutter);
		color: var(--ink);
		font: 0.875rem/1.5 var(--face);
		container-type: inline-size;
	}
	[data-embedded="true"] .files-app { min-height: 100svh; }
	.files-app [hidden] { display: none !important; }
	.files-app p { margin: 0; max-width: none; }
	.files-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
	.files-heading { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
	.files-mark { width: 1.8rem; height: 1.8rem; flex: 0 0 auto; color: var(--accent); }
	.files-app h1 { font-size: 1.2rem; font-weight: 550; line-height: 1.25; letter-spacing: -0.025em; }
	.files-app h2 { font-size: 0.75rem; font-weight: 500; line-height: 1.5; letter-spacing: 0; }
	#files-where { margin-top: 0.2rem; font: 0.6875rem/1.5 var(--face); color: var(--ink-dim); overflow-wrap: anywhere; }
	.files-tools { display: flex; gap: 0.5rem; flex-wrap: wrap; }
	.files-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; box-sizing: border-box; min-height: 2.2rem; padding: 0.45rem 0.7rem; border: 1px solid var(--edge); border-radius: var(--r-2); background: var(--raised); color: var(--ink); font: 0.75rem/1.4 var(--face); cursor: pointer; text-decoration: none; text-align: center; }
	.files-button svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
	.files-button:hover:not(:disabled) { border-color: var(--accent); background: var(--surface); }
	.files-button--quiet { background: transparent; border-color: var(--rule); }
	.files-button--danger { color: var(--ink); }
	.files-button:disabled, .files-picker:has(input:disabled) { color: var(--ink-dim); cursor: default; }
	.files-app :is(button, a):focus-visible, .files-picker:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
	.files-picker { position: relative; }
	.files-input { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
	.files-status { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; padding-block: 0.65rem; border-block: 1px solid var(--rule); font: 0.75rem/1.5 var(--face); color: var(--ink-dim); }
	.files-status p { min-width: 0; flex: 1 1 12rem; overflow-wrap: anywhere; }
	.files-status__dot { width: 0.35rem; height: 0.35rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
	.files-app[data-state="ready"] .files-status__dot { background: var(--accent); }
	.files-app:is([data-state="error"], [data-state="uncertain"]) .files-status { color: var(--ink); }
	.files-library { flex: 1; min-width: 0; }
	.files-library__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: 0.65rem; color: var(--ink-dim); font: 0.6875rem/1.5 var(--face); }
	.files-list { list-style: none; padding: 0; margin: 0; }
	.files-row { display: grid; grid-template-columns: 2.15rem minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; align-items: center; padding-block: var(--files-row-space); border-block-start: 1px solid var(--rule); }
	.files-row__icon { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 2.15rem; height: 2.6rem; border: 1px solid var(--edge); border-radius: var(--r-2); color: var(--accent); background: var(--surface); font: 0.6rem/1 var(--face); overflow: hidden; }
	.files-row__icon svg { width: 1.35rem; height: 1.35rem; }
	.files-row__name { grid-column: 2; grid-row: 1; min-width: 0; font-size: 0.875rem; font-weight: 500; overflow-wrap: anywhere; }
	.files-row__meta { grid-column: 2; grid-row: 2; min-width: 0; color: var(--ink-dim); font: 0.6875rem/1.5 var(--mono); overflow-wrap: anywhere; }
	.files-row__actions { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: end; }
	.files-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; min-height: 13rem; padding: 1.5rem; border: 1px dashed var(--rule); border-radius: var(--r-3); text-align: center; }
	.files-empty svg { width: 3.5rem; height: 3.5rem; margin-bottom: 0.25rem; color: var(--ink-dim); }
	.files-empty h3 { font: 500 0.9375rem/1.5 var(--face); letter-spacing: 0; }
	.files-empty p { color: var(--ink-dim); font-size: 0.8125rem; }
	.files-storage { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 0.8rem; border-top: 1px solid var(--rule); color: var(--ink-dim); font: 0.6875rem/1.5 var(--face); }
	.files-storage>div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 1rem; }
	.files-storage progress { width: 100%; height: 0.3rem; border: 0; border-radius: var(--r-1); overflow: hidden; background: var(--raised); accent-color: var(--accent); }
	.files-storage progress::-webkit-progress-bar { background: var(--raised); }
	.files-storage progress::-webkit-progress-value { background: var(--accent); }
	.files-storage progress::-moz-progress-bar { background: var(--accent); }
	.files-no-script { padding: 0.8rem; border: 1px solid var(--edge); border-radius: var(--r-2); }
	[data-density="compact"] .files-app { --files-gutter: 0.8rem; --files-row-space: 0.6rem; gap: 0.75rem; }
	[data-density="roomy"] .files-app { --files-gutter: clamp(1.1rem, 4vw, 2rem); --files-row-space: 1.1rem; gap: 1.25rem; }
	@container (max-width: 30rem) {
		.files-row { grid-template-columns: 2rem minmax(0, 1fr); }
		.files-row__actions { grid-column: 2; grid-row: 3; justify-content: start; margin-top: 0.35rem; }
		.files-row__icon { width: 2rem; }
	}
	@container (max-width: 18rem) {
		.files-tools { width: 100%; }
		.files-tools>* { flex: 1; }
		.files-row__actions { grid-column: 1 / -1; }
	}
}