/* Saab archive additions on top of /css/main.css (the spodder.com stylesheet):
   same 70% column, Helvetica headings and nav, serif body, grey links. */

:root {
	--ink: #333;
	--muted: #999;
	--line: #d5d5d5;
	--wash: #f7f7f7;
	--mark: #fff1a8;
	--sans: "Helvetica", "Arial", sans-serif;
}

body { background: #fff; }
* { box-sizing: border-box; }
img { display: block; max-width: 100%; }
mark { background: var(--mark); color: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* main.css uses a 70% column; on phones that's too narrow for search. */
@media (max-width: 720px) {
	body { width: auto; margin: 32px 16px; }
	h1 { font-size: 2.2em; }
	p { font-size: 1.2em; }
}

footer .note { font-size: 1em; color: var(--muted); }

/* --- index -------------------------------------------------------------------- */
.hero h1 { margin-bottom: 0.4em; }
.hero p { max-width: 36em; }
.hero .stats { font: bold 0.8em var(--sans); color: var(--muted); }

.tools {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #fff;
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
}
.search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); padding: 0 12px; }
.search:focus-within { border-color: var(--ink); }
.search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: inherit; font-family: inherit; font-size: 1.2em; padding: 10px 0; }
.chips { display: flex; gap: 6px; overflow-x: auto; margin-top: 10px; scrollbar-width: none; }
.chip {
	flex: none;
	font: bold 0.8em var(--sans);
	color: var(--muted);
	background: none;
	border: 1px solid var(--line);
	padding: 5px 10px;
	cursor: pointer;
}
.chip:hover { color: var(--ink); border-color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.shelf h2, .extras h2, #results h2 {
	font: bold 1em var(--sans);
	color: var(--ink);
	margin: 2em 0 1em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid var(--line);
}

.grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px 18px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.card a { display: block; text-decoration: none; }
.card img { width: 100%; height: auto; aspect-ratio: 5 / 7; object-fit: contain; background: var(--wash); border: 1px solid var(--line); }
.card .title { display: block; font: bold 0.95em/1.3 var(--sans); color: var(--ink); margin-top: 8px; }
.card a:hover .title { text-decoration: underline; }
.card .facts { display: block; font: 0.75em/1.4 var(--sans); color: var(--muted); margin-top: 3px; }
.empty { color: var(--muted); }

#results ol { list-style: none; margin: 0; padding: 0; }
.hit { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.hit img { width: 56px; aspect-ratio: 5 / 7; object-fit: contain; border: 1px solid var(--line); background: var(--wash); }
.hit h3 { margin: 0; font: bold 1.1em var(--sans); }
.hit h3 a { color: var(--ink); }
.hit p { font-size: 1em; margin: 6px 0 0; overflow-wrap: anywhere; }
.hit ul { list-style: none; margin: 6px 0 0; padding: 0; }
.hit li { margin-top: 6px; overflow-wrap: anywhere; }
.hit li a { font: bold 0.8em var(--sans); margin-right: 6px; white-space: nowrap; }

.extras ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--sans); }
.extras span { font-size: 0.8em; color: var(--muted); }

/* --- document and text pages ----------------------------------------------------- */
.crumb { font: bold 0.9em var(--sans); margin: 0; }
.doc-head { display: grid; gap: 24px; margin-top: 16px; }
@media (min-width: 720px) { .doc-head { grid-template-columns: 240px 1fr; gap: 40px; align-items: start; } }
.cover img { width: 100%; max-width: 240px; border: 1px solid var(--line); background: var(--wash); }
.doc h1 { margin: 0.2em 0 0.3em; line-height: 1.1; }
.doc h1 a { color: inherit; }
.doc .kind { font: bold 0.9em var(--sans); color: var(--muted); margin: 0; }
.doc .facts { font: 0.9em var(--sans); color: var(--muted); margin: 0; }
.doc .file { font: 0.75em var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.2em 0; }
.btn { font: bold 0.9em var(--sans); color: var(--ink); border: 1px solid var(--ink); padding: 8px 14px; }
.btn:hover { text-decoration: none; background: var(--wash); }
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { background: #000; }

.text { margin: 2.5em 0; border-top: 1px solid var(--line); }
.text summary, .text > h2 { font: bold 1em var(--sans); cursor: pointer; padding: 1em 0; margin: 0; }
.text summary span, .text > h2 span { font-weight: normal; color: var(--muted); }
.text section { max-width: 42em; }
.text h3 { font: bold 0.8em var(--sans); margin: 2em 0 0.4em; scroll-margin-top: 16px; }
.text p { font-size: 1em; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.spans { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.spans a { display: block; font: bold 0.85em var(--sans); padding: 8px 10px; border: 1px solid var(--line); }
.spans a:hover { border-color: var(--muted); text-decoration: none; color: var(--ink); }
.pager { display: flex; justify-content: space-between; gap: 12px; margin: 1em 0; font: bold 0.9em var(--sans); }
.notext { color: var(--muted); }

/* spodder.com keeps its chrome lower case; document titles keep their own case. */
.chip, .shelf h2, .kind { text-transform: lowercase; }
.doc .description { font-size: 1.1em; max-width: 36em; margin: 0.8em 0 0; }
.doc .source { font: 0.85em var(--sans); color: var(--muted); margin: 0.4em 0 0; }