/**
 * Quran Root Search — front-end styles.
 *
 * Palette (mushaf-inspired, deliberately quiet around one signature element —
 * the gold-washed highlighted word):
 *   --qrs-ink     #21302a  deep green-black, like mushaf cover leather
 *   --qrs-paper   #fbf8f1  warm page white
 *   --qrs-line    #e3dccb  hairline borders
 *   --qrs-green   #2f6b4f  primary action
 *   --qrs-gold    #f3e3b3  highlight wash
 *   --qrs-gold-d  #8a6d1f  highlight text/border
 */

.qrs {
	--qrs-ink: #21302a;
	--qrs-paper: #fbf8f1;
	--qrs-line: #e3dccb;
	--qrs-green: #2f6b4f;
	--qrs-gold: #f3e3b3;
	--qrs-gold-d: #8a6d1f;

	max-width: 760px;
	margin-inline: auto;
	color: var(--qrs-ink);
	font-size: 16px;
	line-height: 1.7;
}

/* ---------- search bar ---------- */

.qrs-bar {
	display: flex;
	gap: 8px;
}

.qrs-input {
	flex: 1;
	padding: 15px 20px;
	font-size: 1.25rem;
	border: 1.5px solid var(--qrs-line);
	border-radius: 12px;
	background: var(--qrs-paper);
	color: var(--qrs-ink);
	box-shadow: 0 1px 3px rgba(33, 48, 42, 0.06);
}

.qrs-input:focus {
	outline: 2px solid var(--qrs-green);
	outline-offset: 1px;
}

.qrs-btn {
	padding: 12px 28px;
	font-size: 1.05rem;
	border: 0;
	border-radius: 10px;
	background: var(--qrs-green);
	color: #fff;
	cursor: pointer;
}

.qrs-btn:hover,
.qrs-btn:focus-visible {
	background: #275a42;
}

.qrs-btn:focus-visible {
	outline: 2px solid var(--qrs-ink);
	outline-offset: 2px;
}

/* ---------- mode selector ---------- */

.qrs-modes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	border: 0;
}

.qrs-mode {
	cursor: pointer;
}

.qrs-mode input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.qrs-mode span {
	display: inline-block;
	padding: 6px 16px;
	border: 1px solid var(--qrs-line);
	border-radius: 999px;
	background: var(--qrs-paper);
	font-size: 0.95rem;
	transition: background 0.15s, border-color 0.15s;
}

.qrs-mode input:checked + span {
	background: var(--qrs-green);
	border-color: var(--qrs-green);
	color: #fff;
}

.qrs-mode input:focus-visible + span {
	outline: 2px solid var(--qrs-ink);
	outline-offset: 2px;
}

/* ---------- status / meta ---------- */

.qrs-status {
	margin-top: 14px;
	min-height: 1.4em;
	color: #5c5546;
}

.qrs-meta {
	margin-top: 14px;
	font-size: 1.35rem;
	color: var(--qrs-ink);
	font-weight: 700;
}

.qrs-meta code {
	font-size: 1.3rem;
	padding: 3px 16px;
	background: var(--qrs-gold);
	border-color: var(--qrs-gold-d);
	font-weight: 700;
}

.qrs-meta code {
	border: 1px solid var(--qrs-line);
	border-radius: 8px;
	font-family: inherit;
}

/* ---------- related words ---------- */

.qrs-related {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--qrs-line);
}

.qrs-related h3 {
	margin: 0 0 10px;
	font-size: 1.15rem;
}

.qrs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.qrs-chip {
	padding: 4px 14px;
	border: 1px solid var(--qrs-line);
	border-radius: 999px;
	background: var(--qrs-paper);
	font-size: 1.05rem;
}

.qrs-chip small {
	color: #8a8270;
	margin-inline-start: 4px;
}

/* ---------- results ---------- */

