/* =========================================================================
   Ahmadiyya Bangla Book Haven — main theme stylesheet.

   Look & feel: shadcn/ui-style — neutral gray surfaces, 1px borders, soft
   shadows, rounded-md controls, medium-weight sans type. Strictly
   monochrome: only Tailwind's Gray scale plus black and white.

   Colours are Tailwind CSS v4's palette (tailwindcss.com/docs/colors),
   written as OKLCH. Semantic tokens (background, card, muted, primary…)
   follow shadcn/ui naming so components never use a raw palette value.
   The reader bundle ships its own scoped CSS using the same palette.
   ========================================================================= */

:root {
	/* Tailwind v4 — gray */
	--gray-50:  oklch(98.5% 0.002 247.839);
	--gray-100: oklch(96.7% 0.003 264.542);
	--gray-200: oklch(92.8% 0.006 264.531);
	--gray-300: oklch(87.2% 0.01 258.338);
	--gray-400: oklch(70.7% 0.022 261.325);
	--gray-500: oklch(55.1% 0.027 264.364);
	--gray-600: oklch(44.6% 0.03 256.802);
	--gray-700: oklch(37.3% 0.034 259.733);
	--gray-800: oklch(27.8% 0.033 256.848);
	--gray-900: oklch(21% 0.034 264.665);
	--gray-950: oklch(13% 0.028 261.692);

	/* Semantic tokens (light) */
	--background:         #fff;
	--foreground:         var(--gray-950);
	--card:               #fff;
	--card-foreground:    var(--gray-950);
	--muted:              var(--gray-100);
	--muted-foreground:   var(--gray-500);
	--accent:             var(--gray-100);
	--accent-foreground:  var(--gray-900);
	--border:             var(--gray-200);
	--input:              var(--gray-200);
	--primary:            var(--gray-900);   /* near-black buttons, white text */
	--primary-hover:      var(--gray-700);
	--primary-foreground: #fff;
	--brand:              var(--gray-900);   /* links / emphasis */
	--brand-soft:         var(--gray-100);
	--brand-soft-fg:      var(--gray-700);
	--ring:               var(--gray-400);

	--font-sans:  "ABBH Naskh", "Inter", "Hind Siliguri", "Noto Sans Bengali", ui-sans-serif, system-ui, sans-serif;
	--font-serif: "ABBH Naskh", "Noto Serif Bengali", "Hind Siliguri", Georgia, serif;

	--radius:    0.625rem;               /* 10px — shadcn default */
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);

	--shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

	--container: 1200px;

	/* Legacy names still used by a few templates/scripts. */
	--abbh-font-bangla-serif: var(--font-serif);
	--abbh-font-bangla-sans:  var(--font-sans);

	color-scheme: light;
}

html[data-theme="dark"] {
	--background:         var(--gray-950);
	--foreground:         var(--gray-50);
	--card:               var(--gray-900);
	--card-foreground:    var(--gray-50);
	--muted:              var(--gray-800);
	--muted-foreground:   var(--gray-400);
	--accent:             var(--gray-800);
	--accent-foreground:  var(--gray-50);
	--border:             oklch(100% 0 0 / 10%);
	--input:              oklch(100% 0 0 / 15%);
	--primary:            var(--gray-50);    /* near-white buttons, black text */
	--primary-hover:      var(--gray-200);
	--primary-foreground: var(--gray-950);
	--brand:              var(--gray-50);
	--brand-soft:         var(--gray-800);
	--brand-soft-fg:      var(--gray-200);
	--ring:               var(--gray-500);
	color-scheme: dark;
}

/* Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--background);
	color: var(--foreground);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: var(--brand); text-underline-offset: 3px; text-decoration-color: var(--gray-300); }
a:hover { color: var(--foreground); text-decoration-color: currentColor; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--gray-900); color: #fff; }
html[data-theme="dark"] ::selection { background: var(--gray-100); color: var(--gray-950); }

:focus-visible {
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 45%, transparent);
	border-radius: var(--radius-sm);
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px; width: 1px;
	overflow: hidden;
}
.skip-link {
	position: absolute;
	top: -40px; left: 8px;
	background: var(--primary);
	color: var(--primary-foreground);
	padding: 8px 12px;
	border-radius: var(--radius-md);
	z-index: 100;
}
.skip-link:focus { top: 8px; }

/* Container ------------------------------------------------------------- */
.abbh-container {
	max-width: var(--container);
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* Header ---------------------------------------------------------------- */
.abbh-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: color-mix(in oklch, var(--background) 85%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
}
.abbh-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 60px;
}
.abbh-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--foreground);
	text-decoration: none;
}
.abbh-brand:hover { color: var(--foreground); }
.abbh-brand-mark {
	display: inline-grid; place-items: center;
	width: 32px; height: 32px;
	background: var(--primary);
	color: var(--primary-foreground);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-xs);
}
.abbh-nav { flex: 1; }
.abbh-nav__list {
	display: flex; gap: 4px;
	list-style: none;
	margin: 0; padding: 0;
}
.abbh-nav__list a {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 12px;
	border-radius: var(--radius-md);
	text-decoration: none;
	color: var(--muted-foreground);
	font-size: 14px;
	font-weight: 500;
	transition: color 150ms ease, background 150ms ease;
}
.abbh-nav__list a:hover { color: var(--foreground); background: var(--accent); }
.abbh-nav__list .current-menu-item > a,
.abbh-nav__list .current_page_item > a { color: var(--foreground); background: var(--accent); }

