/* site.css — main-app stylesheet. Design tokens live in tokens.css (shared
   with wiki.css); this sheet must not redefine them. tokens.css is NOT
   @imported here: an @import URL carries no build-stamp query, so under the
   immutable /static caching it would pin returning browsers to year-stale
   tokens. Every shell links tokens.css itself via a stamped <link> BEFORE
   this sheet (base.templ). */

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--fg);
	background: var(--bg);
	line-height: 1.5;
}

.container {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

main.container {
	padding-top: 2rem;
	padding-bottom: 3rem;
	min-height: calc(100vh - 8rem);
}

/* --- accessibility helpers ------------------------------------------- */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* Skip-to-content: hidden until keyboard focus reaches it, then a fixed
   pill at the top-left, above the header. */
.skip-link {
	position: fixed;
	top: .75rem;
	left: .75rem;
	z-index: 100;
	padding: .5rem 1.1rem;
	background: var(--brand);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--radius-pill);
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	width: auto;
	height: auto;
	overflow: visible;
	clip: auto;
	clip-path: none;
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* --- site chrome ------------------------------------------------------ */
.site-header {
	background: var(--brand);
	border-bottom: 1px solid var(--brand);
	padding: 1rem 0;
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-header .brand {
	font-weight: 600;
	text-decoration: none;
	color: #fff;
}

/* The deployment's organisation name (rag.orgName), rendered inside the brand
   link. Normal weight and the same dimmed white the nav links use, so "Corpus"
   stays the product and the organisation reads as a subtitle rather than part
   of the name. */
.site-header .brand-org {
	font-weight: 400;
	color: rgba(255, 255, 255, .82);
}

.site-header nav a {
	margin-left: 1rem;
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
}

.site-header nav a:hover,
.site-header nav a.active,
.site-header nav a[aria-current="page"] {
	color: #fff;
}

.site-header .brand:focus-visible,
.site-header nav a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	border-radius: 2px;
}

.site-header .user-name {
	margin-left: 1rem;
	color: rgba(255, 255, 255, .62);
}

.site-footer {
	border-top: 1px solid var(--border);
	background: var(--card);
	padding: 1.5rem 0;
	color: var(--muted);
	font-size: 0.875rem;
}

/* --- type scale (review D3) ------------------------------------------- */
h1, h2, h3 {
	line-height: 1.2;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

code {
	background: #f0f0f0;
	padding: 0.1em 0.3em;
	border-radius: var(--radius);
	font-size: 0.9em;
}

/* --- button system (review A1) ---------------------------------------- */
/* The base is grouped with every modifier so templates that omit .btn still
   render correctly; display:inline-block makes anchor-buttons and real
   buttons indistinguishable. */
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.login-button {
	display: inline-block;
	padding: .5rem 1rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font: inherit;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.btn-primary,
.login-button {
	background: var(--accent);
	color: #fff;
}

.btn-secondary {
	background: var(--card);
	border-color: var(--border);
	color: var(--accent);
}

.btn-danger {
	background: var(--error);
	color: #fff;
}

.btn-primary:hover,
.btn-danger:hover,
.login-button:hover {
	filter: brightness(.92);
}

.btn-secondary:hover {
	background: #f2f5fb;
	border-color: var(--accent);
}

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn[aria-disabled="true"],
.btn-primary[aria-disabled="true"],
.btn-secondary[aria-disabled="true"],
.btn-danger[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
	filter: none;
	pointer-events: none;
}

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.login-button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* SSO landing page: the mode-preview line under the welcome copy. */
.landing-features {
	color: var(--muted);
}

/* --- shared disclosure pattern (review D2) ----------------------------- */
/* One summary look — hidden native marker + ▸/▾ — shared by the generic
   .disclosure class and the pre-existing SAR candidate, SAR method, search
   snippet and chat sources summaries. */
details.disclosure > summary,
.sar-candidate-summary,
.search-snippet-toggle > summary,
.sar-method > summary,
.source-section > summary {
	cursor: pointer;
	list-style: none;
}

details.disclosure > summary::-webkit-details-marker,
.sar-candidate-summary::-webkit-details-marker,
.search-snippet-toggle > summary::-webkit-details-marker,
.sar-method > summary::-webkit-details-marker,
.source-section > summary::-webkit-details-marker {
	display: none;
}

details.disclosure > summary::before,
.sar-candidate-summary::before,
.search-snippet-toggle > summary::before,
.sar-method > summary::before,
.source-section > summary::before {
	content: "▸";
	color: var(--muted);
	font-size: .8em;
	margin-right: .35rem;
}

details.disclosure[open] > summary::before,
details[open] > .sar-candidate-summary::before,
.search-snippet-toggle[open] > summary::before,
.sar-method[open] > summary::before,
.source-section[open] > summary::before {
	content: "▾";
}

details.disclosure > summary:focus-visible,
.sar-candidate-summary:focus-visible,
.search-snippet-toggle > summary:focus-visible,
.sar-method > summary:focus-visible,
.source-section > summary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* --- form card --------------------------------------------------------- */
.form-card {
	max-width: 420px;
	margin: 2rem auto;
	background: var(--card);
	padding: 2rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.form-card label {
	display: block;
	margin: 0.75rem 0;
	font-size: 0.9rem;
}

.form-card input[type=text],
.form-card input[type=email],
.form-card input[type=password] {
	display: block;
	width: 100%;
	padding: 0.5rem;
	margin-top: 0.25rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: 1rem;
}

.form-card label.checkbox {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.form-card button {
	width: 100%;
	padding: 0.6rem;
	margin-top: 0.5rem;
	background: var(--accent);
	color: white;
	border: 0;
	border-radius: var(--radius);
	font-size: 1rem;
	cursor: pointer;
}

.form-card button:hover {
	filter: brightness(0.95);
}

.form-card button:disabled {
	background: #b9c2d6;
	cursor: not-allowed;
}

.form-card button.link-button {
	display: inline;
	width: auto;
	padding: 0 0.25rem;
	margin: 0;
	background: none;
	color: var(--accent);
	text-decoration: underline;
	font-size: inherit;
}

/* Inline field feedback (HTMX partial swap targets). */
.field-msg {
	margin: -0.25rem 0 0.75rem;
	min-height: 1.25rem;
	font-size: 0.85rem;
}

.field-ok   { color: var(--success); }
.field-warn { color: #b07d00; }
.field-err  { color: var(--error); }

/* zxcvbn strength bar. */
.pw-bar {
	height: 6px;
	border-radius: var(--radius-pill);
	background: #e5e5e5;
	overflow: hidden;
	margin: 0.25rem 0;
}
.pw-bar > span {
	display: block;
	height: 100%;
	width: 0%;
	transition: width 200ms ease, background 200ms ease;
}
.pw-bar-0 > span { width: 10%; background: #c92a2a; }
.pw-bar-1 > span { width: 30%; background: #e8590c; }
.pw-bar-2 > span { width: 55%; background: #f59f00; }
.pw-bar-3 > span { width: 80%; background: #74b816; }
.pw-bar-4 > span { width: 100%; background: var(--success); }

.pw-line   { display: flex; gap: 0.5rem; align-items: baseline; }
.pw-time   { color: var(--muted); font-size: 0.8rem; }
.pw-warn   { color: var(--error); margin-top: 0.25rem; }
.pw-hints  { margin: 0.25rem 0 0 1rem; padding: 0; color: var(--muted); font-size: 0.8rem; }
.pw-hints li { margin: 0.1rem 0; }

.flash {
	padding: 0.75rem 1rem;
	border-radius: var(--radius);
	margin-bottom: 1rem;
}

.flash-success {
	background: #e6f7ee;
	color: var(--success);
	border: 1px solid var(--success);
}

.flash-error {
	background: #fdecec;
	color: var(--error);
	border: 1px solid var(--error);
}

.hero {
	padding: 2rem 0;
}

.hero h1 {
	font-size: 2.5rem;
	margin: 0 0 1rem;
}

.error h1 {
	font-size: 4rem;
	margin: 0;
	color: var(--error);
}

/* Honeypot field — visually hidden from sighted users and screen
   readers; bots that fill every <input> by name will still populate it. */
.honeypot {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
}

/* --- collection chooser (search chooser / index pages) ----------------- */
.chooser { max-width: 40rem; }
.chooser-list {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .6rem;
}
.chooser-item {
	display: block;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .8rem 1rem;
	color: var(--fg);
	font-weight: 600;
	text-decoration: none;
}
.chooser-item:hover {
	border-color: var(--accent);
	color: var(--accent);
}
.chooser-item:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}
.chooser-meta {
	display: block;
	margin-top: .15rem;
	color: var(--muted);
	font-size: .85rem;
	font-weight: 400;
}
.chooser-empty { color: var(--muted); font-style: italic; }

/* --- collection page (docs-and-gui design §4) ------------------------ */
/* Picker first, then the actions, then the panel - the order the reader thinks. */
.collection { display: flex; flex-direction: column; gap: 1rem; max-width: 48rem;
              margin: 0 auto; }
.collection-picker { display: flex; gap: .5rem; align-items: center; }
.collection-picker select { flex: 1; padding: .4rem; }
.collection-actions { display: flex; gap: 1rem; align-items: center; }

/* Ask|Search as ONE pill with two halves; Wiki stays a separate outlined
   button because it navigates away and must look like it will. */
.segmented { display: inline-flex; border: 1px solid #ccc;
             border-radius: 999px; overflow: hidden; }
.seg { padding: .4rem 1.2rem; background: #f5f5f5; color: var(--accent);
       text-decoration: none; white-space: nowrap; }
.seg + .seg { border-left: 1px solid #ccc; }
.seg:hover { background: #eef2f8; text-decoration: none; }
.seg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.seg.is-active { background: var(--accent); color: #fff; font-weight: 600; }
.seg.disabled { color: #999; background: #f0f0f0; cursor: not-allowed;
                pointer-events: none; }
.seg.is-active.disabled { background: #e2e2e2; color: #777; }

/* BOTH panels are always in the DOM - only this decides which one is on
   screen, so switching to Search and back cannot lose the conversation. */
.collection[data-view="ask"] #panel-search { display: none; }
.collection[data-view="search"] #panel-ask { display: none; }

/* --- chat panel ------------------------------------------------------- */
.chat { display: flex; flex-direction: column; gap: 1rem; }
.btn-wiki { flex: 0 0 auto; white-space: nowrap; padding: .4rem .8rem;
            border: 1px solid #ccc; border-radius: var(--radius); background: #f5f5f5;
            color: var(--accent); text-decoration: none; cursor: pointer; }
.btn-wiki:hover { background: #eef2f8; text-decoration: none; }
.btn-wiki:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-wiki.disabled { color: #999; background: #f0f0f0; cursor: not-allowed;
                     pointer-events: none; }
.chat-thread { min-height: 20rem; max-height: 60vh; overflow-y: auto;
               display: flex; flex-direction: column; gap: .75rem;
               padding: 1rem; border: 1px solid #ddd; border-radius: var(--radius); }
/* First-run onboarding hint, removed on first message. */
.chat-empty-hint { margin: auto; max-width: 28rem; padding: 2rem 1rem;
                   color: var(--muted); text-align: center; }
.msg { padding: .6rem .8rem; border-radius: var(--radius); max-width: 90%;
       white-space: pre-wrap; word-wrap: break-word; }
.msg-user { align-self: flex-end; background: #e8f0fe; }
.msg-assistant { align-self: flex-start; background: #f5f5f5; }
/* "Thinking…" placeholder shown in the assistant bubble before the first
   streamed delta arrives. */
.msg-thinking .msg-text {
	color: var(--muted);
	animation: msg-pulse 1.2s ease-in-out infinite;
}
@keyframes msg-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .45; }
}
@media (prefers-reduced-motion: reduce) {
	.msg-thinking .msg-text { animation: none; }
}
/* Rendered-markdown answer body */
.msg-text > :first-child { margin-top: 0; }
.msg-text > :last-child { margin-bottom: 0; }
.msg-text p { margin: .5em 0; }
.msg-text .md-heading { margin: .7em 0 .2em; }
.msg-text ul, .msg-text ol { margin: .4em 0; padding-left: 1.4rem; }
.msg-text ul { list-style: none; padding-left: 1rem; }
.msg-text ul > li::before { content: "\2013\00a0"; color: #666; } /* en dash */
.msg-text li { margin: .15em 0; }
.msg-text code { background: #eaeaea; padding: 0 .25em; border-radius: var(--radius);
                 font-size: .92em; }
.citation-link { color: var(--accent); text-decoration: none; }
.citation-link:hover { text-decoration: underline; }
/* A cited file carries the same folder control as its Sources row, shown only
   on hover or keyboard focus: an always-visible 📁 after every filename would
   clutter the prose the answer is made of.
   visibility (not display) so the icon's space is reserved either way — the
   line must not reflow under the reader's cursor as they move along it, and
   focus-within keeps it reachable without a mouse. */
.citation { white-space: nowrap; }
.citation-folder { visibility: hidden; }
.citation:hover .citation-folder,
.citation:focus-within .citation-folder { visibility: visible; }
/* No hover on a touch screen: there, show it always rather than never. */
@media (hover: none) {
	.citation-folder { visibility: visible; }
}

/* Per-answer actions (Copy). */
.msg-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.msg-copy {
	font: inherit;
	font-size: .78rem;
	padding: .15rem .6rem;
	background: var(--card);
	color: var(--accent);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	cursor: pointer;
}
.msg-copy:hover { border-color: var(--accent); }
.msg-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Character counter, shown only near the input limit. */
.chat-counter { color: var(--muted); font-size: .8rem; text-align: right;
                margin: .1rem 0 0; }

/* Sources */
.msg-sources { margin-top: .5rem; font-size: .85em; }
.source-section > summary { font-weight: 600; }
.source-section { margin-top: .3rem; }
.msg-sources ul { margin: .2rem 0 .3rem 1rem; padding-left: 1rem; list-style: none; }
.source-item { margin: .15rem 0; }
.source-date { color: #666; }
.source-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.source-link:hover { text-decoration: underline; }
.source-folder { background: none; border: none; padding: 0 .3rem; cursor: pointer;
                 font-size: 1em; line-height: 1; text-decoration: none; }
.source-folder:hover { filter: brightness(1.2); }
/* Attribution on a cross-collection answer's sources. Not a link: navigating
   away from a chat page costs the reader the conversation. */
.source-collection { color: #666; font-size: .85em; white-space: nowrap; }
.chat-input { display: flex; gap: .5rem; }
.chat-input textarea { flex: 1; padding: .5rem; resize: vertical; }
.chat-input button { padding: .5rem 1.25rem; }
.chat-error { color: #b00020; display: flex; gap: .75rem; align-items: center; }
.chat-background { margin-top: .5rem; font-size: .85em; opacity: .85; }
.chat-background-label { font-weight: 600; }
.chat-background-link { margin-right: .6rem; text-decoration: underline dotted; }
.chat-background-link::before { content: "📖 "; }
.chat-suggestion { margin-top: .5rem; }
.chat-suggestion button { cursor: pointer; text-decoration: underline; background: none; border: none; color: inherit; font: inherit; }
.chat-truncated { margin-top: .5rem; font-style: italic; opacity: .8; }
.chat-empty { margin: .75rem 0; padding: .75rem 1rem; border: 1px solid #e0e0e0;
              background: #fafafa; color: #444; }
.chat-scope { display: inline-flex; gap: .5rem; align-items: center; margin: .3rem 0; padding: .2rem .6rem; border: 1px solid currentColor; border-radius: 1rem; font-size: .85em; }
.chat-scope button { cursor: pointer; background: none; border: none; font: inherit; }
@media (max-width: 40rem) { .msg { max-width: 100%; } }

/* --- wiki ------------------------------------------------------------ */
.wiki-back { margin-bottom: 1rem; font-size: .9rem; }
.wiki-back a,
.wiki-collection-list a,
.wiki-theme-list a { color: var(--accent); text-decoration: none; }
.wiki-back a:hover,
.wiki-collection-list a:hover,
.wiki-theme-list a:hover { text-decoration: underline; }
.wiki-placeholder, .wiki-empty { color: var(--muted); }
.wiki-ask-btn { float: right; font-size: .85em; text-decoration: none; border: 1px solid currentColor; border-radius: .3rem; padding: .15rem .5rem; }
.wiki-asof { color: #b07d00; font-size: .85rem; }
.wiki-collection-list, .wiki-theme-list { list-style: none; padding-left: 0; }
.wiki-theme-list > li { margin: .5rem 0; }
.wiki-count { color: var(--muted); font-size: .85rem; margin-left: .4rem; }
.wiki-oneliner { display: block; color: var(--muted); font-size: .9rem; }
.wiki-appears-under { font-size: .9rem; color: var(--muted); }
.wiki-see-also { margin-top: 1.5rem; }
.wiki-see-also ul { padding-left: 1.2rem; }
/* Rendered wiki markdown body + resolved [[wiki-links]]. */
.wiki-body > :first-child { margin-top: 0; }
.wiki-body a.wl { color: var(--accent); text-decoration: none;
                  border-bottom: 1px dotted var(--accent); }
.wiki-body a.wl:hover { border-bottom-style: solid; }
/* A broken link is a <span>, not an <a> — it has no target to navigate to. */
.wiki-body .wl.broken { color: var(--error); cursor: help;
                        border-bottom: 1px dashed var(--error); }
/* A citation that could not be verified against the repo at the last index. */
.wiki-body code.cite.unverified { background: #fdf6e3; color: #6b5a12;
                                  cursor: help;
                                  border-bottom: 1px dotted #c8a415; }
.wiki-body table { border-collapse: collapse; margin: .5rem 0; }
.wiki-body th, .wiki-body td { border: 1px solid var(--border); padding: .3rem .5rem; }
.wiki-body blockquote { margin: .5rem 0; padding: .25rem .75rem;
                        border-left: 3px solid var(--border); color: var(--muted); }

/* ── SAR form & run chrome (review C3 styling pass) ───────────────────────── */
.sar-intro { color: var(--muted); max-width: 46rem; margin: .25rem 0 1.25rem; }
.sar-hint { color: var(--muted); font-size: .85rem; margin: .35rem 0; }
.sar-error { color: var(--error); font-weight: 600; }
.sar-empty { color: var(--muted); font-style: italic; }
.sar-purged { color: var(--muted); font-style: italic; max-width: 46rem; }

.sar-running {
	background: var(--card);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
	padding: .6rem .9rem;
}
.sar-running a { color: var(--accent); }

.sar-back { font-size: .9rem; margin: 0 0 .5rem; }
.sar-back a { color: var(--accent); text-decoration: none; }
.sar-back a:hover { text-decoration: underline; }

.sar-meta { color: var(--muted); font-size: .9rem; margin: .25rem 0 1rem; }

.sar-progress {
	background: var(--card);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: var(--radius);
	padding: .75rem 1rem;
	max-width: 46rem;
}

/* Fieldset cards — the SAR form reuses the .form-card treatment. */
.sar-request fieldset,
.sar-suggestions {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1rem 1.25rem;
	margin: 0 0 1rem;
}
.sar-request legend { font-weight: 600; padding: 0 .35rem; }
.sar-request label { display: block; margin: .6rem 0 .2rem; font-size: .9rem; }
.sar-request input[type=text],
.sar-request input[type=date],
.sar-request textarea,
.sar-request select {
	display: block;
	width: 100%;
	max-width: 28rem;
	padding: .5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font: inherit;
}

/* Checkbox rows (AI suggestions, collection scope). */
.sar-check {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: .3rem 0;
	font-size: .9rem;
}

.sar-actions { display: flex; gap: .6rem; align-items: center; margin: 1rem 0; }

/* Per-tier counts strip: inline pill badges. */
.sar-counts {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: .75rem 0 1rem;
	padding: 0;
}
.sar-counts li {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: .15rem .7rem;
	font-size: .82rem;
}

.sar-cap {
	background: #fff3d6;
	border: 1px solid #e6c260;
	border-radius: var(--radius);
	color: #8a5300;
	padding: .5rem .75rem;
	font-size: .9rem;
	max-width: 46rem;
}

.sar-exports { display: flex; gap: .6rem; margin: .75rem 0; }

.sar-method { margin: 1rem 0; }
.sar-method > summary { font-weight: 600; }
.sar-method pre {
	white-space: pre-wrap;
	overflow-x: auto;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: .75rem 1rem;
	font-size: .85rem;
}

/* Tier sections. */
.sar-tier { margin: 1.5rem 0; }
.sar-tier h2 {
	border-bottom: 1px solid var(--border);
	padding-bottom: .25rem;
	margin: 1.5rem 0 .6rem;
}
.sar-tier h2 small {
	color: var(--muted);
	font-weight: 400;
	font-size: .7em;
	margin-left: .4rem;
}

.sar-candidate-head { color: #444; font-size: .9rem; margin: .1rem 0 .3rem; }
.sar-match { font-weight: 600; }
.sar-reason { color: var(--muted); font-style: italic; margin: .2rem 0; }
.sar-snippet {
	margin: .4rem 0;
	padding: .1rem 0 .1rem .7rem;
	border-left: 3px solid var(--border);
	color: #333;
}
.sar-locations { margin: .3rem 0; padding-left: 1.2rem; color: #444; font-size: .9em; }

/* Previous searches (form page). */
.sar-previous { margin-top: 2.5rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.sar-run-list { list-style: none; margin: .5rem 0; padding: 0; }
.sar-run-row {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .75rem;
	align-items: baseline;
	padding: .45rem .2rem;
	border-bottom: 1px solid var(--border);
}
.sar-run-subject { color: var(--accent); text-decoration: none; font-weight: 600; }
.sar-run-subject:hover { text-decoration: underline; }
.sar-run-meta { color: var(--muted); font-size: .85rem; }

/* ── SAR results ──────────────────────────────────────────────────────────── */
.sar-candidate { border-bottom: 1px solid #d7d7d7; margin-bottom: .5rem; padding-bottom: .35rem; }
.sar-candidate-summary {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .2rem;
}
/* The flex gap already spaces the shared ▸/▾ triangle. */
.sar-candidate-summary::before { margin-right: 0; }
.sar-doc-name { font-weight: 600; }
.sar-copies { color: #666; font-size: .85em; }
.sar-flag {
	font-size: .72em;
	color: #444;
	background: #ececec;
	border-radius: var(--radius);
	padding: 0 .35rem;
}
.sar-candidate-body { padding: .3rem 0 1rem 1.2rem; }

.sar-run-footer { margin-top: 2rem; }
.sar-run-footer hr { border: 0; border-top: 1px solid #d7d7d7; margin: 1.25rem 0; }
.sar-purge .sar-hint { max-width: 46rem; }

.sar-review { margin-top: .6rem; }
.sar-review label { margin-right: 1rem; font-size: .9rem; }
.sar-review input[type=text],
.sar-review select {
	padding: .3rem .4rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font: inherit;
}

/* Prominent status badges: white tick/cross on a coloured pill, right-aligned. */
.sar-status-mark {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6rem;
	height: 1.6rem;
	padding: 0 .2rem;
	border-radius: var(--radius-pill);
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1;
}
.sar-status-include { background: #1a7f37; color: #fff; }   /* green tick */
.sar-status-exclude { background: #cf222e; color: #fff; }   /* red cross  */
.sar-status-undecided { background: transparent; color: transparent; }

.sar-saved { color: #1a7f37; font-weight: 700; margin-left: .6rem; }

/* Separate the results listing from the footer actions. */
.sar-listing-end { border: 0; border-top: 2px solid #bbb; margin: 2rem 0 1.25rem; }
.sar-export-btn { display: inline-block; font-weight: 700; padding: .55rem 1rem; }

/* ── SAR recipient-only schedule (ADR-0007) ───────────────────────────────── */
.sar-recipient-section { margin-top: 2rem; }
.sar-recipient-intro { max-width: 48rem; color: #444; margin: .25rem 0 .75rem; }
.sar-recipient-headers { margin: .4rem 0; padding-left: 1.1rem; color: #444; }
.sar-recipient-headers li { font-size: .9em; }
/* Amber "check subject line" marker — sits before the tick/cross on the row. */
.sar-subject-warn {
	font-size: .74em;
	font-weight: 700;
	color: #8a5300;
	background: #fff3d6;
	border: 1px solid #e6c260;
	border-radius: var(--radius);
	padding: 0 .35rem;
}
.sar-schedule-subject input { min-width: 18rem; }

/* ── Collection Search (design 2026-08-07) ─────────────────────────────── */

.search-intro { color: var(--muted); margin: .25rem 0 1rem; }
.search-query-row { display: flex; gap: .5rem; align-items: center; }
.search-query-row input[type="search"] { flex: 1; padding: .5rem; }
.search-dates { margin-top: .75rem; }
.search-dates legend { color: var(--muted); font-size: .85rem; }
.search-hint { color: var(--muted); font-size: .8rem; margin: .3rem 0 0; }
.search-error { color: var(--error); font-weight: 600; }

.search-results { margin-top: 1.25rem; }
.search-results-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .5rem;
}
.search-count { color: var(--muted); font-size: .85rem; }
.search-cap { color: var(--muted); font-size: .85rem; }
/* One-line badge legend under the results head. */
.search-legend { color: var(--muted); font-size: .8rem; margin: 0 0 .5rem; }
.search-empty { color: var(--muted); font-style: italic; }
/* htmx puts .htmx-request on the elements named by hx-indicator for the life
   of the request, so the Refine spinner needs no JS of its own. */
.search-spinner { display: none; color: var(--accent); font-size: .85rem;
                  margin-left: .5rem; }
.search-spinner.htmx-request { display: inline; }

/* Ranked results as an ordered list; items keep the .search-card look. */
ol.search-results-list { list-style: none; margin: 0; padding: 0; }

.search-card { border-bottom: 1px solid #d7d7d7; margin-bottom: .5rem; padding-bottom: .35rem; }
.search-card-summary {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .4rem 0;
}
.search-doc-name { font-weight: 600; }
.search-card-body { padding: .2rem 0 .7rem 1.2rem; }
.search-reason { color: var(--muted); font-style: italic; margin: .2rem 0; }
/* Snippet is collapsed by default — click "Show extract" to reveal it. */
.search-snippet-toggle > summary {
	color: var(--accent);
	font-size: .82rem;
	width: fit-content;
	padding: .1rem 0;
}
.search-snippet {
	margin: .3rem 0;
	padding-left: .7rem;
	border-left: 3px solid var(--border);
	color: #333;
}

/* Strength badges — one vocabulary shared by the cosine and AI paths. */
.search-badge {
	font-size: .72rem;
	font-weight: 600;
	padding: .1rem .5rem;
	border-radius: var(--radius-pill);
	white-space: nowrap;
}
.search-badge-strong   { background: #d5f2e0; color: #1a7a45; }
.search-badge-likely   { background: #e3f0d5; color: #4a7a1a; }
.search-badge-possible { background: #fdf0d5; color: #9a6a1a; }
.search-badge-weak     { background: #f0f0f0; color: #5f5f5f; }
.search-badge-keyword  { background: #e4ecfa; color: #2f57a6; }
.search-provenance {
	font-size: .68rem;
	color: var(--muted);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0 .35rem;
}
/* Cross-collection attribution pill (/search/_all) — links to the row's own
   collection search. */
.search-collection {
	font-size: .68rem;
	font-weight: 600;
	color: var(--accent);
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	padding: 0 .45rem;
	text-decoration: none;
	white-space: nowrap;
}
.search-collection:hover {
	border-color: var(--accent);
	background: #eef2f8;
}

/* ── Search improvements (PRD 2026-08-10): syntax help, notices, snippet
      highlighting, the filename badge and the did-you-mean control ─────── */

/* "Search syntax" disclosure under the query row — same muted summary look as
   the snippet toggle; the generic .disclosure class supplies the ▸/▾ marker. */
.search-syntax-toggle { margin-top: .4rem; }
.search-syntax-toggle > summary {
	color: var(--muted);
	font-size: .82rem;
	width: fit-content;
	padding: .1rem 0;
}
.search-syntax {
	color: var(--muted);
	font-size: .82rem;
	margin: .35rem 0 0;
	padding-left: 1.1rem;
}
.search-syntax li { margin: .15rem 0; }
.search-syntax code {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 3px;
	padding: 0 .25rem;
}

/* Parser/service notices (ignored filters, unknown collections): a muted row
   above the results. */
.search-notices { margin: 0 0 .5rem; }
.search-notice { color: var(--muted); font-size: .8rem; margin: .15rem 0; }

/* Query-term highlighting inside snippets: a subtle wash that inherits the
   surrounding font — the terms should read, not shout. */
.search-snippet mark {
	background: #fdeeb0;
	color: inherit;
	padding: 0 .12em;
	border-radius: 2px;
}

/* Filename-match badge — the keyword badge look in its own hue: the document's
   NAME matched, content similarity was never measured. */
.search-badge-filename { background: #efe6fa; color: #6a3fa0; }

/* Did-you-mean: search runs over a CSRF-guarded POST, so the rerun control is
   a form button styled as a link. */
.btn-link {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: var(--accent);
	text-decoration: underline;
	cursor: pointer;
}
.btn-link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 2px;
}
.search-suggest-line { color: var(--muted); margin: .35rem 0 0; }