.qrs-results {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.qrs-card {
	margin-bottom: 16px;
	padding: 20px 24px;
	background: var(--qrs-paper);
	border: 1px solid var(--qrs-line);
	border-radius: 14px;
	box-shadow: 0 1px 4px rgba(33, 48, 42, 0.05);
}

.qrs-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 0.92rem;
	color: #6b6354;
}

.qrs-card-head .qrs-surah {
	font-weight: 700;
	color: var(--qrs-green);
	background: #eaf3ee;
	padding: 3px 14px;
	border-radius: 999px;
}

.qrs-ayah {
	margin: 0;
	font-family: "KFGQPC Uthmanic Script HAFS", "Amiri Quran", "Amiri",
		"Scheherazade New", "Noto Naskh Arabic", serif;
	font-size: 1.65rem;
	line-height: 2.3;
	text-align: justify;
}

/* The signature element: matched words */
.qrs-ayah mark.qrs-hit {
	background: var(--qrs-gold);
	color: #205339;
	padding: 0 8px;
	border-radius: 8px;
}

.qrs-ayah-num {
	color: var(--qrs-green);
	font-size: 0.8em;
	white-space: nowrap;
	margin-inline-start: 6px;
}

/* ---------- pagination ---------- */

.qrs-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 18px;
}

.qrs-page-btn {
	padding: 8px 20px;
	border: 1px solid var(--qrs-line);
	border-radius: 10px;
	background: var(--qrs-paper);
	color: var(--qrs-ink);
	cursor: pointer;
}

.qrs-page-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.qrs-page-btn:not(:disabled):hover {
	border-color: var(--qrs-green);
}

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

