/*
 * CarFaultIQ — Insights (§45)
 *
 * Uses the existing design tokens rather than introducing a second palette.
 * If a token below is absent in main.css the fallback in each var() applies,
 * so this file degrades rather than breaking the page.
 *
 * Breakpoints match the rest of the theme: 1440 / 800 / 390.
 */

/* ---------- archive ---------- */

/* Panel padding, bottom margin and subtitle measure now come from the shared
   intro system (main.css §49). This file used to set its own bottom margin
   (1.25rem) while Evidence set 2rem and main.css set 1.6rem — three files
   disagreeing about the same gap. */

.cfiq-insights-archive__lead {
	color: var(--cfiq-text-muted, #4a5568);
}

.cfiq-insights-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.25rem 0 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--cfiq-border, #e2e8f0);
}

.cfiq-insights-filter__chip {
	display: inline-block;
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--cfiq-border, #e2e8f0);
	border-radius: 999px;
	font-size: 0.875rem;
	line-height: 1.4;
	text-decoration: none;
	color: var(--cfiq-text, #1a202c);
	background: var(--cfiq-surface, #fff);
	transition: background-color 120ms ease, border-color 120ms ease;
}

.cfiq-insights-filter__chip:hover,
.cfiq-insights-filter__chip:focus-visible {
	background: var(--cfiq-surface-alt, #f7fafc);
	border-color: var(--cfiq-accent, #3dd6f5);
}

.cfiq-insights-filter__chip.is-active {
	background: var(--cfiq-ink, #0b1220);
	border-color: var(--cfiq-ink, #0b1220);
	color: #fff;
}

/*
 * Make/vehicle filter form (S2, Insights Content v1). The <select>s and submit
 * button had no dedicated rule and rendered at the browser default height
 * (~18px) — too small to comfortably tap at 390px. Sized to match the filter
 * chips beside them, and given a 44px minimum tap target site-wide, per WCAG
 * 2.2 AA. CSS only; no markup or archive layout change.
 */
.cfiq-insights-filter--form {
	align-items: center;
	row-gap: 0.6rem;
}

.cfiq-insights-filter--form label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	color: var(--cfiq-text-muted, #4a5568);
}

.cfiq-insights-filter--form select,
.cfiq-insights-filter--form .cfiq-btn {
	min-height: 44px;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--cfiq-border, #e2e8f0);
	border-radius: 8px;
	font-size: 0.875rem;
	line-height: 1.4;
	background: var(--cfiq-surface, #fff);
	color: var(--cfiq-text, #1a202c);
}

.cfiq-insights-archive__type-desc {
	max-width: 68ch;
	margin: 0 0 1rem;
	color: var(--cfiq-text-muted, #4a5568);
	font-size: 0.9375rem;
}

.cfiq-insights-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1rem;
}

/* ---------- card ---------- */

.cfiq-insight-card {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1rem 1.1rem 0.9rem;
	border: 1px solid var(--cfiq-border, #e2e8f0);
	border-left: 3px solid var(--cfiq-border, #e2e8f0);
	border-radius: 10px;
	background: var(--cfiq-surface, #fff);
}

/* Type is carried by the left rule, not a coloured block - keeps the grid calm. */
.cfiq-insight-card--fault-pattern      { border-left-color: #e07a5f; }
.cfiq-insight-card--carryover-analysis { border-left-color: #3d9dd6; }
.cfiq-insight-card--recall-tsb-digest  { border-left-color: #d6a13d; }

.cfiq-insight-card__type {
	margin: 0;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cfiq-text-muted, #4a5568);
}

.cfiq-insight-card__title {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.35;
}

.cfiq-insight-card__title a {
	color: inherit;
	text-decoration: none;
}

.cfiq-insight-card__title a:hover,
.cfiq-insight-card__title a:focus-visible {
	text-decoration: underline;
}

.cfiq-insight-card__scope {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.8125rem;
	color: var(--cfiq-text-muted, #4a5568);
}

.cfiq-insight-card__years::before {
	content: "·";
	margin-right: 0.5rem;
}

.cfiq-insight-card__summary {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.cfiq-insight-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0.2rem 0 0;
	font-size: 0.75rem;
	color: var(--cfiq-text-muted, #4a5568);
}

/* ---------- single ---------- */

.cfiq-insight__type {
	margin: 0 0 0.35rem;
}

.cfiq-insight__scope {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0.75rem 1.5rem;
	margin: 1rem 0 0;
	padding: 0.9rem 1rem;
	border: 1px solid var(--cfiq-border, #e2e8f0);
	border-radius: 10px;
	background: var(--cfiq-surface-alt, #f7fafc);
}

.cfiq-insight__scope-item dt {
	margin: 0 0 0.15rem;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cfiq-text-muted, #4a5568);
}

.cfiq-insight__scope-item dd {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 600;
}

.cfiq-insight__updated {
	display: block;
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--cfiq-text-muted, #4a5568);
}

.cfiq-insight__no-evidence {
	margin: 1rem 0;
	padding: 0.85rem 1rem;
	border-left: 3px solid #d6a13d;
	background: var(--cfiq-surface-alt, #f7fafc);
	font-size: 0.9375rem;
}

.cfiq-insight__evidence {
	margin: 2rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--cfiq-border, #e2e8f0);
}

/* Sources: one compact row per source group (§ Sources UI compaction). Each
   group is a native <details>, so it needs no JS and degrades to an always-
   expanded list if CSS fails to load. */
.cfiq-insight__evidence-groups {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0.75rem 0 0;
}

.cfiq-insight__evidence-group {
	border: 1px solid var(--cfiq-border, #e2e8f0);
	border-radius: 8px;
	padding: 0;
}

.cfiq-insight__evidence-group-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.75rem;
	font-size: 0.875rem;
	cursor: pointer;
	list-style: none;
}

.cfiq-insight__evidence-group-summary::-webkit-details-marker {
	display: none;
}

.cfiq-insight__evidence-group-years,
.cfiq-insight__evidence-group-count {
	font-size: 0.8125rem;
	color: var(--cfiq-text-muted, #4a5568);
}

.cfiq-insight__evidence-group-toggle {
	margin-left: auto;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--cfiq-link, #2563eb);
	white-space: nowrap;
}

.cfiq-insight__evidence-group-toggle-open {
	display: none;
}

.cfiq-insight__evidence-group[open] .cfiq-insight__evidence-group-toggle-closed {
	display: none;
}

.cfiq-insight__evidence-group[open] .cfiq-insight__evidence-group-toggle-open {
	display: inline;
}

.cfiq-insight__evidence-list {
	list-style: none;
	margin: 0;
	padding: 0.15rem 0.75rem 0.65rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	border-top: 1px solid var(--cfiq-border, #e2e8f0);
}

.cfiq-insight__evidence-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	padding: 0.3rem 0;
	font-size: 0.8125rem;
}

.cfiq-insight__evidence-id {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.75rem;
	color: var(--cfiq-text-muted, #4a5568);
}

.cfiq-insight__evidence-note {
	margin: 0.9rem 0 0;
	font-size: 0.8125rem;
	color: var(--cfiq-text-muted, #4a5568);
	max-width: 72ch;
}

.cfiq-insight__related {
	margin: 2rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--cfiq-border, #e2e8f0);
}

.cfiq-insight__related-group {
	margin: 0.9rem 0 0;
}

.cfiq-insight__related-group h3 {
	margin: 0 0 0.35rem;
	font-size: 0.875rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cfiq-text-muted, #4a5568);
}

.cfiq-insight__related-group ul {
	margin: 0;
	padding-left: 1.1rem;
}

/* ---------- responsive ---------- */

@media (max-width: 800px) {
	.cfiq-insights-grid {
		grid-template-columns: 1fr;
	}
	.cfiq-insight__scope {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 390px) {
	.cfiq-insight__scope {
		grid-template-columns: 1fr;
		padding: 0.75rem 0.85rem;
	}
	.cfiq-insight-card {
		padding: 0.85rem 0.9rem;
	}
	.cfiq-insights-filter {
		gap: 0.4rem;
	}
	.cfiq-insights-filter__chip {
		font-size: 0.8125rem;
		padding: 0.3rem 0.65rem;
	}
	.cfiq-insights-filter--form {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.cfiq-insights-filter--form label,
	.cfiq-insights-filter--form select,
	.cfiq-insights-filter--form .cfiq-btn {
		width: 100%;
	}
	/* Evidence rows wrap rather than overflow on narrow screens. */
	.cfiq-insight__evidence-item {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.3rem;
	}
	.cfiq-insight__evidence-group-summary {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.3rem;
	}
	.cfiq-insight__evidence-group-toggle {
		margin-left: 0;
	}
}

@media (prefers-color-scheme: dark) {
	.cfiq-insight-card,
	.cfiq-insight__evidence-group {
		/* The archive is a light reading surface. The former dark fallback
		   changed only the panel, not its text tokens, producing dark-on-dark
		   cards for visitors whose OS preferred dark colour schemes. */
		background: var(--cfiq-card, #fff);
	}
}

/*
 * Article layout (single Insight).
 *
 * The article was missing the standard `cfiq-container`, so its 1240px column
 * sat against the left edge of the viewport with no gutter and no centring: the
 * breadcrumb touched the screen edge and the header panel's left border and
 * rounded corner were clipped there. Adding the container class (in the
 * template) centres it exactly as every other single template does.
 *
 * The body then ran the full 1240px while the summary card above it was capped
 * at 760px, which gave ~180-character lines under a narrow card. Prose now
 * shares the summary's reading measure so the two align, and anything wider
 * than that (a table) scrolls inside its own box instead of forcing the page
 * wider. The header and the evidence and related sections deliberately keep the
 * full container width.
 */
.cfiq-insight__body {
	max-width: min(var(--cfiq-reader, 760px), 100%);
}

.cfiq-insight__body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.cfiq-insight__body img,
.cfiq-insight__body pre {
	max-width: 100%;
}