.abbh-header__tools { display: flex; align-items: center; gap: 4px; }
.abbh-account {
	display: inline-flex; align-items: center; gap: 6px;
	height: 36px; padding: 0 10px;
	border-radius: var(--radius-md);
	color: var(--muted-foreground);
	font-size: 14px; font-weight: 500;
	text-decoration: none;
}
.abbh-account:hover { color: var(--foreground); background: var(--accent); }
@media (max-width: 700px) { .abbh-account span { display: none; } }

/* Keep sticky bars below the WordPress toolbar for editors. */
body.admin-bar .abbh-header,
body.admin-bar .abbh-rd-toolbar { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .abbh-header,
	body.admin-bar .abbh-rd-toolbar { top: 46px; }
}
@media (max-width: 600px) {
	body.admin-bar .abbh-header,
	body.admin-bar .abbh-rd-toolbar { top: 0; }
}
.abbh-iconbtn {
	display: inline-grid; place-items: center;
	width: 36px; height: 36px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	color: var(--foreground);
	cursor: pointer;
	text-decoration: none;
	transition: background 150ms ease, color 150ms ease;
}
.abbh-iconbtn svg { width: 18px; height: 18px; }
.abbh-iconbtn:hover { background: var(--accent); color: var(--accent-foreground); }
html[data-theme="dark"] .abbh-icon-sun  { display: none; }
html[data-theme="light"] .abbh-icon-moon { display: none; }
html:not([data-theme]) .abbh-icon-moon { display: none; }

/* Badge ----------------------------------------------------------------- */
.abbh-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding: 0 10px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--card);
	color: var(--muted-foreground);
	font-size: 12.5px;
	font-weight: 500;
	box-shadow: var(--shadow-xs);
}
.abbh-badge__dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--primary);
}

/* Chip (small outline pill link) ---------------------------------------- */
.abbh-chip {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--card);
	color: var(--foreground);
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 150ms ease, border-color 150ms ease;
}
a.abbh-chip:hover { background: var(--accent); color: var(--foreground); border-color: var(--ring); }
.abbh-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* Sections -------------------------------------------------------------- */
.abbh-main { min-height: 60vh; padding-bottom: 48px; }
.abbh-section { padding-top: 40px; padding-bottom: 8px; } /* keep .abbh-container side gutters */
.abbh-section__header {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.abbh-section__title {
	font-size: clamp(20px, 2.4vw, 24px);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.25;
	margin: 0;
	color: var(--foreground);
}
.abbh-section > .abbh-section__title { margin-bottom: 20px; }
.abbh-section__more {
	display: inline-flex; align-items: center; gap: 4px;
	color: var(--muted-foreground);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}
.abbh-section__more:hover { color: var(--foreground); }
.abbh-section__note { color: var(--muted-foreground); font-size: 13px; }
.abbh-section__lede {
	color: var(--muted-foreground);
	font-size: 14px;
	max-width: 60ch;
	margin: 4px 0 0;
}
.abbh-empty {
	border: 1px dashed var(--border);
	border-radius: var(--radius-lg);
	padding: 40px 24px;
	text-align: center;
	color: var(--muted-foreground);
	font-size: 14px;
}

/* Hero ------------------------------------------------------------------ */
.abbh-hero {
	position: relative;
	border-bottom: 1px solid var(--border);
	padding: 72px 0 56px;
	overflow: hidden;
	background:
		radial-gradient(60% 120% at 50% 0%, color-mix(in oklch, var(--gray-300) 35%, transparent), transparent 70%),
		var(--background);
}
.abbh-hero::before {
	/* faint grid, a common shadcn landing-page backdrop */
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(to right, var(--border) 1px, transparent 1px),
		linear-gradient(to bottom, var(--border) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 30%, transparent 75%);
	opacity: 0.6;
	pointer-events: none;
}
.abbh-hero__inner { position: relative; text-align: center; }
.abbh-hero__inner .abbh-badge { margin-bottom: 18px; }
.abbh-hero__title {
	font-size: clamp(32px, 5.5vw, 52px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.15;
	margin: 0 0 12px;
	color: var(--foreground);
}
.abbh-hero__tagline {
	color: var(--muted-foreground);
	max-width: 56ch;
	margin: 0 auto 28px;
	font-size: clamp(15px, 1.5vw, 17px);
}
.abbh-hero__search {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 560px;
	margin: 0 auto;
	padding: 5px;
	background: var(--card);
	border: 1px solid var(--input);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 150ms ease, border-color 150ms ease;
}
.abbh-hero__search:focus-within {
	border-color: var(--ring);
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 30%, transparent), var(--shadow-sm);
}
.abbh-hero__search input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 10px 12px;
	font-size: 15px;
	font-family: inherit;
	color: var(--foreground);
}
.abbh-hero__search input::placeholder { color: var(--muted-foreground); }
.abbh-hero__search input:focus { outline: none; box-shadow: none; }
.abbh-hero__search button {
	height: 40px;
	padding: 0 18px;
	border: none;
	border-radius: var(--radius-lg);
	background: var(--primary);
	color: var(--primary-foreground);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: var(--shadow-xs);
	transition: background 150ms ease;
}
.abbh-hero__search button:hover { background: var(--primary-hover); }
.abbh-hero__suggest {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	font-size: 13px;
	color: var(--muted-foreground);
}

