/* ============================================================
   404 · Archive catalogue — filters + results
   ============================================================ */

.archive-head {
	padding-block: clamp(40px, 6vw, 72px) var(--s-6);
	border-bottom: 1px solid var(--line);
}
.archive-head__eyebrow { margin-bottom: var(--s-4); }
.archive-head__title { font-size: var(--fs-h1); }
.archive-head__desc { color: var(--text-muted); margin-top: var(--s-4); max-width: 60ch; }

.archive__layout {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: clamp(20px, 3vw, 44px);
	padding-block: var(--s-7) var(--section-y);
	align-items: start;
}

/* ---------- Filters ---------- */
.filters {
	position: sticky;
	top: calc(var(--header-h) + 20px);
	display: grid;
	gap: var(--s-5);
}
.filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.filters__head h2 { font-size: 0.82rem; font-family: var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.filters__close { display: none; }

.filters__group { display: grid; gap: 10px; padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
.filters__group:last-of-type { border-bottom: 0; }
.filters__label {
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.filters select,
.filters input[type="search"] {
	width: 100%;
	background-color: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	color: var(--text);
	font-size: 0.9rem;
	outline: none;
	transition: border-color var(--t-fast) var(--ease);
}
.filters select:focus,
.filters input[type="search"]:focus { border-color: color-mix(in srgb, var(--accent) 50%, var(--line-strong)); }

/* Radio/pill list for status */
.filters__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.filters__pill {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	color: var(--text-muted);
	cursor: pointer;
	transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.filters__pill { display: inline-flex; align-items: center; user-select: none; }
.filters__pill:hover { color: var(--text); border-color: var(--line-strong); }
.filters__pill.is-active,
.filters__pill:has(input:checked) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.filters__pill:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.filters__actions { display: flex; gap: 10px; }

/* ---------- Results ---------- */
.archive__main { min-width: 0; }
.archive__bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-4);
	flex-wrap: wrap;
	padding-bottom: var(--s-4);
	margin-bottom: var(--s-5);
	border-bottom: 1px solid var(--line);
}
.archive__count {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	color: var(--text-muted);
}
.archive__count b { color: var(--text); }
.archive__summary { color: var(--text-faint); font-size: var(--fs-small); min-height: 1.2em; margin-top: 4px; }
.archive__tools { display: inline-flex; align-items: center; gap: var(--s-4); margin-left: auto; }

.filters-open-btn { display: none; }

.view-toggle {
	display: inline-flex;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.view-toggle__btn {
	display: inline-grid;
	place-items: center;
	width: 38px; height: 36px;
	color: var(--text-faint);
	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.view-toggle__btn svg { width: 16px; height: 16px; }
.view-toggle__btn + .view-toggle__btn { border-left: 1px solid var(--line); }
.view-toggle__btn.is-active { color: var(--accent-ink); background: var(--accent); }

.sort-lead {
	font-family: var(--font-mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-faint);
	white-space: nowrap;
}
.sort-select {
	height: 36px;
	background-color: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 0 12px;
	color: var(--text);
	font-size: 0.85rem;
	transition: border-color var(--t-fast) var(--ease);
}
.sort-select:hover { border-color: var(--line-strong); }
.view-toggle__btn:hover:not(.is-active) { color: var(--text); background: var(--surface-hover); }

/* Active filter chips */
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s-5); }
.active-filters:empty { display: none; }
.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 8px 5px 12px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-pill);
	background: var(--surface);
	font-size: 0.78rem;
	color: var(--text);
}
.chip__x {
	display: inline-grid;
	place-items: center;
	width: 18px; height: 18px;
	border-radius: 50%;
	color: var(--text-faint);
	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.chip__x:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, transparent); }
.chip--clear { border-color: var(--line); color: var(--text-muted); padding: 5px 12px; }
.chip--clear:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

/* Results container + loading */
.archive__results { position: relative; min-height: 240px; transition: opacity var(--t) var(--ease); }
.archive__results.is-loading { opacity: 0.4; pointer-events: none; }
.archive__results.is-loading::after {
	content: "";
	position: absolute;
	left: 50%; top: 64px;
	width: 26px; height: 26px;
	margin-left: -13px;
	border: 2px solid var(--line-strong);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: cy404-spin 0.7s linear infinite;
}
@keyframes cy404-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.archive__results.is-loading::after { animation: none; }
	.sys__scan { display: none; }
}

/* Registry header shows only in list view. */
.archive__results .reg-head { display: none; }
.archive__results.view-list .reg-head { display: grid; }
@media (max-width: 900px) {
	.archive__results.view-list .reg-head { display: none; }
}