/* ReelReads: Kno-Good's layout and Bootstrap components, in ReelReads' own colors. */

.reelreads {
	--rr-bg: #faf8f5;
	--rr-card: #ffffff;
	--rr-text: #1f1d1a;
	--rr-muted: #6b665e;
	--rr-border: #e7e2da;
	--rr-accent: #c2410c;
	--rr-accent-dark: #9a3412;
	--rr-soft: #f3eee7;
	--rr-warn: #a16207;

	background: var(--rr-bg);
	color: var(--rr-text);
	padding: 32px 0 48px;
	flex: 1;
}

.reelreads a:not(.btn) { color: var(--rr-accent); }

.reelreads .rr-inner { max-width: 680px; }

.reelreads h1,
.reelreads h2,
.reelreads h3 { font-family: "Volkhov", serif; font-weight: 700; }

.reelreads .rr-brand { font-size: 2.2rem; margin: 0; }
.reelreads .rr-brand span { color: var(--rr-accent); }
.reelreads .rr-tagline { color: var(--rr-muted); margin-bottom: 20px; }

/* Buttons: Bootstrap's shapes, ReelReads' colors */
.reelreads .btn-rr {
	--bs-btn-bg: var(--rr-accent);
	--bs-btn-border-color: var(--rr-accent);
	--bs-btn-color: #fff;
	--bs-btn-hover-bg: var(--rr-accent-dark);
	--bs-btn-hover-border-color: var(--rr-accent-dark);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--rr-accent-dark);
	--bs-btn-active-border-color: var(--rr-accent-dark);
	--bs-btn-disabled-bg: var(--rr-accent);
	--bs-btn-disabled-border-color: var(--rr-accent);
}
.reelreads .btn-rr-outline {
	--bs-btn-color: var(--rr-text);
	--bs-btn-bg: var(--rr-card);
	--bs-btn-border-color: var(--rr-border);
	--bs-btn-hover-bg: var(--rr-soft);
	--bs-btn-hover-border-color: var(--rr-border);
	--bs-btn-hover-color: var(--rr-text);
	--bs-btn-active-bg: var(--rr-soft);
	--bs-btn-active-border-color: var(--rr-border);
}
.reelreads .btn-rr-outline.is-saved { border-color: var(--rr-accent); color: var(--rr-accent); }
.reelreads .form-control:focus {
	border-color: var(--rr-accent);
	box-shadow: 0 0 0 0.2rem rgba(194, 65, 12, 0.2);
}

.reelreads .rr-status { margin: 24px 0; color: var(--rr-muted); }
.reelreads .rr-status.is-error { color: var(--rr-accent); }

/* The list */
.reelreads .rr-reel { margin-top: 28px; }
.reelreads .rr-reel h2 { font-size: 1.5rem; margin-bottom: 4px; }
.reelreads .rr-by { color: var(--rr-muted); margin: 0; }
.reelreads .rr-theme { margin: 8px 0 0; }
.reelreads blockquote {
	margin: 12px 0 0;
	padding: 10px 14px;
	border-left: 3px solid var(--rr-accent);
	background: var(--rr-soft);
	border-radius: 0 8px 8px 0;
	font-style: italic;
}
.reelreads .rr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }

.reelreads .rr-books { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.reelreads .rr-book {
	display: flex;
	gap: 14px;
	padding: 14px;
	background: var(--rr-card);
	border: 1px solid var(--rr-border);
	border-radius: 14px;
}
.reelreads .rr-cover {
	flex: none;
	width: 64px;
	height: 96px;
	border-radius: 4px;
	object-fit: cover;
	background: var(--rr-soft);
}
.reelreads .rr-cover.is-blank {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rr-muted);
	font-weight: 600;
	font-size: 1.2rem;
}
.reelreads .rr-book-info { flex: 1; min-width: 0; }
.reelreads .rr-book h3 { font-size: 1.1rem; line-height: 1.3; margin: 0; }
.reelreads .rr-rank { color: var(--rr-accent); margin-right: 4px; }
.reelreads .rr-author { margin: 2px 0 0; color: var(--rr-muted); }
.reelreads .rr-series { margin: 4px 0 0; font-size: 0.85rem; color: var(--rr-muted); }
.reelreads .rr-note { margin: 6px 0 0; font-size: 0.92rem; }
.reelreads .rr-verdict {
	display: inline-block;
	margin-top: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.reelreads .rr-verdict.is-negative { background: #fde8e8; color: #9b1c1c; }
.reelreads .rr-verdict.is-mixed { background: #fdf3d7; color: #7a5a00; }
.reelreads .rr-unverified { margin: 6px 0 0; font-size: 0.8rem; color: var(--rr-warn); }
.reelreads .rr-links { display: flex; gap: 8px; margin-top: 10px; }

/* How-to: send reels from Instagram's Share button */
.reelreads .rr-howto {
	margin-top: 28px;
	padding: 16px 18px;
	background: var(--rr-card);
	border: 1px solid var(--rr-border);
	border-radius: 14px;
}
.reelreads .rr-howto h2 { font-size: 1.1rem; margin-bottom: 4px; }
.reelreads .rr-howto > p { color: var(--rr-muted); margin-bottom: 8px; }
.reelreads .rr-howto details { border-top: 1px solid var(--rr-border); padding: 10px 0 2px; }
.reelreads .rr-howto summary { font-weight: 600; cursor: pointer; color: var(--rr-accent); }
.reelreads .rr-howto ol { margin: 8px 0; padding-left: 1.3rem; }
.reelreads .rr-howto li { margin-bottom: 6px; }
.reelreads .rr-howto code { color: var(--rr-text); background: var(--rr-soft); padding: 1px 4px; border-radius: 4px; word-break: break-all; }

/* Saved lists */
.reelreads .rr-saved { margin-top: 36px; }
.reelreads .rr-saved h2 { font-size: 1.1rem; color: var(--rr-muted); }
.reelreads .rr-saved .list-group-item { background: var(--rr-card); border-color: var(--rr-border); }
.reelreads .rr-saved .list-group-item a { color: var(--rr-text); text-decoration: none; display: block; }
.reelreads .rr-saved small { color: var(--rr-muted); }

.rr-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	padding: 10px 16px;
	border-radius: 10px;
	background: #1f1d1a;
	color: #faf8f5;
	font-size: 0.9rem;
	opacity: 0;
	transition: opacity 0.2s;
	pointer-events: none;
	z-index: 1090;
}
.rr-toast.is-shown { opacity: 1; }