/* Continue-reading shelf ------------------------------------------------- */
.abbh-continue[hidden] { display: none; }
.abbh-continue__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
}
.abbh-continue__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px;
	background: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-xs);
	text-decoration: none;
	transition: box-shadow 200ms ease, border-color 200ms ease;
}
.abbh-continue__item:hover { color: var(--card-foreground); border-color: color-mix(in oklch, var(--ring) 60%, transparent); box-shadow: var(--shadow-md); }
.abbh-continue__cover {
	flex: none;
	width: 56px; height: 84px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--border);
	background: var(--muted);
}
.abbh-continue__body { flex: 1; min-width: 0; }
.abbh-continue__title {
	display: block;
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.abbh-continue__sub { display: block; font-size: 12.5px; color: var(--muted-foreground); margin: 2px 0 10px; }
.abbh-progress { display: block; height: 6px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.abbh-progress > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.abbh-continue__cta { flex: none; height: 32px; padding: 0 12px; font-size: 13px; }

/* Filter chips (category toggle group) ---------------------------------- */
.abbh-filter { display: flex; gap: 8px; flex-wrap: wrap; }
.abbh-filter-pill__count {
	margin-left: 6px;
	color: var(--muted-foreground);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
}
.abbh-filter-pill.is-active .abbh-filter-pill__count { color: inherit; opacity: 0.7; }

/* Horizontal scroller (category row, continue-reading shelf on phones) --- */
.abbh-scroller { position: relative; margin-bottom: 28px; }
.abbh-scroller__track {
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: 2px 0 6px;
	margin-top: -2px;
}
.abbh-scroller__track::-webkit-scrollbar { display: none; }
.abbh-scroller__track > * { flex: none; }
.abbh-scroller.can-prev .abbh-scroller__track { mask-image: linear-gradient(to right, transparent, #000 48px); -webkit-mask-image: linear-gradient(to right, transparent, #000 48px); }
.abbh-scroller.can-next .abbh-scroller__track { mask-image: linear-gradient(to left, transparent, #000 48px); -webkit-mask-image: linear-gradient(to left, transparent, #000 48px); }
.abbh-scroller.can-prev.can-next .abbh-scroller__track {
	mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.abbh-scroller__btn {
	position: absolute;
	top: 2px;
	z-index: 2;
	display: inline-grid; place-items: center;
	width: 32px; height: 32px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--card);
	color: var(--foreground);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
}
.abbh-scroller__btn:hover { background: var(--accent); }
.abbh-scroller__btn--prev { left: -6px; }
.abbh-scroller__btn--next { right: -6px; }
.abbh-scroller__btn[hidden] { display: none; }
@media (hover: none), (max-width: 700px) { .abbh-scroller__btn { display: none; } }
.abbh-filter-pill {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 12px;
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	background: var(--card);
	color: var(--foreground);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	box-shadow: var(--shadow-xs);
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.abbh-filter-pill:hover { background: var(--accent); color: var(--accent-foreground); }
.abbh-filter-pill.is-active {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--primary-foreground);
}

/* Book cards ------------------------------------------------------------ */
.abbh-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 20px;
}
.abbh-card {
	position: relative;
	background: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-xs);
	transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.abbh-card:hover {
	border-color: color-mix(in oklch, var(--ring) 60%, transparent);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.abbh-card-link { text-decoration: none; color: inherit; display: block; }
.abbh-card-link:hover { color: inherit; }
.abbh-card-cover {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	background: var(--muted);
	display: block;
	border-bottom: 1px solid var(--border);
}
.abbh-card-cover--placeholder {
	background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
}
.abbh-card-body { padding: 12px 14px 14px; }
.abbh-card-title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 4px;
	color: var(--card-foreground);
	line-height: 1.4;
}
.abbh-card-author {
	margin: 0 0 8px;
	color: var(--muted-foreground);
	font-size: 13px;
	line-height: 1.4;
}
.abbh-card-meta {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	margin: 0;
	padding: 2px 8px;
	border-radius: var(--radius-sm);
	background: var(--brand-soft);
	color: var(--brand-soft-fg);
	font-size: 11.5px;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Buttons --------------------------------------------------------------- */
.abbh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: var(--shadow-xs);
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.abbh-btn--primary {
	background: var(--primary);
	color: var(--primary-foreground);
}
.abbh-btn--primary:hover {
	background: var(--primary-hover);
	color: var(--primary-foreground);
}
.abbh-btn--ghost,
.abbh-btn--outline {
	background: var(--card);
	color: var(--foreground);
	border-color: var(--input);
}
.abbh-btn--ghost:hover,
.abbh-btn--outline:hover {
	background: var(--accent);
	color: var(--accent-foreground);
}

/* Single book ----------------------------------------------------------- */
.abbh-book__inner {
	display: grid;
	grid-template-columns: minmax(220px, 300px) 1fr;
	gap: 48px;
	padding: 48px 0 24px;
	align-items: start;
}
@media (max-width: 760px) {
	.abbh-book__inner { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
	.abbh-book__cover { max-width: 260px; }
}
.abbh-book__cover-img,
.abbh-book__cover .abbh-card-cover {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
}
.abbh-book__category {
	display: inline-flex;
	margin: 0 0 14px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--brand-soft);
	color: var(--brand-soft-fg);
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: none;
}
a.abbh-book__category:hover { background: var(--accent); color: var(--foreground); }
.abbh-book__title {
	font-size: clamp(26px, 3.6vw, 38px);
	font-weight: 700;
	letter-spacing: -0.025em;
	margin: 0 0 8px;
	line-height: 1.2;
}
.abbh-book__author { color: var(--muted-foreground); font-size: 16px; margin: 0 0 18px; }
.abbh-book__author a { color: inherit; text-decoration: underline; text-decoration-color: var(--border); }
.abbh-book__author a:hover { color: var(--foreground); text-decoration-color: var(--ring); }
.abbh-book__chips {
	display: flex; flex-wrap: wrap; gap: 8px;
	list-style: none;
	margin: 0 0 22px; padding: 0;
}
.abbh-book__chips li {
	display: inline-flex; align-items: center;
	height: 28px;
	padding: 0 11px;
	border: 1px solid var(--border);
	border-radius: 999px;
	color: var(--muted-foreground);
	font-size: 13.5px;
}
.abbh-book__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.abbh-btn--icon { width: 40px; padding: 0; }
.abbh-favbtn[aria-pressed="true"] svg { fill: currentColor; }
.abbh-book__progress {
	display: flex; align-items: center; gap: 10px;
	max-width: 360px;
	margin: 4px 0 8px;
	font-size: 12.5px;
	color: var(--muted-foreground);
}
.abbh-book__progress[hidden] { display: none; }
.abbh-book__progress .abbh-progress { flex: 1; }
.abbh-book__description { font-size: 16px; line-height: 1.75; color: var(--foreground); margin-top: 16px; }
.abbh-book__subhead { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.abbh-book__toc { margin-top: 28px; }

/* TOC ------------------------------------------------------------------- */
.abbh-toc {
	list-style: none; margin: 0; padding: 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--card);
}
.abbh-toc li + li { border-top: 1px solid var(--border); }
.abbh-toc li.is-extra { display: none; }
.abbh-toc a {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	gap: 10px;
	padding: 11px 16px;
	text-decoration: none;
	color: var(--foreground);
	font-size: 15px;
}
.abbh-toc a:hover { background: var(--accent); color: var(--foreground); }
.abbh-toc__num { color: var(--muted-foreground); min-width: 1.6em; }
.abbh-toc__page { color: var(--muted-foreground); font-size: 13px; white-space: nowrap; }
.abbh-toc__more { margin-top: 10px; height: 34px; font-size: 13px; }

/* Toast ----------------------------------------------------------------- */
.abbh-toast {
	position: fixed;
	left: 50%; bottom: 24px;
	z-index: 60;
	transform: translate(-50%, 20px);
	padding: 10px 16px;
	border-radius: var(--radius-lg);
	background: var(--primary);
	color: var(--primary-foreground);
	font-size: 14px;
	box-shadow: var(--shadow-lg);
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease, transform 180ms ease;
}
.abbh-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 700px) { .abbh-toast { bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* Author ---------------------------------------------------------------- */
.abbh-author__hero {
	border-bottom: 1px solid var(--border);
	padding: 48px 0;
	background:
		radial-gradient(50% 120% at 0% 0%, color-mix(in oklch, var(--gray-300) 30%, transparent), transparent 70%),
		var(--background);
}
.abbh-author__hero-inner {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 28px;
	align-items: center;
}
@media (max-width: 600px) { .abbh-author__hero-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; } }
.abbh-author__photo-img,
.abbh-author__photo-placeholder {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--brand-soft);
	color: var(--brand-soft-fg);
	display: grid; place-items: center;
	font-size: 52px;
	font-weight: 600;
	object-fit: cover;
	box-shadow: var(--shadow-sm);
}
.abbh-author__name {
	font-size: clamp(26px, 3.6vw, 38px);
	font-weight: 700;
	letter-spacing: -0.025em;
	margin: 0 0 6px;
}
.abbh-author__lifespan,
.abbh-author__nationality { color: var(--muted-foreground); margin: 0 0 4px; font-size: 14px; }
.abbh-author__bio { font-size: 16px; line-height: 1.75; }
.abbh-author__bio p { margin: 0 0 16px; }

.abbh-author-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 16px;
}
.abbh-author-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	background: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: 22px 16px 18px;
	text-decoration: none;
	box-shadow: var(--shadow-xs);
	transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.abbh-author-card:hover {
	color: var(--card-foreground);
	border-color: color-mix(in oklch, var(--ring) 60%, transparent);
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}
.abbh-author-card__photo,
.abbh-author-card__photo--placeholder {
	width: 72px; height: 72px;
	border-radius: 50%;
	margin: 0;
	background: var(--brand-soft);
	color: var(--brand-soft-fg);
	border: 1px solid var(--border);
	display: grid; place-items: center;
	font-size: 28px;
	font-weight: 600;
	object-fit: cover;
}
.abbh-author-card__count {
	margin-top: -6px;
	color: var(--muted-foreground);
	font-size: 12.5px;
}
.abbh-author-card__name {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
}

/* Authors page ---------------------------------------------------------- */
.abbh-input {
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--input);
	border-radius: var(--radius-md);
	background: var(--card);
	color: var(--foreground);
	font: inherit;
	font-size: 14.5px;
	box-shadow: var(--shadow-xs);
}
.abbh-input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 30%, transparent); }
.abbh-authors__tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: -4px 0 26px; }
.abbh-authors__tools .abbh-input { width: min(340px, 100%); }
.abbh-authors__count { color: var(--muted-foreground); font-size: 13.5px; }
.abbh-authors__group { margin-bottom: 32px; }
.abbh-authors__group[hidden] { display: none; }
.abbh-authors__subhead { font-size: 14px; font-weight: 600; color: var(--muted-foreground); margin: 0 0 12px; }
.abbh-authors__featured {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 14px;
}
.abbh-author-feature {
	display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
	padding: 18px 16px;
	background: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-xs);
	text-decoration: none;
	transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.abbh-author-feature:hover { color: var(--card-foreground); border-color: color-mix(in oklch, var(--ring) 60%, transparent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.abbh-author-feature[hidden], .abbh-author-row[hidden] { display: none; }
.abbh-author-feature__name { font-weight: 600; font-size: 14.5px; line-height: 1.4; margin-top: 4px; }
.abbh-author-feature__role { color: var(--muted-foreground); font-size: 12.5px; margin-top: -4px; }
.abbh-author-feature .abbh-badge { height: 22px; font-size: 11.5px; margin-top: auto; }
.abbh-authors__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 8px;
}
.abbh-author-row {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 12px;
	background: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	text-decoration: none;
	transition: background 150ms ease, border-color 150ms ease;
}
.abbh-author-row:hover { color: var(--card-foreground); background: var(--accent); }
.abbh-author-row__name { flex: 1; min-width: 0; font-weight: 500; font-size: 14.5px; line-height: 1.35; }
.abbh-author-row__count { flex: none; white-space: nowrap; color: var(--muted-foreground); font-size: 12.5px; }

/* Avatars: photo, or a pen icon on one of five gray shades. */
.abbh-avatar {
	flex: none;
	display: inline-grid; place-items: center;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid var(--border);
	font-weight: 600;
	background: var(--gray-100);
	color: var(--gray-700);
}
.abbh-avatar--sm { width: 36px; height: 36px; font-size: 15px; }
.abbh-avatar--lg { width: 52px; height: 52px; font-size: 21px; }
.abbh-avatar__img { width: 100%; height: 100%; object-fit: cover; }
.abbh-avatar__icon { width: 46%; height: 46%; }
.abbh-author__photo-placeholder .abbh-avatar__icon { width: 40%; height: 40%; }
.abbh-avatar--shade-1 { background: var(--gray-100); color: var(--gray-700); }
.abbh-avatar--shade-2 { background: var(--gray-200); color: var(--gray-800); }
.abbh-avatar--shade-3 { background: var(--gray-300); color: var(--gray-900); }
.abbh-avatar--shade-4 { background: var(--gray-600); color: #fff; }
.abbh-avatar--shade-5 { background: var(--gray-800); color: var(--gray-50); }
html[data-theme="dark"] .abbh-avatar--shade-1 { background: var(--gray-800); color: var(--gray-200); }
html[data-theme="dark"] .abbh-avatar--shade-2 { background: var(--gray-700); color: var(--gray-100); }
html[data-theme="dark"] .abbh-avatar--shade-3 { background: var(--gray-600); color: #fff; }
html[data-theme="dark"] .abbh-avatar--shade-4 { background: var(--gray-300); color: var(--gray-900); }
html[data-theme="dark"] .abbh-avatar--shade-5 { background: var(--gray-100); color: var(--gray-900); }

/* Search page ----------------------------------------------------------- */
.abbh-search__form {
	display: flex; gap: 8px;
	max-width: 720px;
	margin: 0 0 20px;
}
.abbh-search__form input,
.abbh-searchform input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 40px;
	padding: 0 14px;
	border-radius: var(--radius-md);
	border: 1px solid var(--input);
	background: var(--card);
	color: var(--foreground);
	font-size: 15px;
	font-family: inherit;
	box-shadow: var(--shadow-xs);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
.abbh-search__form input:focus,
.abbh-searchform input[type="search"]:focus {
	outline: none;
	border-color: var(--ring);
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 30%, transparent);
}
.abbh-search__status { color: var(--muted-foreground); font-size: 14px; margin-bottom: 16px; }
.abbh-search__results { display: grid; gap: 16px; }
.abbh-search__book {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-xs);
}
.abbh-search__book-head {
	background: var(--muted);
	padding: 12px 16px;
	border-bottom: 1px solid var(--border);
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px;
}
.abbh-search__book-head .abbh-badge,
.abbh-search__book-head span:last-child:not(:first-child) { flex: none; }
.abbh-search__book-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.abbh-search__book-author { color: var(--muted-foreground); font-size: 13px; margin: 2px 0 0; }
.abbh-search__hits { display: grid; }
.abbh-search__hit {
	display: block;
	padding: 12px 16px;
	border-top: 1px solid var(--border);
	background: transparent;
	width: 100%; text-align: left;
	color: inherit; cursor: pointer;
	font: inherit;
	text-decoration: none;
	transition: background 120ms ease;
}
.abbh-search__hits > .abbh-search__hit:first-child { border-top: none; }
.abbh-search__hit:hover { background: var(--accent); color: inherit; }
.abbh-search__hit-page { color: var(--brand); font-weight: 600; font-size: 12.5px; }
.abbh-search__hit-context { color: var(--muted-foreground); margin-top: 2px; line-height: 1.7; font-size: 14.5px; }
.abbh-search__hit-context mark {
	background: var(--gray-900);
	color: #fff;
	padding: 0 3px;
	border-radius: 3px;
}

/* Search layout: results + sidebar ---------------------------------------- */
.abbh-search__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 32px;
	align-items: start;
}
.abbh-search__aside { display: grid; gap: 16px; position: sticky; top: 80px; }
.abbh-search__card {
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	background: var(--card);
	padding: 16px;
	box-shadow: var(--shadow-xs);
}
.abbh-search__card[hidden] { display: none; }
.abbh-search__card h2 { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.abbh-search__tips { margin: 0; padding-left: 18px; color: var(--muted-foreground); font-size: 13.5px; display: grid; gap: 6px; }
.abbh-search__summary ul { list-style: none; margin: 0 -8px; padding: 0; max-height: 50vh; overflow-y: auto; }
.abbh-search__summary a {
	display: flex; justify-content: space-between; gap: 10px;
	padding: 6px 8px;
	border-radius: var(--radius-sm);
	color: var(--foreground);
	text-decoration: none;
	font-size: 13.5px;
}
.abbh-search__summary a:hover { background: var(--accent); }
.abbh-search__count { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.abbh-search__book { scroll-margin-top: 80px; }
.abbh-search__book-title a { color: inherit; text-decoration: none; }
.abbh-search__book-title a:hover { text-decoration: underline; }
.abbh-search__hit.is-extra { display: none; }
.abbh-search__more {
	display: block; width: 100%;
	padding: 10px 16px;
	border: 0; border-top: 1px solid var(--border);
	background: transparent;
	color: var(--muted-foreground);
	font: inherit; font-size: 13.5px; font-weight: 500;
	cursor: pointer;
	text-align: left;
}
.abbh-search__more:hover { background: var(--accent); color: var(--foreground); }
.abbh-search__subhead { font-size: 14px; font-weight: 600; color: var(--muted-foreground); margin: 0 0 10px; }
.abbh-search__books { margin-bottom: 8px; }
.abbh-search__booklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.abbh-search__bookchip {
	display: flex; align-items: center; gap: 10px;
	padding: 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--card);
	color: var(--foreground);
	text-decoration: none;
}
.abbh-search__bookchip:hover { background: var(--accent); color: var(--foreground); }
.abbh-search__bookchip img, .abbh-search__bookchip-ph { flex: none; width: 36px; height: 54px; object-fit: cover; border-radius: 4px; background: var(--muted); }
.abbh-search__bookchip strong { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.abbh-search__bookchip small { display: block; color: var(--muted-foreground); font-size: 12.5px; }
.abbh-search__bookchip mark { background: transparent; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; }
@media (max-width: 900px) {
	.abbh-search__layout { grid-template-columns: 1fr; }
	.abbh-search__aside { position: static; }
	.abbh-search__summary { display: none; }
}

/* Loading skeletons -------------------------------------------------------- */
@keyframes abbh-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.abbh-skel,
.abbh-card-cover,
.abbh-continue__cover,
.abbh-book__cover-img {
	background-color: var(--muted);
	background-image: linear-gradient(90deg, transparent 30%, color-mix(in oklch, var(--background) 55%, transparent) 50%, transparent 70%);
	background-size: 300% 100%;
	animation: abbh-shimmer 1.4s ease-in-out infinite;
}
.abbh-skel { border-radius: var(--radius-xl); border: 1px solid var(--border); }
.abbh-skel--card { height: 160px; }
.abbh-skel--book { aspect-ratio: 2 / 3.6; }
img.is-loaded { animation: none; background-image: none; }
@media (prefers-reduced-motion: reduce) {
	.abbh-skel, .abbh-card-cover, .abbh-continue__cover, .abbh-book__cover-img { animation: none; }
}

/* Reader shell ---------------------------------------------------------- */
.abbh-reader-shell { min-height: 100vh; }
.abbh-reader-root { min-height: 100vh; }
.abbh-reader-missing {
	background: var(--muted);
	border: 1px dashed var(--border);
	border-radius: var(--radius-lg);
}

/* Blog index (fallback) ------------------------------------------------- */
.abbh-feed { display: grid; gap: 16px; }
.abbh-post {
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: 20px;
	background: var(--card);
	box-shadow: var(--shadow-xs);
}
.abbh-post__title { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.abbh-post__title a { color: var(--foreground); text-decoration: none; }
.abbh-post__excerpt { color: var(--muted-foreground); font-size: 15px; }

/* Pagination ------------------------------------------------------------ */
.abbh-pagination { margin-top: 36px; }
.abbh-pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.abbh-pagination a, .abbh-pagination .current, .abbh-pagination .dots {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; height: 36px;
	padding: 0 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--card);
	text-decoration: none;
	color: var(--foreground);
	font-size: 14px;
	font-weight: 500;
	box-shadow: var(--shadow-xs);
}
.abbh-pagination .dots { border-color: transparent; background: transparent; box-shadow: none; }
.abbh-pagination a:hover { background: var(--accent); color: var(--foreground); }
.abbh-pagination .current { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }

/* 404 ------------------------------------------------------------------- */
.abbh-404 { text-align: center; padding-top: 80px; }
.abbh-404__code {
	font-size: clamp(56px, 10vw, 96px);
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 1;
	margin: 0 0 12px;
	background: linear-gradient(180deg, var(--foreground), var(--muted-foreground));
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
}
.abbh-404 .abbh-section__lede { margin: 0 auto 24px; }

/* Footer ---------------------------------------------------------------- */
.abbh-footer {
	border-top: 1px solid var(--border);
	background: color-mix(in oklch, var(--muted) 45%, var(--background));
	padding: 48px 0 28px;
	margin-top: 64px;
}
.abbh-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
	gap: 32px;
}
.abbh-footer__about p { color: var(--muted-foreground); font-size: 14px; margin: 12px 0 0; max-width: 40ch; }
.abbh-footer__col h2 {
	margin: 4px 0 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--foreground);
}
.abbh-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.abbh-footer__col a { color: var(--muted-foreground); text-decoration: none; font-size: 14px; }
.abbh-footer__col a:hover { color: var(--foreground); }
.abbh-footer__copyright {
	margin: 36px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--border);
	color: var(--muted-foreground);
	font-size: 13px;
}
@media (max-width: 860px) {
	.abbh-footer__grid { grid-template-columns: 1fr 1fr; }
	.abbh-footer__about { grid-column: 1 / -1; }
}