@media (max-width: 540px) {
	.qrs-bar {
		flex-direction: column;
	}
	.qrs-ayah {
		font-size: 1.4rem;
		line-height: 2.1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qrs * {
		transition: none !important;
	}
}

/* ---------- ayah context modal ---------- */

.qrs-card-clickable { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }

.qrs-card-clickable:hover,
.qrs-card-clickable:focus-visible {
	border-color: var(--qrs-green);
	box-shadow: 0 2px 8px rgba(33, 48, 42, 0.1);
	outline: none;
}

body.qrs-no-scroll { overflow: hidden; }

.qrs-ctx-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(20, 28, 24, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 14px;
}

.qrs-ctx {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 680px;
	max-height: 86vh;
	background: #fbf8f1;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}

.qrs-ctx-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 20px;
	background: #2f6b4f;
	flex-shrink: 0;
}

.qrs-ctx-head-info {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.qrs-ctx-surah {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	font-weight: 700;
	padding: 4px 16px;
	border-radius: 999px;
	font-size: 0.95rem;
}

.qrs-ctx-sub { color: #d7e8de; font-size: 0.9rem; }

.qrs-ctx-close {
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	padding: 6px 10px;
	border-radius: 8px;
}

.qrs-ctx-close:hover { background: rgba(255, 255, 255, 0.15); }

/* scrollable body with a visible, styled scrollbar */
.qrs-ctx-body {
	overflow-y: scroll;
	padding: 6px 20px 10px;
	flex: 1;
	scrollbar-width: thin;
	scrollbar-color: #2f6b4f #ece6d6;
}

.qrs-ctx-body::-webkit-scrollbar { width: 10px; }
.qrs-ctx-body::-webkit-scrollbar-track { background: #ece6d6; border-radius: 999px; }
.qrs-ctx-body::-webkit-scrollbar-thumb { background: #2f6b4f; border-radius: 999px; border: 2px solid #ece6d6; }
.qrs-ctx-body::-webkit-scrollbar-thumb:hover { background: #25543e; }

.qrs-ctx-ayah {
	margin: 10px 0;
	font-family: "KFGQPC Uthmanic Script HAFS", "Amiri Quran", "Amiri",
		"Scheherazade New", "Noto Naskh Arabic", serif;
	font-size: 1.35rem;
	line-height: 2.15;
	text-align: justify;
	color: var(--qrs-ink);
}

.qrs-ctx-ayah.qrs-ctx-target {
	background: #fff;
	border: 1px solid #d9c98f;
	border-right: 4px solid #c9a227;
	padding: 14px 18px;
	margin: 14px 0;
	font-size: 1.6rem;
	line-height: 2.3;
}

.qrs-ctx-ayah mark.qrs-hit {
	background: var(--qrs-gold);
	color: #205339;
	padding: 0 8px;
	border-radius: 8px;
}

.qrs-ctx-edge {
	text-align: center;
	padding: 8px 0;
}

.qrs-ctx-bound {
	display: inline-block;
	color: #8a8270;
	font-size: 0.9rem;
	padding: 6px 18px;
	border: 1px dashed var(--qrs-line);
	border-radius: 999px;
}

.qrs-ctx-foot {
	display: flex;
	justify-content: flex-start;
	padding: 9px 20px;
	border-top: 1px solid var(--qrs-line);
	background: #f6f2e8;
	flex-shrink: 0;
}

.qrs-ctx-range { color: var(--qrs-green); font-weight: 700; font-size: 0.92rem; }

@media (max-width: 540px) {
	.qrs-ctx-overlay { padding: 0; }
	.qrs-ctx { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
	.qrs-ctx-ayah { font-size: 1.2rem; }
	.qrs-ctx-ayah.qrs-ctx-target { font-size: 1.4rem; }
}

/* ---------- word-type chips, filter, grouped sections ---------- */

.qrs-pos {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 14px;
	padding: 12px 14px;
	background: #f3efe3;
	border: 1px solid var(--qrs-line);
	border-radius: 12px;
}

.qrs-pos-label {
	font-size: 0.88rem;
	color: #6b6f6c;
}

.qrs-pos-chip {
	background: #fff;
	border: 1px solid #d9c98f;
	border-radius: 999px;
	padding: 5px 16px;
	font-size: 0.95rem;
	color: var(--qrs-ink);
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.qrs-pos-chip:hover { border-color: var(--qrs-green); }

.qrs-pos-chip.is-active {
	background: var(--qrs-green);
	border-color: var(--qrs-green);
	color: #fff;
}

.qrs-pos-chip:focus-visible {
	outline: 2px solid var(--qrs-ink);
	outline-offset: 2px;
}

.qrs-group-btn {
	margin-inline-start: auto;
	background: #fff;
	color: var(--qrs-green);
	border: 1px solid var(--qrs-green);
	border-radius: 10px;
	padding: 6px 16px;
	font-size: 0.9rem;
	cursor: pointer;
}

.qrs-group-btn:hover { background: #eef5f1; }

.qrs-group-btn.is-on {
	background: var(--qrs-green);
	color: #fff;
}

.qrs-filter {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 12px;
	padding: 9px 16px;
	background: #eaf3ee;
	border: 1px solid #bcd6c8;
	border-radius: 10px;
	font-size: 0.95rem;
	color: #205339;
}

.qrs-filter-clear {
	margin-inline-start: auto;
	background: transparent;
	border: 0;
	color: var(--qrs-green);
	font-size: 0.88rem;
	text-decoration: underline;
	cursor: pointer;
}

.qrs-section {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 24px 0 12px;
	list-style: none;
}

.qrs-results > .qrs-section:first-child { margin-top: 6px; }

.qrs-section-pill {
	background: var(--qrs-green);
	color: #fff;
	font-size: 0.95rem;
	font-weight: 600;
	padding: 5px 20px;
	border-radius: 999px;
	white-space: nowrap;
}

.qrs-section-line {
	flex: 1;
	height: 1px;
	background: var(--qrs-green);
	opacity: 0.35;
}

/* in grouped sections, matches of OTHER types are muted */
.qrs-ayah mark.qrs-hit.qrs-hit-muted {
	background: transparent;
	color: inherit;
	padding: 0;
	border-radius: 0;
	border-bottom: 2px dotted var(--qrs-gold-d);
}

@media (max-width: 540px) {
	.qrs-group-btn { margin-inline-start: 0; width: 100%; }
}

/* ---------- tabs ---------- */

/* sidebar layout: tabs as a vertical menu beside the content */
.qrs-body {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin-top: 18px;
}

.qrs-tabs {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 0 0 178px;
	position: sticky;
	top: 16px;
	background: var(--qrs-paper);
	border: 1px solid var(--qrs-line);
	border-radius: 14px;
	padding: 10px 8px;
}

.qrs-tab {
	background: transparent;
	border: 0;
	border-inline-start: 3px solid transparent;
	border-radius: 8px;
	padding: 11px 14px;
	font-size: 0.98rem;
	color: #5c5546;
	cursor: pointer;
	text-align: start;
	width: 100%;
}

.qrs-tab:hover { color: var(--qrs-green); background: #f1ede0; }

.qrs-tab.is-active {
	color: var(--qrs-green);
	font-weight: 700;
	background: #eaf3ee;
	border-inline-start-color: var(--qrs-green);
}

.qrs-panes {
	flex: 1;
	min-width: 0;
}

.qrs-pane { padding-top: 0; }

@media (max-width: 760px) {
	.qrs-body { flex-direction: column; gap: 12px; }
	.qrs-tabs {
		position: static;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		width: 100%;
		flex-basis: auto;
		padding: 6px;
		-webkit-overflow-scrolling: touch;
	}
	.qrs-tab {
		white-space: nowrap;
		width: auto;
		border-inline-start: 0;
		border-bottom: 3px solid transparent;
		border-radius: 8px 8px 0 0;
		padding: 9px 14px;
	}
	.qrs-tab.is-active { border-bottom-color: var(--qrs-green); }
}

/* ---------- law extraction ---------- */

.qrs-laws-note {
	margin: 14px 0 10px;
	padding: 10px 16px;
	background: #f3efe3;
	border: 1px solid var(--qrs-line);
	border-radius: 10px;
	font-size: 0.88rem;
	color: #6b6f6c;
}

.qrs-laws-loading {
	margin: 18px 0;
	color: #6b6f6c;
	text-align: center;
}

.qrs-laws-stats {
	margin: 4px 0 10px;
	font-weight: 700;
	color: var(--qrs-ink);
}

.qrs-legend {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 16px;
	font-size: 0.85rem;
	color: #6b6f6c;
}

.qrs-legend mark { padding: 0 10px; }

.qrs-law {
	background: var(--qrs-paper);
	border: 1px solid var(--qrs-line);
	border-radius: 14px;
	padding: 18px 20px;
	margin-bottom: 16px;
	box-shadow: 0 1px 4px rgba(33, 48, 42, 0.05);
}

.qrs-law-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.qrs-law-type {
	background: var(--qrs-green);
	color: #fff;
	font-size: 0.88rem;
	font-weight: 700;
	padding: 4px 18px;
	border-radius: 999px;
}

.qrs-law-strength {
	font-size: 0.85rem;
	padding: 4px 14px;
	border-radius: 999px;
	border: 1px solid;
}

.qrs-law-strength.is-strong { background: #e6f3ec; border-color: #1d6b45; color: #1d6b45; }
.qrs-law-strength.is-medium { background: #fdf3df; border-color: #8a6116; color: #8a6116; }
.qrs-law-strength.is-single { background: #f1efe8; border-color: #8a8270; color: #6b6f6c; }

.qrs-law-stmt {
	margin: 0 0 12px;
	font-size: 1.1rem;
	line-height: 1.9;
	color: var(--qrs-ink);
}

.qrs-law-chips {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.qrs-law-chips-label { font-size: 0.88rem; color: #6b6f6c; }

.qrs-law-chip {
	padding: 3px 14px;
	border-radius: 999px;
	font-size: 1.05rem;
	font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif;
}

.qrs-chip-deed { background: #e3efe7; color: #1d5b3c; border: 1px solid #bcd6c8; }
.qrs-chip-out  { background: var(--qrs-gold); color: #5c470f; border: 1px solid #d9c98f; }

.qrs-law-supp summary {
	cursor: pointer;
	color: var(--qrs-green);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 6px 0;
}

.qrs-law-ayah {
	background: #fff;
	border: 1px solid var(--qrs-line);
	border-radius: 12px;
	padding: 12px 16px;
	margin: 10px 0;
}

.qrs-ayah-sm { font-size: 1.35rem; line-height: 2.15; }

/* annotation marks (also apply inside the context modal) */
.qrs mark { background: transparent; color: inherit; }

.qrs mark.qrs-m-deed,
.qrs-ctx mark.qrs-m-deed {
	background: #e3efe7;
	color: #1d5b3c;
	padding: 0 6px;
	border-radius: 8px;
}

.qrs mark.qrs-m-out,
.qrs-ctx mark.qrs-m-out {
	background: #e3edf5;
	color: #1f4e79;
	padding: 0 6px;
	border-radius: 8px;
}

.qrs mark.qrs-m-link,
.qrs-ctx mark.qrs-m-link {
	background: transparent;
	color: inherit;
	border-bottom: 2px solid var(--qrs-gold-d);
	padding: 0 2px;
}

@media (max-width: 540px) {
	.qrs-tab { padding: 9px 12px; font-size: 0.92rem; }
}

/* ensure the gold hit style applies everywhere (legend, law cards, modal) */
.qrs mark.qrs-hit,
.qrs-ctx mark.qrs-hit {
	background: var(--qrs-gold);
	color: #205339;
	padding: 0 8px;
	border-radius: 8px;
}

/* ---------- autocomplete & did-you-mean ---------- */

.qrs-input-wrap {
	position: relative;
	flex: 1;
}

.qrs-input-wrap .qrs-input { width: 100%; }

.qrs-suggest {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	z-index: 9000;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid #d9c98f;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(33, 48, 42, 0.14);
}

.qrs-suggest-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 16px;
	cursor: pointer;
	border-top: 1px solid #efe9d8;
}

.qrs-suggest-item:first-child { border-top: 0; }

.qrs-suggest-item:hover,
.qrs-suggest-item.is-active { background: #eaf3ee; }

.qrs-suggest-word {
	font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif;
	font-size: 1.2rem;
	color: var(--qrs-ink);
}

.qrs-suggest-meta {
	font-size: 0.78rem;
	color: #6b6f6c;
	white-space: nowrap;
}

.qrs-dym {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 12px;
}

.qrs-dym-label {
	font-weight: 700;
	color: var(--qrs-ink);
}

.qrs-dym-chip {
	background: #fff;
	border: 1px solid #d9c98f;
	color: var(--qrs-ink);
	border-radius: 999px;
	padding: 5px 18px;
	font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif;
	font-size: 1.15rem;
	cursor: pointer;
}

.qrs-dym-chip.is-first { border-color: var(--qrs-green); color: var(--qrs-green); }

.qrs-dym-chip:hover { background: #eaf3ee; }

.qrs-dym-chip small { color: #8a8270; font-size: 0.78rem; }

@media (max-width: 540px) {
	.qrs-suggest-word { font-size: 1.05rem; }
}

/* ---------- Quran Law Engine: chains, network, strength bars ---------- */

.qrs-law-bar {
	height: 8px;
	background: #efe9d8;
	border-radius: 999px;
	overflow: hidden;
	margin: 0 0 12px;
}

.qrs-law-bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--qrs-green), #4d9270);
	border-radius: 999px;
}

.qrs-flow {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 6px 0 10px;
}

.qrs-flow-node {
	padding: 6px 18px;
	border-radius: 999px;
	font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif;
	font-size: 1.2rem;
	border: 1px solid transparent;
}

.qrs-flow-node.is-center  { background: var(--qrs-green); color: #fff; font-weight: 700; }
.qrs-flow-node.is-deed    { background: #e3efe7; color: #1d5b3c; border-color: #bcd6c8; }
.qrs-flow-node.is-promise { background: var(--qrs-gold); color: #5c470f; border-color: #d9c98f; }
.qrs-flow-node.is-threat  { background: #f7e3e3; color: #7a1f1f; border-color: #e0baba; }
.qrs-flow-node.is-out     { background: #efece2; color: #4d493c; border-color: var(--qrs-line); }

.qrs-flow-node[role="button"]:hover { box-shadow: 0 0 0 2px var(--qrs-green) inset; }

.qrs-flow-arrow {
	color: var(--qrs-green);
	font-size: 1.3rem;
	font-weight: 700;
}

.qrs-net {
	width: 100%;
	height: auto;
	background: var(--qrs-paper);
	border: 1px solid var(--qrs-line);
	border-radius: 14px;
}

.qrs-net-label {
	font-size: 17px;
	font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif;
	fill: var(--qrs-ink);
}

.qrs-net-label.is-center { font-size: 19px; font-weight: 700; }

.qrs-net-count { font-size: 12px; }

.qrs-net-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	vertical-align: -1px;
}

g:focus-visible circle, .qrs-net g:hover circle { stroke: var(--qrs-ink); stroke-width: 2; }

@media (max-width: 540px) {
	.qrs-flow-node { font-size: 1.05rem; padding: 5px 14px; }
}

.qrs-chip-threat { background: #f7e3e3; color: #7a1f1f; border: 1px solid #e0baba; }

/* ---------- cross-ayah sunan: passages + threat marks ---------- */

.qrs mark.qrs-m-threat,
.qrs-ctx mark.qrs-m-threat {
	background: #f7e3e3;
	color: #7a1f1f;
	padding: 0 6px;
	border-radius: 8px;
}

.qrs-passage { background: #fdfbf5; }

.qrs-passage .qrs-ayah {
	border-bottom: 1px dashed #eee7d4;
	padding-bottom: 8px;
}

.qrs-passage .qrs-ayah:last-child { border-bottom: 0; padding-bottom: 0; }

/* flex/grid display rules defeat the hidden attribute — restore it explicitly */
.qrs-tabs[hidden],
.qrs-pane[hidden] { display: none; }

.qrs-passage-more { color: #8a8270; font-size: 0.85rem; margin: 4px 0 0; }

/* ---------- v4: center dashboard, composites, blockers ---------- */

.qrs-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 4px 0 18px;
}

.qrs-stat {
	background: var(--qrs-paper);
	border: 1px solid var(--qrs-line);
	border-radius: 14px;
	padding: 14px 16px;
	text-align: center;
}

.qrs-stat.is-main { background: #eaf3ee; border-color: #bcd6c8; }
.qrs-stat.is-promise { background: #fdf6e0; border-color: #d9c98f; }
.qrs-stat.is-threat { background: #faecec; border-color: #e0baba; }

.qrs-stat-label { font-size: 0.82rem; color: #6b6f6c; margin-bottom: 6px; }

.qrs-stat-word {
	font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif;
	font-size: 1.45rem;
	color: var(--qrs-ink);
	line-height: 1.6;
}

.qrs-stat-count { font-size: 0.78rem; color: #8a8270; margin-top: 4px; }

.qrs-law-type.is-blocker { background: #a33c3c; }

/* ---------- discovery engine ---------- */
.qrs-law-type.is-new { background: #7a5ba6; }
.qrs-disc-reason { margin: 0 0 8px; font-size: 0.88rem; color: #6b6f6c; }

/* ---------- concept layer ---------- */
.qrs-concept-name {
	font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif;
	font-size: 1.5rem;
	color: var(--qrs-green);
	font-weight: 700;
}

/* ---------- law validator grades ---------- */
.qrs-law-type.is-grade-law { background: #2f7a52; }
.qrs-law-type.is-grade-med { background: #b08a3e; }
.qrs-law-type.is-grade-stat { background: #8a8a93; }
.qrs-law-strength.is-weak { background: #ececec; color: #777; }
.qrs-span-quote {
	margin: 6px 0 10px;
	padding: 8px 12px;
	background: #f6f1e4;
	border-right: 3px solid var(--qrs-gold, #c9a227);
	border-radius: 8px;
	font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif;
	font-size: 1.12rem;
	color: #4a4636;
}

/* ---------- similarity engine ---------- */
.qrs-sim-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.qrs-sim-form label { font-weight: 700; color: var(--qrs-ink); }
.qrs-sim-input { flex: 1; min-width: 180px; max-width: 320px; }
.qrs-sim-sug { cursor: pointer; border: none; }
.qrs-sim-sug:hover { filter: brightness(0.95); }

/* ---------- problem & solution engine ---------- */
.qrs-prob-disclaim {
	margin: 0 0 14px;
	padding: 10px 14px;
	background: #fdf3e3;
	border-right: 4px solid #c9842a;
	border-radius: 10px;
	color: #6b4e1f;
	font-size: 0.92rem;
}
.qrs-prob-disclaim.is-medical { background: #fbe9e9; border-right-color: #b03a3a; color: #7a2727; }
.qrs-prob-chip { display: inline-block; }
.qrs-prob-chip summary { cursor: pointer; list-style: none; }
.qrs-prob-chip[open] { display: block; width: 100%; }

/* ---------- statistics engine ---------- */
.qrs-mm { display: flex; gap: 4px; margin: 14px 0 4px; border-radius: 999px; overflow: hidden; }
.qrs-mm span { padding: 8px 0; text-align: center; color: #fff; font-size: 0.85rem; font-weight: 700; }
.qrs-mm-makki { background: #6b8f78; }
.qrs-mm-madani { background: #3c6e58; }
.qrs-central .qrs-concept-name { font-size: 1.15rem; }

/* ---------- civilization engine + knowledge graph ---------- */
.qrs-civ-bar { margin-bottom: 16px; }
.qrs-civ-pick { cursor: pointer; border: none; }
.qrs-civ-pick.is-active { outline: 2px solid var(--qrs-accent, #3c6e58); outline-offset: 2px; }
.qrs-jump { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.qrs-jump:hover { filter: brightness(0.92); }

/* ---------- reference guide page ---------- */
.qrs-guide { max-width: 860px; margin: 0 auto; line-height: 1.9; }
.qrs-guide h2 { margin: 0 0 18px; }
.qrs-guide-toc { background: var(--qrs-soft, #f6f4ef); border-radius: 14px; padding: 16px 22px; margin-bottom: 26px; }
.qrs-guide-toc ul { columns: 2; margin: 8px 0 0; padding-inline-start: 18px; }
.qrs-guide-toc li { margin: 3px 0; break-inside: avoid; }
.qrs-guide-sec { margin: 0 0 26px; padding-bottom: 18px; border-bottom: 1px dashed #ddd6c8; }
.qrs-guide-sec h3 { margin: 0 0 8px; color: var(--qrs-accent, #3c6e58); }
.qrs-guide-sec ul { padding-inline-start: 20px; }
.qrs-guide code { background: #eee; padding: 1px 6px; border-radius: 6px; }
@media (max-width: 640px) { .qrs-guide-toc ul { columns: 1; } }

/* ---------- transformation engine ---------- */
.qrs-transform .qrs-flow { flex-wrap: wrap; }
.qrs-tr-deed { margin: 6px 0 0; font-weight: 700; color: var(--qrs-accent, #3c6e58); }

/* ---------- concept profile ---------- */
.qrs-pf-q { font-size: 1.02rem; margin-top: 18px; }
.qrs-pf-more { font-size: 0.82rem; color: #8a8374; align-self: center; }