.jfs { width: 100%; max-width: none; margin: 0 0 32px; color: var(--jfs-ink, var(--color-ink)); }
.jfs-label { display: block; font-weight: 600; margin-bottom: 8px; }
.jfs-row { display: flex; gap: 8px; }
.jfs-input { flex: 1 1 auto; min-width: 0; padding: 12px 14px; font: inherit; border: 2px solid var(--jfs-ink, var(--color-ink)); border-radius: 8px; background: var(--color-paper); color: inherit; }
.jfs-input:focus-visible, .jfs-select:focus-visible, .jfs-btn:focus-visible, .jfs-title:focus-visible, .jfs-pager a:focus-visible, .jfs-clear:focus-visible { outline: 3px solid var(--jfs-accent, var(--color-accent)); outline-offset: 2px; }
.jfs-btn { padding: 12px 22px; font: inherit; font-weight: 700; border: 0; border-radius: 8px; cursor: pointer; background: var(--jfs-accent, var(--color-accent)); color: var(--jfs-on-accent, var(--color-ink)); }
.jfs-btn:hover { filter: brightness(1.08); }

.jfs-dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-top: 12px; }
.jfs-field { display: flex; flex-direction: column; gap: 4px; min-width: 190px; }
.jfs-dlabel { font-size: .875em; font-weight: 600; }
.jfs-select { padding: 10px 12px; font: inherit; border: 2px solid var(--jfs-ink, var(--color-ink)); border-radius: 8px; background: var(--color-paper); color: inherit; }
.jfs-clear { padding: 10px 4px; color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.jfs-note, .jfs-count { margin: 18px 0 8px; }

/* Results: 3 columns on desktop, 2 on tablet, 1 on phones */
.jfs-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.jfs-item { display: flex; gap: 14px; padding: 14px; background: var(--color-paper); border: 1px solid color-mix(in srgb, var(--color-ink) 15%, transparent); border-radius: 10px; }
.jfs-cover { flex: 0 0 72px; }
.jfs-cover img { display: block; width: 72px; height: auto; border-radius: 4px; box-shadow: 0 1px 4px color-mix(in srgb, var(--color-ink) 25%, transparent); }
.jfs-body { min-width: 0; }
.jfs-title { font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.jfs-snippet { margin: 6px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.jfs mark { background: var(--color-highlight); color: inherit; padding: 0 2px; border-radius: 2px; }
.jfs-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.jfs-pager a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1024px) {
	.jfs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.jfs-row { flex-direction: column; }
	.jfs-field { flex: 1 1 100%; min-width: 0; }
	.jfs-list { grid-template-columns: 1fr; }
	.jfs-cover { flex-basis: 56px; }
	.jfs-cover img { width: 56px; }
}