/* Phone tab bar ---------------------------------------------------------- */
.abbh-tabbar { display: none; }
@media (max-width: 700px) {
	.abbh-tabbar {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 40;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		height: calc(60px + env(safe-area-inset-bottom));
		padding-bottom: env(safe-area-inset-bottom);
		background: color-mix(in oklch, var(--background) 92%, transparent);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-top: 1px solid var(--border);
	}
	.abbh-tabbar__item {
		display: grid;
		place-items: center;
		align-content: center;
		gap: 2px;
		color: var(--muted-foreground);
		text-decoration: none;
		font-size: 11.5px;
		font-weight: 500;
	}
	.abbh-tabbar__item svg { width: 22px; height: 22px; }
	.abbh-tabbar__item.is-active { color: var(--foreground); font-weight: 600; }
	.abbh-tabbar__item:hover { color: var(--foreground); }
	body:not(.abbh-is-reader) { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
	.abbh-footer { margin-top: 40px; }
}

/* Responsive tweaks ----------------------------------------------------- */
@media (max-width: 700px) {
	.abbh-container { padding-left: 16px; padding-right: 16px; }
	.abbh-header__inner { min-height: 56px; gap: 10px; }
	.abbh-header__brand { flex: 1; min-width: 0; }
	.abbh-brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.abbh-nav, .abbh-header__search { display: none; }   /* the tab bar takes over */
	.abbh-hero { padding: 28px 0 24px; }
	.abbh-hero__inner .abbh-badge { margin-bottom: 12px; }
	.abbh-hero__title { font-size: 28px; margin-bottom: 16px; }
	.abbh-hero__tagline { display: none; }
	.abbh-hero__suggest { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin: 14px -16px 0; padding: 0 16px; }
	.abbh-hero__suggest::-webkit-scrollbar { display: none; }
	.abbh-hero__suggest > * { flex: none; }
	.abbh-scroller { margin-right: -16px; }
	.abbh-scroller__track { padding-right: 16px; }
	.abbh-continue__list { display: flex; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
	.abbh-continue__list::-webkit-scrollbar { display: none; }
	.abbh-continue__item { flex: none; width: 86%; }
	.abbh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.abbh-card-title { font-size: 14px; }
	.abbh-card-body { padding: 10px 10px 12px; }
	.abbh-section { padding-top: 28px; }
	.abbh-section__header { margin-bottom: 14px; }
}

/* The reader is a full-screen app with its own toolbar (and back button),
   so the site header, footer and tab bar step aside. */
body.abbh-is-reader .abbh-header,
body.abbh-is-reader .abbh-footer,
body.abbh-is-reader .abbh-tabbar,
body:has(#abbh-reader-root) .abbh-header,
body:has(#abbh-reader-root) .abbh-footer,
body:has(#abbh-reader-root) .abbh-tabbar { display: none; }
body.abbh-is-reader .abbh-main { padding-bottom: 0; }

/* ---------- Urdu (Nastaliq) ---------- */
/* Set by main.js / the reader on text detected as Urdu or Persian. The
   Nastaliq face only covers Arabic-script characters, so Bangla in the same
   element keeps its font. Nastaliq needs extra line height. */
.abbh-urdu {
	font-family: "ABBH Nastaliq", "Hind Siliguri", "Noto Serif Bengali", serif;
	line-height: 2.3;
}
.abbh-searchform { display: flex; gap: 8px; max-width: 560px; }

/* Native search "clear" control in brand colours. */
input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1); opacity: 0.6; cursor: pointer; }
html[data-theme="dark"] .abbh-search__hit-context mark { background: var(--gray-100); color: var(--gray-950); }