/* Generated by tools/build-rtl-css.mjs from public/css/family-lists.css: never edit by hand. */
/* family-lists.css: the rules only the lists pages use, moved out of bde-v3-pages.css and
   bde-app.css (2026-09-25) so every other page stops downloading them. It loads after both, in
   the same order its rules had there. Generated mechanically from the two files; edit here now. */

/* ============================== from bde-v3-pages.css */
/* Soft banner at the top of a list (designs Category Page, 10 Popular Books, 04 Audiobooks). */
.ls-banner { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px 34px; border-radius: 18px; border: 1px solid #E7EFFA; background: linear-gradient(-110deg, #EEF6FF 0%, #F4F9FF 55%, #FDF5F1 100%); }
.ls-banner__lead { display: flex; align-items: center; gap: 20px; min-width: 0; }
.ls-banner__body { min-width: 0; }
.ls-banner__title { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -1px; line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; }
.ls-banner__title--sm { font-size: 28px; font-weight: 700; letter-spacing: -.9px; }
.ls-banner__facts { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--sub); }
.ls-banner__stats b { font-size: 19px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); margin-left: 3px; }
.ls-tabs .pill { gap: 6px; white-space: nowrap; }
.ls-tabs .pill.active:hover { color: #fff; }
.ls-tabs__label { font-size: 11.5px; font-weight: 700; color: var(--ink); margin-left: 2px; }
.ls-count { margin: 0; font-size: 11.5px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.ls-grid { margin-top: 18px; }
html.bn .ls-searchbox input[type="search"] { font-family: var(--f2-ui); font-size: 15px; }
.ls-searchbox input[type="search"]::-webkit-search-cancel-button { display: none; }
.ls-searchbox:focus-within { box-shadow: 0 0 0 4px #D5E6FF; }
/* The sidebar layout under the box, with the one filter our search has. */
.ls-layout { margin-top: 24px; }
.ls-main { min-width: 0; }
.ls-filter { position: sticky; top: 16px; }
.ls-filter__option { position: relative; display: flex; align-items: center; gap: 9px; min-height: 30px; padding: 0 28px 0 8px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--sub); }
.ls-filter__option::before { content: ""; position: absolute; right: 7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 1.5px solid #B9C7DB; background: #fff; box-sizing: border-box; }
.ls-filter__option[aria-current]::before { border: 4px solid var(--blue); }
.ls-head { align-items: flex-end; }
.ls-head__title { min-width: 0; overflow-wrap: anywhere; }
/* Authors, subjects and series that matched. */
.ls-others { margin-top: 26px; }
.ls-chips .chip { height: auto; min-height: 32px; padding: 4px 12px; white-space: normal; overflow-wrap: anywhere; }
.ls-note { margin: 18px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted); }
/* Empty and start states (design 28 No Search Results). */
.ls-empty { margin-top: 22px; padding: 46px 20px; border: 1px dashed var(--field); border-radius: 14px; text-align: center; }
.ls-empty--start { border-style: solid; background: var(--soft); border-color: var(--line); }
.ls-empty__mark { width: 88px; height: 88px; margin: 0 auto 18px; border-radius: 28px; background: #EEF6FF; color: var(--blue); display: flex; align-items: center; justify-content: center; }
.ls-empty__title { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.6px; color: var(--ink); overflow-wrap: anywhere; }
.ls-tips { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ls-tips strong { font-size: 13px; color: var(--ink); }
.ls-pager__step { gap: 6px; padding: 0 12px !important; }
.ls-pager__step--next { background: var(--blue-50); border-color: #CFE0FA !important; color: #1466D6 !important; }
.ls-pages { margin-top: 26px; }
.ls-pages .pagination { margin-top: 10px; }
.ls-pages__range { margin: 0; text-align: center; font-size: 11.5px; color: var(--muted); }
/* Audiobook cards: a little more room for the duration line. */
.ls-grid--audio .audio-card .d { flex-wrap: wrap; }
.ls-grid--audio .audio-card:hover .t { color: var(--blue); }
/* The submit word hides on a narrow phone; the button keeps its aria-label. */
@media (max-width: 480px) {
  .searchbar__submit-word { display: none; }
  .searchbar__submit { width: 44px; padding: 0; }
}
@media (max-width: 980px) {
  .ls-tips { grid-template-columns: minmax(0, 1fr); }
  /* The filter stays visible above the results (design 35 Mobile Search Filter), as a card
     of wrapping choices: one filter needs no toggle, and no script is needed to reach it. */
  .ls-filter { position: static; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; }
  .ls-filter__option { min-height: 36px; padding: 0 14px; border: 1px solid var(--field); border-radius: 999px; background: #fff; }
  .ls-filter__option::before { display: none; }
  .ls-layout { gap: 18px; }
}
@media (max-width: 560px) {
  .ls-banner { padding: 20px 18px; border-radius: 14px; }
  .ls-banner__title { font-size: 25px; letter-spacing: -.6px; }
  .ls-banner__title--sm { font-size: 23px; }
  .ls-banner__lead { align-items: flex-start; gap: 14px; }
  .ls-searchbox { height: 50px; }
  .ls-searchbox__clear { width: 44px; height: 44px; }
  .ls-empty { padding: 32px 16px; }
  .ls-empty__title { font-size: 21px; }
  .ls-tabs .pill, .ls-filter__option, .ls-chips .chip { min-height: 44px; }
}
@media (max-width: 560px) {
  .ls-tabs::-webkit-scrollbar { display: none; }
  /* One column, and no wrapping: a wrapping column sizes itself to its widest child. */
  .ls-bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
}
.dir-page .dir-hero--plain { min-height: 0; }
.dir-page .dir-hero__text { min-width: 0; max-width: 680px; }
/* Section heads (designs: 25px title, a quiet line under it). */
.dir-page .dir-section { margin-top: 30px; }
.dir-page .dir-section--tight { margin-top: 18px; }
.dir-page .dir-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
/* Subject tiles (design 01): centred mark in its hue, name, count. */
.dir-page .dir-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
/* Every subject as a chip with its count (design 02's genre chips). */
.dir-page .dir-chips { display: flex; flex-wrap: wrap; gap: 10px; }
/* Letter strip (handoff directory/authors: pills, the current one blue). */
.dir-page .az { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
/* Author tiles (handoff directory/authors): the neutral mark, the name, the real count. */
.dir-page .dir-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.dir-page .dir-person__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dir-page .dir-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dir-page .dir-pager { margin-top: 24px; }
.dir-page .dir-adbox { flex: 0 1 420px; max-width: 420px; min-width: 0; }
.dir-page .dir-crumbs li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.dir-page .dir-crumbs li + li::before { content: "/"; color: #B8C4D6; }
/* Author head (design 05): the round portrait beside the name, facts as chips. */
.dir-page .dir-author { display: flex; align-items: center; gap: 24px; padding: 18px 0 6px; }
.dir-page .dir-portrait img { width: 100%; height: 100%; object-fit: cover; }
.dir-page .dir-author__text { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.dir-page .dir-chiprow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 9px; }
/* The author's books: the shared card grid. */
.dir-page .dir-grid { margin-top: 0; }
/* About and topics panels (design 05). */
.dir-page .dir-panels { margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 22px; }
.dir-page .dir-panel { min-width: 0; padding: 22px; border: 1px solid #E5EDF7; border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgba(32, 74, 131, .04); }
.dir-page .dir-prose p:last-child { margin-bottom: 0; }
/* Numbered reading order (design 06), only where the record numbers a book. */
.dir-page .dir-order { border: 1px solid #E3EBF6; border-radius: 16px; overflow: hidden; }
.dir-page .dir-order__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Series index rows: a mark, the name and its count, the chevron. */
.dir-page .dir-series-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.dir-page .dir-series-list > a > svg { flex: 0 0 auto; color: #9FB0C9; }
.dir-page .dir-series-list__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Bengali conjuncts need more line height than Latin, and never negative tracking. */
html.bn .dir-page .dir-hero h1, html.bn .dir-page .dir-author h1, html.bn .dir-page .dir-series-hero h1, html.bn .dir-page .dir-head h2, html.bn .dir-page .dir-panel h2 { line-height: 1.4; letter-spacing: 0; }
/* Tablet. */
@media (max-width: 980px) {
  .dir-page .dir-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .dir-page .dir-hero { padding: 24px; }
  .dir-page .dir-hero__art { display: none; }
  .dir-page .dir-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  /* Three to a row: nine tiles, so no single tile is left alone; the tenth is in the A to Z list. */
  .dir-page .dir-tiles > :nth-child(n+10) { display: none; }
  .dir-page .dir-author { align-items: flex-start; }
  .dir-page .dir-portrait { width: 84px; height: 84px; }
}
@media (max-width: 560px) {
  .dir-page .dir-hero { padding: 20px 18px; border-radius: 18px; }
  .dir-page .dir-tile { min-height: 112px; padding: 14px 6px; }
  .dir-page .dir-avatar { width: 36px; height: 36px; }
  .dir-page .az__key { min-width: 44px; height: 44px; }
  .dir-page .dir-author { flex-direction: column; gap: 14px; padding-top: 10px; }
  .dir-page .dir-portrait { width: 72px; height: 72px; }
  .dir-page .dir-actions .btn { flex: 1 1 auto; }
  .dir-page .dir-people, .dir-page .dir-series-list { grid-template-columns: minmax(0, 1fr); }
  .dir-page .dir-panel { padding: 18px; }
}
.root-crumbs { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.root-results__title { margin-top: 12px; }
.root-feedback { margin-top: 20px; }
.root-feedback .notice { max-width: 640px; }
.root-group .h2 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.root-group__english { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.root-empty { max-width: 760px; }
.link-chips .chip { min-height: 32px; }
.devices__row { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: #fff; }
.devices__row dt { font-size: 13px; font-weight: 700; color: var(--ink); }
.devices__row dd { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--body); }
.ch-tile { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.ch-tile__name { min-width: 0; overflow-wrap: anywhere; }
.ch-tile__n { flex: 0 0 auto; font-size: 12px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .ch-tile { padding: 9px 12px; }
}
/* ---- List and directory headers: flat, no art, no gradient (craft rules 1, 5) ---- */
.ls-banner.ch-flat { display: block; padding: 6px 0 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.ls-banner.ch-flat .ls-banner__lead { display: block; }
.ls-banner.ch-flat + .ls-bar, .ls-banner.ch-flat + .grid-books { margin-top: 22px; }
.ch-audio-mark { display: inline-flex; vertical-align: -1px; color: var(--audio); }
.dir-page .dir-hero.ch-flat { display: block; min-height: 0; padding: 0; border-radius: 0; background: none; overflow: visible; }
.dir-page .dir-hero.ch-flat .dir-hero__count { margin-top: 0; font-size: 13.5px; }
/* Subjects page: the largest subjects as text tiles, like the home's. */
.dir-page .dir-tiles { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.dir-page .dir-tile.ch-tile:hover { border-color: #CFE0FA; background: var(--soft); color: var(--blue-h); }
@media (max-width: 560px) {
  .dir-page .dir-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dir-page .dir-tile.ch-tile { min-height: 44px; padding: 9px 12px; }
}
/* Narrow phones: two tiles side by side leave a long name too little room beside its count
   ("Contemporary Romance", "Abenteuerroman" broke mid-word at 320px), so the count moves
   under the name and a word only breaks when it cannot fit a whole tile. */
@media (max-width: 420px) {
  .ch-tile, .dir-page .dir-tile.ch-tile { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 8px 12px; }
  .ch-tile__name { overflow-wrap: break-word; hyphens: auto; }
}
/* The count inside the selected list tab showed at 75% opacity, 3.5:1 on blue (axe); full white passes. */
.ls-tabs .pill.active .ls-tabs__n, .ls-tabs .pill[aria-current] .ls-tabs__n { color: #fff; opacity: 1; }
/* The decorative mark where there is no photo: a flat ground, not a gradient (rule 5). */
.dir-page .dir-author .dir-portrait--fallback { background: #EEF3FA; }
.dir-page .dir-series-hero p { color: var(--sub); }
@media (max-width: 640px) {
  .dir-page .dir-series-hero { padding: 10px 0 4px; }
}

/* ============================== from bde-app.css */
/* ================================================================== main search (/search) */
.rt-results { padding-top: 14px; }
.root-crumbs { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.root-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-weight: 500; }
.rt-search--page { max-width: 640px; }
.rt-search--page .app-search { margin-top: 16px; }
.rt-search--page .app-search input[aria-invalid="true"] { color: var(--ink); }
.rt-search--page .app-search:has(input[aria-invalid="true"]) { border-color: #B42318; }
/* The language pills: a sideways row on a phone, wrapping on a desktop. */
.rt-langs { margin-top: 14px; }
.rt-langs__list { margin-top: 0; }
.rt-lang { gap: 6px; }
.rt-lang__en { font-size: 12px; font-weight: 500; color: var(--muted); }
.rt-feedback { margin-top: 22px; }
.rt-feedback .app-h2 { margin: 0; }
.rt-scope-line { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 70ch; }
.rt-scope-line a { color: var(--accent-ink); font-weight: 650; }
.rt-notice { max-width: 640px; padding: 18px 20px; border: 0; border-radius: var(--r-card); background: #FEF1EF; color: #8F1D14; }
.rt-notice__lead { margin: 6px 0 0; font-weight: 600; }
.rt-notice__hint { margin: 4px 0 0; color: #6E2A22; }
/* Start and no-result states: a soft panel, a round mark, one plain line, one way on. */
.rt-state { margin-top: 8px; max-width: 640px; padding: 28px 22px; border-radius: var(--r-panel); background: var(--soft); text-align: center; }
.rt-state--none { margin-top: 26px; }
.rt-state__icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 50%; background: var(--accent-tint); color: var(--accent-deep); }
.rt-state p { margin: 6px auto 0; max-width: 46ch; font-size: 14px; line-height: 1.55; color: var(--muted); }
.rt-state .rt-state__go { margin-top: 16px; }
.rt-state .rt-state__go .btn { height: 46px; padding: 0 22px; }
@media (min-width: 761px) {
  .rt-state { padding: 40px 32px; margin-right: 0; }
}
/* One language's answers. */
.rt-group { margin-top: 30px; }
.rt-group__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.rt-group__title span:lang(bn) { letter-spacing: 0; }
.rt-others { margin-top: 8px; }
.rt-group__books:not(.app-shelf__track) { margin-top: 14px; }
@media (max-width: 560px) {
  .rt-others .app-pill { height: 44px; }
}
.chip { border-color: var(--border); background: var(--soft); color: var(--ink); }
/* App-style rollout 2026-09-25 (app-lists): the list and discovery pages in the pilot's look.
 *
 * Pages: book lists (all, popular, latest, featured and the legacy archives), catalogue search,
 * the subject, author and series indexes and hubs, audiobooks and the download help page.
 * Loaded after bde-app.css and wins by order at the same specificity. Only the pilot's tokens
 * (bde-app.css :root) are used: --accent (non-text only), --accent-ink (text and white-text
 * fills), --accent-deep, --accent-tint, --warm, --soft, --ink, --body, --muted, the radii and
 * the shadows. Its components are reused as they are where a page now carries their markup
 * (app-head, app-h2, app-more, app-pills, app-person, app-set__spines, app-search, app-hero).
 *
 * One addition, local to this file: .al-mark, the author index's small round mark, drawn with
 * the home's five neutral tints (bde-app.css .app-person__mark).
 *
 * Contrast (on white unless stated): --ink 16.78:1, --body 7.91:1, --muted 5.90:1 (5.46:1 on
 * --soft, 5.45:1 on --warm), --accent-ink 5.18:1, white on --accent-ink 5.18:1, --accent-deep
 * on --accent-tint 6.38:1, --ink on --soft 15.5:1.
 */
/* ================================================================== page frame */
.ls-page, .dir-page { padding-top: 12px; padding-bottom: 8px; }
/* Breadcrumbs: the book page's quiet trail. */
.ls-crumbs { gap: 8px; margin-bottom: 4px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.ls-crumbs a, .dir-page .dir-crumbs a { color: var(--muted); }
.ls-crumbs a:hover, .dir-page .dir-crumbs a:hover { color: var(--accent-ink); }
.dir-page .dir-crumbs ol { font-size: 12.5px; }
.dir-page .dir-crumbs li + li::before { color: #B9BDC9; }
html.bn .ls-crumbs, html.bn .dir-page .dir-crumbs ol { font-size: 13.5px; }
/* Phones: one line of trail, as on the book page. The current page is the heading right
   below it, so it stays for screen readers only, with no separator before it. */
@media (max-width: 760px) {
  .ls-crumbs { flex-wrap: nowrap; white-space: nowrap; min-width: 0; }
  .ls-crumbs > a { flex: 0 1 auto; min-width: 0; min-height: 44px; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 44px; }
  .ls-crumbs > a:first-child, .ls-crumbs > a:first-child:not(.r5-none) { position: relative; flex: 0 0 auto; min-width: 0; margin-right: 0; }
  .ls-crumbs > a:first-child::after { content: ""; position: absolute; right: 50%; top: 50%; width: 44px; height: 44px; transform: translate(50%, -50%); }
  .ls-crumbs > span[aria-hidden="true"]:nth-last-child(2) { display: none; }
  .ls-crumbs > [aria-current] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dir-page .dir-crumbs ol { flex-wrap: nowrap; white-space: nowrap; }
  .dir-page .dir-crumbs li { min-width: 0; }
  .dir-page .dir-crumbs li:first-child { flex: 0 0 auto; }
  .dir-page .dir-crumbs li a { display: block; min-height: 44px; line-height: 44px; overflow: hidden; text-overflow: ellipsis; }
  .dir-page .dir-crumbs li:nth-last-child(2) ~ li::before { content: none; }
  .dir-page .dir-crumbs li:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* ================================================================== list headers */
/* Title, one plain line, the count: the app's bold sans, no art, no band. */
.ls-banner.ch-flat { padding-top: 10px; }
.ls-banner.ch-flat .ls-banner__title,
.ls-banner.ch-flat .ls-banner__title--sm,
.dir-page .dir-hero.ch-flat h1 { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.14; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.ls-banner.ch-flat .ls-banner__title:not(:lang(bn)),
.dir-page .dir-hero.ch-flat h1:not(:lang(bn)) { font-family: var(--sans); }
.dir-page .dir-hero.ch-flat { padding-top: 10px; }
.ls-banner.ch-flat .ls-banner__text,
.dir-page .dir-hero.ch-flat p { margin: 8px 0 0; max-width: 62ch; font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.ls-banner.ch-flat .ls-banner__facts,
.ls-banner.ch-flat .ls-banner__stats,
.dir-page .dir-hero.ch-flat .dir-hero__count { margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--body); }
.ls-banner.ch-flat .ls-banner__facts + .ls-banner__text { margin-top: 10px; }
.ls-count { font-size: 13.5px; font-weight: 600; color: var(--muted); }
.ch-audio-mark { vertical-align: 0; }
@media (min-width: 1024px) {
  .ls-banner.ch-flat .ls-banner__title,
  .ls-banner.ch-flat .ls-banner__title--sm,
  .dir-page .dir-hero.ch-flat h1 { font-size: 36px; }
}
@media (max-width: 359px) {
  .ls-banner.ch-flat .ls-banner__title,
  .ls-banner.ch-flat .ls-banner__title--sm,
  .dir-page .dir-hero.ch-flat h1 { font-size: 26px; }
}
/* Section heads inside the pages: the home's .app-h2. */
.dir-page .dir-section { margin-top: 32px; }
.dir-page .dir-section--tight { margin-top: 18px; }
.dir-page .dir-head { align-items: center; min-height: 44px; margin-bottom: 8px; }
.dir-page .dir-head h2 { font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: -.025em; }
.dir-page .dir-head h2:not(:lang(bn)) { font-family: var(--sans); }
.ls-others .h3 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
@media (min-width: 1024px) {
  .dir-page .dir-head h2 { font-size: 22px; }
}
/* ================================================================== pills */
/* Every chip on these pages is the home's soft pill: list tabs, narrower shelves, format
   filters, letters, matched authors and subjects, the subject A to Z and an author's
   subjects. The chosen one is the orange fill. */
.ls-tabs .pill, .ls-filter__option, .ls-chips .chip, .dir-page .az__key, .dir-page .dir-chips a, .dir-page a.dir-chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: auto; min-height: 44px; padding: 0 18px;
  border: 0; border-radius: 999px; background: var(--soft); box-shadow: none; color: var(--ink);
  font-size: 14px; font-weight: 600; line-height: 1.25; white-space: nowrap;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out);
}
.ls-tabs .pill:hover, .ls-filter__option:hover, .ls-chips .chip:hover, .dir-page .az__key:hover, .dir-page .dir-chips a:hover, .dir-page a.dir-chip:hover { background: var(--accent-tint); color: var(--accent-deep); }
.ls-tabs .pill.active, .ls-tabs .pill[aria-current], .ls-tabs .pill.active:hover,
.ls-filter__option[aria-current], .ls-filter__option[aria-current]:hover,
.dir-page .az__key--on, .dir-page .az__key--on:hover { background: var(--accent-ink); color: #fff; font-weight: 700; }
.ls-tabs .pill:focus-visible, .ls-filter__option:focus-visible, .ls-chips .chip:focus-visible, .dir-page .az__key:focus-visible, .dir-page .dir-chips a:focus-visible, .dir-page a.dir-chip:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; box-shadow: 0 0 0 4px var(--accent-tint); }
.ls-tabs .pill:hover .ls-tabs__n, .ls-chips .chip:hover .ls-chips__n, .dir-page .dir-chips a:hover .rows__side, .dir-page a.dir-chip:hover .dir-chip__n { color: var(--accent-deep); }
.ls-tabs .pill.active .ls-tabs__n, .ls-tabs .pill[aria-current] .ls-tabs__n { color: #fff; }
.ls-tabs__label { font-size: 13px; font-weight: 700; color: var(--muted); margin-left: 2px; white-space: nowrap; }
.dir-page .az__key { min-width: 44px; padding: 0 14px; }
.ls-filter__option::before { display: none; }
.ls-chips .chip { white-space: normal; overflow-wrap: anywhere; text-align: right; justify-content: flex-start; }
.dir-page .dir-chips a { max-width: 100%; white-space: normal; text-align: right; }
.dir-page .dir-chips .rows__grow { font-weight: 600; }
@media (min-width: 1024px) {
  .ls-tabs .pill, .ls-filter__option, .ls-chips .chip, .dir-page .az__key, .dir-page .dir-chips a, .dir-page a.dir-chip { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-tabs .pill, .ls-filter__option, .ls-chips .chip, .dir-page .az__key, .dir-page .dir-chips a, .dir-page a.dir-chip { transition: none; }
}
html.bn .ls-tabs .pill, html.bn .ls-filter__option, html.bn .ls-chips .chip, html.bn .dir-page .dir-chips a, html.bn .dir-page a.dir-chip { font-size: 15px; line-height: 1.4; }
/* A matched author in search carries the neutral round mark, a matched series the three
   spines, as the home draws them. Both are drawn in CSS: decoration, nothing announced. */
.ls-others[data-result-type="author"] .chip, .ls-others[data-result-type="series"] .chip { padding-right: 8px; }
.ls-others[data-result-type="author"] .chip::before {
  content: ""; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: #FDE7D8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B4532A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.ls-others[data-result-type="series"] .chip::before {
  content: ""; flex: 0 0 auto; width: 30px; height: 26px; margin-right: 4px;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 4px / 8px 22px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 11px 0 / 8px 26px no-repeat,
    linear-gradient(#FDBA74, #FDBA74) 22px 7px / 8px 19px no-repeat;
}
/* ================================================================== book lists */
.ls-bar { margin-top: 20px; gap: 10px 16px; }
.ls-banner.ch-flat + .ls-bar, .ls-banner.ch-flat + .grid-books { margin-top: 20px; }
.ls-grid { margin-top: 20px; }
@media (max-width: 560px) {
  .ls-bar { gap: 8px; }
  .ls-bar > .ls-count { padding-top: 2px; }
}
/* ================================================================== search */
/* The home's rounded pill search. */
.ls-searchbox { max-width: 720px; height: 54px; gap: 8px; padding: 0 16px 0 6px; border: 1px solid var(--field); border-radius: 999px; background: #fff; box-shadow: var(--shadow-soft); color: var(--muted); }
.ls-searchbox:focus-within { border-color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-tint), var(--shadow-soft); }
.ls-searchbox .ls-searchbox__mark { stroke: currentColor; }
.ls-searchbox input[type="search"] { font-family: inherit; font-size: 16px; font-weight: 500; color: var(--ink); }
.ls-searchbox input[type="search"]::placeholder { color: var(--muted); opacity: 1; }
html.bn .ls-searchbox input[type="search"] { font-size: 16px; }
.ls-searchbox__clear { width: 40px; height: 40px; border-radius: 50%; background: var(--soft); color: var(--body); }
.ls-searchbox__clear:hover { background: var(--accent-tint); color: var(--accent-deep); }
.ls-searchbox .searchbar__submit { height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--accent-ink); color: #fff; font-size: 14px; font-weight: 700; }
.ls-searchbox .searchbar__submit:hover { background: var(--accent-deep); color: #fff; }
.ls-searchbox .searchbar__submit:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (min-width: 761px) {
  .ls-searchbox { height: 58px; }
  .ls-searchbox .searchbar__submit { height: 46px; padding: 0 24px; }
}
@media (max-width: 480px) {
  .ls-searchbox .searchbar__submit { width: 44px; padding: 0; }
}
@media (max-width: 359px) {
  .ls-searchbox { padding-right: 12px; }
}
/* One column at every width: the one filter the search has is a pill row above the results,
   not a sidebar that leaves a column of white beside them. */
.ls-layout.layout-sidebar { display: block; margin-top: 18px; }
.ls-filter { position: static; margin: 0 0 6px; padding: 0; border: 0; border-radius: 0; background: none; }
.ls-filter__group { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 0 4px; border: 0; }
.ls-filter__title { flex: 0 0 auto; margin: 0 0 0 4px; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.ls-head { flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.ls-head__title.h1 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.ls-head__title:not(:lang(bn)) { font-family: var(--sans); }
.ls-head .btn[data-global-search] { height: auto; min-height: 44px; padding: 0 18px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13.5px; font-weight: 650; white-space: normal; text-align: center; }
.ls-head .btn[data-global-search]:hover { border-color: var(--accent-ink); color: var(--accent-deep); }
@media (min-width: 1024px) {
  .ls-head__title.h1 { font-size: 30px; }
}
.ls-others { margin-top: 30px; }
.ls-chips { margin-top: 10px; gap: 8px; }
.ls-note { margin-top: 20px; font-size: 13px; color: var(--muted); }
/* ================================================================== empty and start states */
/* A warm panel with the way on, never a dead end. */
.ls-empty { margin-top: 20px; padding: 34px 22px 28px; border: 0; border-radius: var(--r-panel); background: var(--warm); text-align: center; }
.ls-empty--start { background: var(--warm); border: 0; }
.ls-empty__mark { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%; background: #fff; color: var(--accent-ink); box-shadow: var(--shadow-soft); }
.ls-empty__title { font-size: 22px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; text-wrap: balance; }
.ls-empty__title:not(:lang(bn)) { font-family: var(--sans); }
.ls-empty__text { max-width: 46ch; font-size: 14.5px; line-height: 1.6; color: var(--body); text-wrap: pretty; }
.ls-empty__actions { margin-top: 20px; gap: 10px; }
.ls-empty__actions .btn { height: auto; min-height: 48px; padding: 10px 22px; border-radius: 999px; font-size: 14.5px; font-weight: 700; white-space: normal; line-height: 1.25; }
.ls-empty__actions .btn:not(.btn-primary) { background: #fff; border-color: #fff; color: var(--ink); box-shadow: var(--shadow-soft); }
.ls-empty__actions .btn:not(.btn-primary):hover { border-color: var(--accent-ink); color: var(--accent-deep); }
@media (min-width: 761px) {
  .ls-empty { padding: 48px 32px 40px; }
  .ls-empty__title { font-size: 26px; }
}
@media (max-width: 480px) {
  .ls-empty__actions .btn { flex: 1 1 100%; }
}
.ls-tips { margin-top: 16px; gap: 10px; }
.ls-tips li { padding: 18px 20px; border: 0; border-radius: var(--r-card); background: var(--soft); font-size: 13.5px; line-height: 1.6; color: var(--body); }
.ls-tips strong { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.ls-tips a { display: inline-block; margin-top: 4px; color: var(--accent-ink); font-weight: 700; }
.ls-tips a:hover { color: var(--accent-deep); }
/* ================================================================== pagers */
/* Both pagers as pills: Next is the one orange step, the page numbers soft circles. A step
   that does not exist is not drawn as a dead button. */
.ls-pager { margin-top: 36px; gap: 8px; align-items: center; justify-content: center; }
.ls-pager a, .ls-pager span { min-width: 44px; height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 14px; font-weight: 650; }
.ls-pager a:hover { background: var(--accent-tint); color: var(--accent-deep); }
.ls-pager .ls-pager__step { gap: 8px; padding: 0 22px !important; }
.ls-pager .ls-pager__step--next { background: var(--accent-ink) !important; color: #fff !important; box-shadow: 0 12px 22px -12px rgba(194, 65, 12, .7); }
.ls-pager .ls-pager__step--next:hover { background: var(--accent-deep) !important; }
.ls-pager span.disabled.ls-pager__step { display: none; }
.ls-pager .disabled { background: transparent; color: #9DA2B0; }
.ls-pager .active { background: var(--accent-ink); color: #fff; font-weight: 700; }
.ls-pager a:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; box-shadow: 0 0 0 4px var(--accent-tint); }
.ls-pages { margin-top: 36px; }
.ls-pages .ls-pager { margin-top: 12px; }
.ls-pages__range { font-size: 13px; color: var(--muted); }
.dir-page .dir-pager { margin-top: 8px; }
html.bn .ls-pager a, html.bn .ls-pager span { font-size: 15px; }
/* ================================================================== subjects */
/* The largest subjects as soft tiles, the rest as pills that wrap (every one stays in view). */
/* Ten tiles: five across on a laptop, two across on a phone; three across in between shows
   nine (the tenth is in the A to Z list), so no tile is ever left alone on its row. */
.dir-page .dir-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.dir-page .dir-tiles > :nth-child(n+10) { display: flex; }
@media (max-width: 1023px) {
  .dir-page .dir-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dir-page .dir-tiles > :nth-child(n+10) { display: none; }
}
.dir-page .dir-tile.ch-tile { min-height: 64px; padding: 14px 18px; border: 0; border-radius: 18px; background: var(--soft); font-size: 14.5px; font-weight: 700; transition: background-color .18s var(--ease-out), color .18s var(--ease-out); }
.dir-page .dir-tile.ch-tile:hover { border: 0; background: var(--accent-tint); color: var(--accent-deep); }
.dir-page .dir-tile.ch-tile:hover .ch-tile__n { color: var(--accent-deep); }
.dir-page .dir-tile .ch-tile__n { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.dir-page .dir-chips { gap: 8px; }
html.bn .dir-page .dir-tile.ch-tile { font-size: 15.5px; }
@media (max-width: 560px) {
  .dir-page .dir-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .dir-page .dir-tiles > :nth-child(n+10) { display: flex; }
  .dir-page .dir-tile.ch-tile { min-height: 60px; padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .dir-page .dir-tile.ch-tile { transition: none; }
}
/* A subject's own page: its authors (the home's round marks) and neighbours (pills). */
.ls-page .app-people, .ls-page .app-block { margin-top: 38px; }
/* ================================================================== authors */
.dir-page .az { gap: 6px; margin-top: 18px; }
@media (min-width: 761px) {
  .dir-page .az { flex-wrap: wrap; }
}
/* Soft rows: the neutral round mark, the name, the real count. */
.dir-page .dir-people { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.dir-page .dir-people > a { gap: 12px; min-height: 64px; padding: 10px 10px 10px 14px; border: 0; border-radius: 18px; background: var(--soft); transition: background-color .18s var(--ease-out); }
.dir-page .dir-people > a:hover { border: 0; background: var(--accent-tint); color: var(--ink); }
.dir-page .dir-people > a:hover .rows__grow { color: var(--accent-deep); }
.dir-page .dir-people .rows__grow { font-size: 14.5px; font-weight: 700; }
.dir-page .dir-people .rows__side { min-width: 34px; height: 28px; padding: 0 10px; background: #fff; color: var(--body); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.al-mark { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #FDE7D8; color: #B4532A; }
.al-mark[data-tint="1"] { background: #F7E4EA; color: #A34463; }
.dir-page .dir-author .dir-portrait--fallback[data-tint="1"] { color: #A34463; }
.al-mark[data-tint="2"] { background: #E3F1E8; color: #3D7A53; }
.dir-page .dir-author .dir-portrait--fallback[data-tint="2"] { color: #3D7A53; }
.al-mark[data-tint="3"] { background: #E6ECF8; color: #43609A; }
.dir-page .dir-author .dir-portrait--fallback[data-tint="3"] { color: #43609A; }
.al-mark[data-tint="4"] { background: #F3ECDD; color: #86652A; }
.dir-page .dir-author .dir-portrait--fallback[data-tint="4"] { color: #86652A; }
html.bn .dir-page .dir-people .rows__grow { font-size: 15.5px; line-height: 1.45; }
@media (max-width: 560px) {
  .dir-page .dir-people { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dir-page .dir-people > a { min-height: 60px; padding: 8px 8px 8px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .dir-page .dir-people > a { transition: none; }
}
/* An author's page: a warm panel like the book page's hero. Phones centre the mark, the name
   and the facts; wider screens put the mark beside them. */
.dir-page .dir-author { margin-top: 6px; padding: 28px 18px 22px; border-radius: var(--r-panel); background: var(--warm); flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.dir-page .dir-portrait { width: 112px; height: 112px; background: #fff; box-shadow: 0 18px 30px -16px rgba(26, 29, 41, .45); }
/* The decorative mark on the warm panel: a white disc, the icon in one of the five tints. */
.dir-page .dir-author .dir-portrait--fallback { background: #fff; color: #B4532A; box-shadow: 0 14px 26px -16px rgba(26, 29, 41, .35); }
.dir-page .dir-author__text { align-items: center; gap: 14px; width: 100%; }
.dir-page .dir-author h1 { font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.dir-page .dir-author h1:not(:lang(bn)) { font-family: var(--sans); font-weight: 800; font-size: 28px; }
.dir-page .dir-author .dir-chiprow { justify-content: center; gap: 8px; }
.dir-page .dir-author .dir-chip { min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; }
.dir-page .dir-author .dir-chip--on { background: #fff; border: 0; color: var(--ink); font-weight: 800; }
.dir-page .dir-author a.dir-chip { background: #fff; color: var(--accent-ink); font-weight: 700; }
.dir-page .dir-author a.dir-chip:hover { background: var(--accent-tint); color: var(--accent-deep); }
.dir-page .dir-pd { max-width: 62ch; padding: 14px 16px; border-radius: 16px; background: #fff; color: var(--body); font-size: 13px; line-height: 1.6; text-align: right; }
@media (min-width: 761px) {
  .dir-page .dir-author { flex-direction: row; align-items: center; gap: 36px; padding: 40px; text-align: right; }
  .dir-page .dir-portrait { width: 148px; height: 148px; }
  .dir-page .dir-author__text { align-items: flex-start; }
  .dir-page .dir-author .dir-chiprow { justify-content: flex-start; }
  .dir-page .dir-author h1, .dir-page .dir-author h1:not(:lang(bn)) { font-size: 36px; }
}
@media (min-width: 1024px) {
  .dir-page .dir-author { padding: 48px 56px; }
  .dir-page .dir-author h1, .dir-page .dir-author h1:not(:lang(bn)) { font-size: 40px; }
}
@media (max-width: 359px) {
  .dir-page .dir-author h1, .dir-page .dir-author h1:not(:lang(bn)) { font-size: 25px; }
  .dir-page .dir-author { padding: 24px 14px 18px; }
}
html.bn .dir-page .dir-author h1 { font-weight: 700; letter-spacing: 0; line-height: 1.35; }
html.bn .dir-page .dir-author .dir-chip { font-size: 14px; }
/* About and "what they write": soft panels, no border, no shadow. */
.dir-page .dir-panels { margin-top: 34px; gap: 16px; }
.dir-page .dir-panel { padding: 22px; border: 0; border-radius: 22px; background: var(--soft); box-shadow: none; }
.dir-page .dir-panel h2 { margin-bottom: 12px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.dir-page .dir-panel h2:not(:lang(bn)) { font-family: var(--sans); }
.dir-page .dir-panel a.dir-chip { background: #fff; }
.dir-page .dir-panel a.dir-chip:hover { background: var(--accent-tint); }
.dir-page .dir-prose { font-size: 15px; line-height: 1.7; color: var(--body); }
html.bn .dir-page .dir-prose { font-size: 16px; line-height: 1.85; }
@media (max-width: 560px) {
  .dir-page .dir-panel { padding: 18px; }
}
/* ================================================================== series */
/* The index: the home's series cards (three spines, the name, the count). */
.dir-page .dir-series-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.dir-page .dir-series-list > a { flex-direction: column; align-items: stretch; gap: 4px; min-height: 124px; padding: 16px 16px 14px; border: 0; border-radius: var(--r-card); background: var(--soft); transition: background-color .18s var(--ease-out); }
.dir-page .dir-series-list > a:hover { border: 0; background: var(--accent-tint); color: var(--ink); }
.dir-page .dir-series-list > a > svg { display: none; }
.dir-page .dir-series-list .app-set__spines { margin-bottom: 8px; }
.dir-page .dir-series-list__text { flex: 1 1 auto; gap: 4px; }
.dir-page .dir-series-list .rows__grow { font-size: 14.5px; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dir-page .dir-series-list .rows__side { margin-top: auto; font-size: 12.5px; font-weight: 500; color: var(--muted); }
html.bn .dir-page .dir-series-list .rows__grow { font-size: 15.5px; line-height: 1.45; }
@media (max-width: 560px) {
  .dir-page .dir-series-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dir-page .dir-series-list > a { min-height: 118px; padding: 14px 14px 12px; }
}
@media (max-width: 359px) {
  .dir-page .dir-series-list { grid-template-columns: minmax(0, 1fr); }
  .dir-page .dir-series-list > a { min-height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .dir-page .dir-series-list > a { transition: none; }
}
/* A series page: a warm panel with the same three spines above the name. */
.dir-page .dir-series-hero { margin-top: 6px; padding: 26px 20px 22px; border-radius: var(--r-panel); background: var(--warm); color: var(--ink); }
.dir-page .dir-series-hero::before {
  content: ""; display: block; width: 32px; height: 30px; margin-bottom: 14px;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 4px / 9px 26px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 12px 0 / 9px 30px no-repeat,
    linear-gradient(#FDBA74, #FDBA74) 24px 8px / 9px 22px no-repeat;
}
.dir-page .dir-series-hero h1 { font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.dir-page .dir-series-hero h1:not(:lang(bn)) { font-family: var(--sans); font-weight: 800; font-size: 28px; }
.dir-page .dir-series-hero p { margin-top: 10px; font-size: 14.5px; font-weight: 600; color: var(--body); }
.dir-page .dir-series-about { margin: 22px 0 0; max-width: 68ch; font-size: 15.5px; line-height: 1.7; color: var(--body); text-wrap: pretty; }
html.bn .dir-page .dir-series-about { font-size: 16px; line-height: 1.85; }
@media (min-width: 761px) {
  .dir-page .dir-series-hero { padding: 40px; }
  .dir-page .dir-series-hero h1, .dir-page .dir-series-hero h1:not(:lang(bn)) { font-size: 36px; }
}
@media (min-width: 1024px) {
  .dir-page .dir-series-hero { padding: 44px 56px; }
  .dir-page .dir-series-hero h1, .dir-page .dir-series-hero h1:not(:lang(bn)) { font-size: 40px; }
}
html.bn .dir-page .dir-series-hero h1 { font-weight: 700; letter-spacing: 0; line-height: 1.35; }
/* Reading order: white rows on a soft panel, the number in a warm circle. */
.dir-page .dir-order { display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 0; border-radius: 22px; background: var(--soft); }
.dir-page .dir-order > a { min-height: 60px; padding: 10px 14px; border: 0; border-radius: 16px; background: #fff; }
.dir-page .dir-order > a:hover { background: var(--accent-tint); }
.dir-page .dir-order > a > svg:last-child { color: var(--muted); }
.dir-page .dir-order__n { width: 36px; height: 36px; background: var(--accent-tint); color: var(--accent-deep); font-size: 13px; font-weight: 800; }
.dir-page .dir-order__text b { font-size: 14.5px; }
/* ================================================================== audiobooks */
/* The home's audiobook card: the cover's soft shadow, the orange play mark, two-line titles. */
.ls-grid--audio .audio-card { position: relative; }
.ls-grid--audio .audio-card .cover { border-radius: var(--r-cover); background: #EEEEF2; box-shadow: var(--shadow-cover); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.ls-grid--audio .audio-card .play-mark { left: 8px; bottom: 8px; width: 36px; height: 36px; background: var(--accent); box-shadow: 0 6px 14px rgba(26, 29, 41, .3); }
.ls-grid--audio .audio-card .play-mark svg { fill: var(--ink); }
.ls-grid--audio .audio-card .t { margin-top: 12px; font-size: 14px; font-weight: 700; line-height: 1.3; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ls-grid--audio .audio-card .a { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.ls-grid--audio .audio-card .d { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--audio); }
.ls-grid--audio .audio-card:hover .t { color: var(--accent-deep); }
@media (hover: hover) {
  .ls-grid--audio .audio-card:hover .cover { transform: translateY(-4px); box-shadow: var(--shadow-cover-up); }
}
@media (prefers-reduced-motion: reduce) {
  .ls-grid--audio .audio-card .cover { transition: none; transform: none !important; }
}
html.bn .ls-grid--audio .audio-card .t { font-size: 15px; line-height: 1.55; }
/* ================================================================== download help */
.dl-hero__title { max-width: 13em; }
.dl-lede { margin: 4px 0 0; max-width: 68ch; font-size: 15px; line-height: 1.65; color: var(--body); text-wrap: pretty; }
@media (max-width: 1023px) {
  .devices__row:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.devices__row { padding: 16px 18px; border: 0; border-radius: 18px; background: var(--soft); }
.devices__row dt { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.devices__row dd { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--body); }
.devices__row strong { color: var(--accent-deep); font-weight: 800; }
.dl-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.dl-grid { margin-top: 12px; }
.dl-pills { margin-top: 8px; }
html.bn .dl-lede, html.bn .devices__row dd { font-size: 15px; line-height: 1.75; }
html.bn .devices__row dt { font-size: 15.5px; }
/* ================================================================== last: scroll rows */
/* Last in the file so no page rule above undoes it. Phones: a row of choices scrolls
   sideways inside itself, bleeding to the screen edge like
   the home's subject pills; the page itself never scrolls sideways. */
@media (max-width: 760px) {
  .ls-tabs, .dir-page .az, .ls-filter__group {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    margin-right: calc(var(--gutter) * -1); margin-left: calc(var(--gutter) * -1);
    padding: 4px var(--gutter) 6px; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .ls-tabs::-webkit-scrollbar, .dir-page .az::-webkit-scrollbar, .ls-filter__group::-webkit-scrollbar { display: none; }
  .ls-tabs > *, .dir-page .az > *, .ls-filter__group > * { flex: 0 0 auto; }
}
/* A 320px phone: the numbered pager keeps one row (six 44px circles) by leaving out the
   ellipsis, which is decoration; the page numbers themselves still say where the gap is. */
@media (max-width: 359px) {
  .ls-pages .ls-pager { gap: 4px; }
  .ls-pages .ls-pager span.disabled:not(:first-child):not(:last-child) { display: none; }
}
.dl-note { line-height: 1.55; }
html.bn .ls-head .btn[data-global-search] { font-size: 14.5px; font-weight: 600; }
html.bn .ls-filter__title, html.bn .ls-tabs__label { font-size: 14px; }
/* A phone keeps the decorative mark smaller than a real photo, so the name and facts sit
   higher on the first screen; a real portrait keeps its 112px. */
@media (max-width: 760px) {
  .dir-page .dir-author .dir-portrait--fallback { width: 88px; height: 88px; }
}

/* ================================================================== f3 list pages */
/* The final design f3 (Claude Design package 2026-09-29, "9-2 Source - English site",
   pages 2-02 to 2-12), installed exactly: search, the book lists, genres, one genre, authors,
   one author, series and audiobooks. Every value below is the design's own (bde-site.js S.*,
   L.*, sr2.*, authorsDir, subjectsDir, au, sr). Every class starts with fl- and builds on
   bde-f2.css (tokens, f2-wrap, f2-crumbs, the book card). The older ls-/dir- rules above
   are not used by any f3 page. */

/* ------------------------------------------------------------------ page frame */
.fl-page { display: flex; flex-direction: column; min-width: 0; padding-top: 14px; }
/* A catalogue search that will load the finder's books below keeps one screen of room, so a short
   page (no result) never shows the footer that the late block then pushes away (UI review
   2026-10-21: layout shift 0.23 at 1440 px). Nothing above the slot moves either way. */
.fl-page:has(> [data-search-ai]) { min-height: calc(100vh - var(--f2-header-h)); min-height: calc(100svh - var(--f2-header-h)); }
@media (min-width: 768px) { .fl-page { padding-top: 28px; } }
.fl-page > .f2-crumbs { margin: 0; }
.fl-head { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; min-width: 0; }
.fl-h1 {
  margin: 0; font-family: var(--f2-display); font-size: clamp(30px, 4vw, 44px); font-weight: 800;
  line-height: 1.05; letter-spacing: -1px; color: var(--f2-ink); overflow-wrap: anywhere; text-wrap: balance;
}
.fl-h1:lang(bn), html.bn .fl-h1 { letter-spacing: 0; line-height: 1.3; }
.fl-lead { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.55; color: var(--f2-muted); }
.fl-lead a { font-weight: 700; color: var(--f2-link); text-decoration: none; }
.fl-lead a:hover { color: var(--f2-link-hover); }
.fl-about { max-width: 64ch; font-size: 16px; line-height: 1.6; color: var(--f2-body); }
.fl-about p { margin: 0 0 .7em; }
.fl-about p:last-child { margin-bottom: 0; }
.fl-h2 {
  margin: 0; font-family: var(--f2-display); font-size: clamp(20px, 2.2vw, 24px); font-weight: 700;
  line-height: 1.25; letter-spacing: -.4px; color: var(--f2-ink);
}
.fl-h2:lang(bn), html.bn .fl-h2 { letter-spacing: 0; line-height: 1.45; }
.fl-h2--mb { margin-bottom: 14px; }
.fl-section__pager:not(:empty) { margin-top: 24px; }
.fl-people-section .fl-people { margin-top: 14px; }
.fl-h3 { margin: 0 0 10px; font-family: var(--f2-display); font-size: 17px; font-weight: 700; color: var(--f2-ink); }
.fl-section { margin-top: 28px; min-width: 0; }
.fl-section--32 { margin-top: 32px; }
.fl-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.fl-section-head .fl-h2 { flex: 1 1 auto; min-width: 0; }
.fl-section__note { font-size: 14px; color: var(--f2-muted); }
/* The author page holds the heading row as first drawn (pages/author.blade.php, full audit
   2026-10-20): on a Bengali phone the Bengali font arrives after the first paint and is narrower or
   wider than the phone's own, and the note used to jump beside the heading or under it, moving the
   books below. */
@media (max-width: 767px) {
  .fl-section-head.is-inline { flex-wrap: nowrap; }
  .fl-section-head.is-inline .fl-section__note { flex: 0 1 auto; min-width: 0; }
  .fl-section-head.is-stacked .fl-section__note { flex-basis: 100%; }
}
.fl-page .ad { margin: 20px 0 0; }

/* The list switch (All books, Popular, New) and the design's pill look. */
.fl-seg {
  display: flex; gap: 4px; width: max-content; max-width: 100%; margin-top: 16px; padding: 5px; overflow-x: auto;
  border-radius: 18px; background: var(--f2-surface); box-shadow: var(--f2-shadow-card); scrollbar-width: none;
}
.fl-seg::-webkit-scrollbar { display: none; }
.fl-seg > a {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 44px; padding: 0 18px;
  border-radius: 14px; color: var(--f2-sub); font-size: 14.5px; font-weight: 700; white-space: nowrap; text-decoration: none;
}
.fl-seg > a:hover { background: var(--f2-hover); color: var(--f2-ink); }
.fl-seg > a[aria-current] { background: var(--f2-coral); color: #fff; }

/* A row of pills (S.scroll): scrolls sideways on a phone, wraps on a wider screen. */
.fl-scroll {
  display: flex; gap: 12px; margin: 0 calc(var(--f2-gutter) * -1); padding: 4px var(--f2-gutter) 10px;
  overflow-x: auto; scrollbar-width: none; list-style: none;
}
.fl-scroll::-webkit-scrollbar { display: none; }
.fl-scroll > li { flex: 0 0 auto; }
@media (min-width: 768px) { .fl-scroll { flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; overflow: visible; } }
.fl-related { margin-top: 14px; }
.fl-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--f2-surface); color: var(--f2-sub); font-size: 14px; font-weight: 600; white-space: nowrap;
  text-decoration: none; box-shadow: 0 6px 16px -12px rgba(80, 40, 25, .4);
}
.fl-pill:hover { color: var(--f2-coral-dark); }
.fl-pill--ink { color: var(--f2-ink); }
.fl-pill--count { padding: 0 16px 0 6px; color: var(--f2-ink); }
.fl-pill__n { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; border-radius: 999px; background: var(--f2-hover); color: var(--f2-sub); font-size: 12.5px; font-weight: 700; }
.fl-soft {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--f2-line);
  border-radius: 999px; background: var(--f2-soft); color: var(--f2-ink); font-size: 14px; font-weight: 600; text-decoration: none;
}
.fl-soft:hover { border-color: var(--f2-coral); color: var(--f2-coral-dark); }

/* ------------------------------------------------------------------ the listing (L) */
/* Filters beside the books on a wider screen (250 px), a bottom sheet on a phone. */
.fl-listing { margin-top: 16px; min-width: 0; }
@media (min-width: 768px) {
  .fl-listing { margin-top: 24px; }
  .fl-listing--filters { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
}
.fl-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fl-main > .ad { margin: 0; }

.fl-filters { display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 768px) {
  /* Beside the books the panel is always shown: the hidden attribute is only the phone
     sheet's closed state (bde-f2.js), so it is overruled here. */
  .fl-filters, .fl-filters[hidden] {
    position: sticky; top: 92px; display: flex !important; padding: 18px; border-radius: 24px;
    background: var(--f2-surface); box-shadow: var(--f2-shadow-card);
  }
  .fl-filters__phone { display: none !important; }
  /* A ticked box applies at once where the script runs; without it, "Show results" does. */
  .fl-js .fl-filters .fl-filters__show { display: none; }
}
@media (max-width: 767px) {
  .fl-filters[hidden] { display: none; }
  .fl-filters {
    position: fixed; right: 0; left: 0; bottom: 0; z-index: var(--f2-z-sheet); max-height: 85vh; overflow-y: auto;
    padding: 8px 18px 18px; border-radius: 26px 26px 0 0; background: var(--f2-surface); box-shadow: 0 -20px 50px rgba(34, 26, 23, .25);
  }
}
.fl-filters__handle { display: block; width: 40px; height: 5px; margin: 2px auto 0; border-radius: 99px; background: var(--f2-field); }
.fl-filters__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fl-filters__title { margin: 0; font-family: var(--f2-display); font-size: 20px; font-weight: 700; }
.fl-filters__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--f2-hover); color: var(--f2-ink); cursor: pointer; }
.fl-group { min-width: 0; margin: 0; padding: 0 0 14px; border: 0; border-bottom: 1px solid var(--f2-line); }
.fl-group__legend { padding: 0; margin-bottom: 6px; font-family: var(--f2-display); font-size: 15px; font-weight: 700; color: var(--f2-ink); }
.fl-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14.5px; color: var(--f2-body); cursor: pointer; }
.fl-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--f2-coral); }
.fl-check span { min-width: 0; overflow-wrap: anywhere; }
.fl-group__more > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--f2-coral); font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.fl-group__more > summary::-webkit-details-marker { display: none; }
.fl-group__more > summary .fl-group__more-close { display: none; }
.fl-group__more[open] > summary .fl-group__more-open { display: none; }
.fl-group__more[open] > summary .fl-group__more-close { display: inline; }
.fl-filters__acts { display: flex; gap: 8px; }
.fl-filters__acts > * {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 12px;
  border-radius: 14px; font: 700 15px/1 var(--f2-ui); text-decoration: none; cursor: pointer;
}
.fl-filters__clear { border: 1.5px solid var(--f2-field); background: var(--f2-surface); color: var(--f2-ink); }
.fl-filters__clear:hover { border-color: var(--f2-coral); color: var(--f2-ink); }
.fl-filters__show { border: 0; background: var(--f2-coral); color: #fff; }
.fl-filters__show:hover { background: var(--f2-coral-dark); }

/* The bar above the books: count, sort, grid or list. */
.fl-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: 18px;
  background: var(--f2-surface); box-shadow: var(--f2-shadow-card);
}
.fl-bar__filters {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; margin-right: -8px; padding: 0 14px;
  border: 1.5px solid var(--f2-field); border-radius: 14px; background: var(--f2-surface); color: var(--f2-ink);
  font: 700 14px/1 var(--f2-ui); cursor: pointer;
}
@media (min-width: 768px) { .fl-bar__filters { display: none; } }
.fl-bar__count { margin: 0; font-size: 14px; font-weight: 700; color: var(--f2-sub); }
.fl-bar__space { flex: 1; }
.fl-bar__sort { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--f2-muted); }
.fl-bar__sort select {
  height: 44px; padding: 0 10px; border: 1.5px solid var(--f2-field-edge); border-radius: 12px; background: var(--f2-surface);
  font: 700 14px/1.2 var(--f2-ui); color: var(--f2-ink); max-width: 100%;
}
.fl-bar__apply { height: 44px; padding: 0 14px; border: 1.5px solid var(--f2-field); border-radius: 12px; background: var(--f2-surface); font: 700 14px/1 var(--f2-ui); color: var(--f2-ink); cursor: pointer; }
.fl-view { display: flex; gap: 2px; padding: 3px; border-radius: 14px; background: var(--f2-soft); }
.fl-view button {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 11px;
  background: transparent; color: var(--f2-sub); cursor: pointer;
}
.fl-view button[aria-pressed="true"] { background: var(--f2-coral); color: #fff; }
.fl-chosen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fl-chosen a { gap: 8px; }

/* ------------------------------------------------------------------ book grids and rows */
/* S.grid: two across on a phone, cards of at least 150 px above it. */
.grid-books.fl-grid, .fl-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; margin: 0; padding: 0; list-style: none;
}
@media (min-width: 768px) { .grid-books.fl-grid, .fl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 20px; } }
.fl-item { min-width: 0; }
.fl-item > .book-card { height: 100%; }
/* A line under the card (a rank, a first-published year) sits right under the author: the card keeps its own height there, or it fills the item and pushes the line down to the next row. */
.fl-item:has(> .fl-item__year) > .book-card { height: auto; }
.fl-grid .fl-item__chips { display: none; }
.fl-item__year { display: block; margin-top: 3px; font-size: 13px; color: var(--f2-muted); }

/* The list view (L.rows): a white row, the cover 60 x 90, the title, the author, the formats.
   The card's own parts are placed on the row's grid, so its one stretched link still covers
   the whole row. */
.fl-grid[data-view="list"] { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.fl-grid[data-view="list"] > .fl-item {
  position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; align-content: center;
  column-gap: 14px; row-gap: 4px; padding: 12px; border-radius: 22px; background: var(--f2-surface); box-shadow: var(--f2-shadow-card);
}
.fl-grid[data-view="list"] > .fl-item > .book-card.f2-card { display: contents; }
.fl-grid[data-view="list"] .f2-card .f2-card__cover { grid-column: 1; grid-row: 1 / span 4; align-self: center; width: 60px; height: 90px; aspect-ratio: auto; border-radius: 10px; box-shadow: none; }
.fl-grid[data-view="list"] .f2-card .f2-card__badge { display: none; }
.fl-grid[data-view="list"] .book-card.f2-card .book-title.f2-card__title { grid-column: 2; margin: 0; font-size: 16.5px; line-height: 1.25; }
.fl-grid[data-view="list"] .book-card.f2-card .book-card__link::after { border-radius: 22px; }
.fl-grid[data-view="list"] .book-card.f2-card .book-author.f2-card__author { grid-column: 2; margin: 0; font-size: 13.5px; }
.fl-grid[data-view="list"] .fl-item__year { grid-column: 2; margin: 0; }
.fl-grid[data-view="list"] .fl-item__chips { display: flex; grid-column: 2; }
.fl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fl-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--f2-audio-tint); color: var(--f2-audio-ink); }
.fl-chip--pdf { background: var(--f2-t0-bg); color: var(--f2-t0-fg); }
.fl-chip--epub { background: var(--f2-t3-bg); color: var(--f2-t3-fg); }

/* Reading order: the dark "Book N" tag above a card. */
.fl-order { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fl-order__n { align-self: flex-start; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--f2-ink); color: #fff; font-size: 12.5px; font-weight: 700; }
.fl-audio-card__len { margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--f2-audio-ink); }
/* The recording's reader, under the author in the author line's quiet look; one line, cut short. */
.book-card.f2-card .fl-audio-card__narrator { margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12.5px; line-height: normal; color: var(--f2-muted); }
/* The audiobook card's second action (the listening page), in the design's audio tag look. It
   sits above the title's stretched link (z-index 2), so a tap on it opens the player and a tap
   anywhere else on the card opens the book page. */
.book-card.f2-card .fl-audio-card__listen { position: relative; z-index: 3; align-self: flex-start; min-height: 32px; margin-top: 8px; padding: 0 12px; text-decoration: none; }
.book-card.f2-card .fl-audio-card__listen:hover { background: var(--f2-audio); color: #fff; }
.book-card.f2-card .fl-audio-card__listen:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: 2px; }
/* The tag stays 32 px tall as drawn; an invisible layer gives it a 44 px tap area (UI audit
   2026-10-04), over the card's own space, so the card looks the same. */
.book-card.f2-card .fl-audio-card__listen::before { content: ""; position: absolute; right: 0; left: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.fl-grid[data-view="list"] .book-card.f2-card .fl-audio-card__len,
.fl-grid[data-view="list"] .book-card.f2-card .fl-audio-card__narrator,
.fl-grid[data-view="list"] .book-card.f2-card .fl-audio-card__listen { grid-column: 2; margin-top: 0; }
.fl-grid[data-view="list"] .fl-audio-card:has(.fl-audio-card__narrator) .f2-card__cover { grid-row: 1 / span 5; }

.fl-empty { padding: 36px; border-radius: 24px; background: var(--f2-surface); text-align: center; color: var(--f2-sub); box-shadow: var(--f2-shadow-card); }
.fl-empty a { font-weight: 700; color: var(--f2-link); }

/* ------------------------------------------------------------------ numbered pages */
.fl-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.fl-pager > a, .fl-pager > span {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 14px;
  background: var(--f2-surface); color: var(--f2-ink); font-weight: 700; text-decoration: none;
}
.fl-pager > a:hover { color: var(--f2-coral-dark); }
.fl-pager > [aria-current="page"], .fl-pager > [aria-current="page"]:hover { background: var(--f2-coral); color: #fff; }
.fl-pager > .fl-pager__gap { min-width: 32px; padding: 0; background: transparent; color: var(--f2-muted); }
.fl-pager > .fl-pager__step { padding: 0 16px; color: var(--f2-coral); }
.fl-pager > .fl-pager__n--off { color: var(--f2-muted); }

/* ------------------------------------------------------------------ search (2-02, 2-02b) */
.fl-search { display: flex; flex-direction: column; gap: 14px; }
.fl-searchbox { position: relative; display: flex; gap: 8px; max-width: 720px; margin: 0; }
.fl-searchbox__field {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px;
  border-radius: 18px; background: var(--f2-surface); box-shadow: var(--f2-shadow-card); color: var(--f2-muted);
}
.fl-searchbox__field svg { flex: 0 0 auto; }
.fl-searchbox__field:focus-within { box-shadow: var(--f2-shadow-card), 0 0 0 3px var(--f2-accent); }
.fl-searchbox__field input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; outline: none; box-shadow: none;
  font: 400 16px/1.2 var(--f2-ui); color: var(--f2-ink);
}
.fl-searchbox__field input::placeholder { color: var(--f2-muted); opacity: 1; }
.fl-searchbox__field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.fl-searchbox__go { height: 56px; padding: 0 20px; border: 0; border-radius: 18px; background: var(--f2-coral); color: #fff; font: 700 16px/1 var(--f2-ui); cursor: pointer; }
.fl-searchbox__go:hover { background: var(--f2-coral-dark); }
.fl-search__title { margin: 0; font-family: var(--f2-display); font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.6px; line-height: 1.15; color: var(--f2-ink); overflow-wrap: anywhere; }
.fl-search__title:lang(bn), html.bn .fl-search__title { letter-spacing: 0; line-height: 1.35; }
.fl-search__scope { margin: 0; font-size: 14px; color: var(--f2-muted); }
.fl-search__scope a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--f2-link); text-decoration: none; }
.fl-sgroup { margin-top: 18px; }
.fl-sgroup--books { margin-top: 22px; }
/* The finder's books under a catalogue search (AI library plan 2026-10-09): the same group, the
   AI chip sits on the heading's line, the note keeps its 12px rhythm above the cards. */
.fl-sgroup--ai { margin-top: 28px; }
.fl-sgroup--ai .fl-h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; text-wrap: balance; }
.fl-sgroup--ai .fl-chip--ai { min-height: 22px; padding: 0 7px; font-family: var(--f2-ui); letter-spacing: 0.02em; }
.fl-note--ai { margin: 0 0 12px; }
.fl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.fl-card {
  display: flex; align-items: center; gap: 12px; height: 100%; box-sizing: border-box; padding: 12px; border-radius: 20px;
  background: var(--f2-surface); box-shadow: var(--f2-shadow-card); color: var(--f2-ink); text-decoration: none;
}
.fl-card:hover { color: var(--f2-ink); box-shadow: 0 16px 32px -18px rgba(80, 40, 25, .55); }
.fl-card__text { display: flex; flex-direction: column; min-width: 0; }
.fl-card__text b { font-size: 15.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fl-card__text b:lang(bn) { line-height: 1.5; }
.fl-card__text span { font-size: 13.5px; color: var(--f2-muted); }
.fl-ic { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; }
.fl-ic img.f2-avatar, .fl-ic img.f2-avatar[width][height] { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: none; }
.fl-ic--t0 { background: var(--f2-t0-bg); } .fl-ic--t1 { background: var(--f2-t1-bg); } .fl-ic--t2 { background: var(--f2-t2-bg); }
.fl-ic--t3 { background: var(--f2-t3-bg); } .fl-ic--t4 { background: var(--f2-t4-bg); } .fl-ic--t5 { background: var(--f2-t5-bg); }
.fl-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.book-card.fl-result {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto auto;
  column-gap: 14px; row-gap: 4px; align-content: center; align-items: center; min-width: 0; margin: 0;
  padding: 12px; border: 0; border-radius: 22px; background: var(--f2-surface); box-shadow: var(--f2-shadow-card);
}
.fl-result__cover {
  position: relative; grid-column: 1; grid-row: 1 / span 3; display: block; width: 64px; height: 96px; overflow: hidden;
  container-type: inline-size; border-radius: 12px; background: var(--f2-loading);
}
.fl-result__cover img, .fl-result__cover img[width][height] { display: block; width: 100%; height: 100%; object-fit: cover; }
.fl-result__title {
  grid-column: 2; align-self: end; display: block; font-family: var(--f2-read); font-size: 16.5px; font-weight: 600;
  line-height: 1.25; color: var(--f2-ink); text-decoration: none; overflow-wrap: anywhere;
}
.fl-result__title:lang(bn) { line-height: 1.5; }
.fl-result__title:hover { color: var(--f2-coral-dark); }
.fl-result__title::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.fl-result__title:focus-visible { outline: none; }
.fl-result__title:focus-visible::after { outline: 3px solid var(--f2-accent); outline-offset: 2px; }
.fl-result__meta { grid-column: 2; font-size: 13.5px; color: var(--f2-muted); }
.fl-result__chips { grid-column: 2; align-self: start; }
.fl-none {
  display: flex; flex-direction: column; gap: 12px; margin-top: 22px; padding: clamp(24px, 4vw, 40px);
  border-radius: 26px; background: var(--f2-surface); box-shadow: var(--f2-shadow-card);
}
.fl-none__title { margin: 0; font-family: var(--f2-display); font-size: 20px; font-weight: 700; color: var(--f2-ink); }
.fl-none__text { margin: 0; font-size: 15.5px; color: var(--f2-sub); }
.fl-none .fl-chips-soft { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fl-none__request { margin: 0; font-size: 15.5px; color: var(--f2-sub); }
.fl-none__request :is(a, button) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--f2-link); }

/* ------------------------------------------------------------------ genres (2-07, 2-08) */
.fl-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.fl-genre { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: 26px; background: var(--f2-surface); box-shadow: var(--f2-shadow-card); }
.fl-genre__head { position: relative; display: flex; align-items: center; gap: 14px; color: var(--f2-ink); text-decoration: none; }
/* The group link is 30 px tall; its tap area reaches 44 px without moving the card (UI review 2026-10-21). */
.fl-genre__head::before { content: ""; position: absolute; right: 0; left: 0; top: 50%; min-height: 100%; height: 44px; transform: translateY(-50%); }
.fl-genre__head:hover { color: var(--f2-coral-dark); }
.fl-genre__head b { flex: 1; min-width: 0; font-family: var(--f2-display); font-size: 19px; overflow-wrap: anywhere; }
.fl-genre__head b:lang(bn) { line-height: 1.45; }
.fl-genre__mark { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 18px; font-family: var(--f2-display); font-size: 18px; font-weight: 800; }
.fl-genre__subs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fl-genre__subs a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px; border: 1px solid var(--f2-line); border-radius: 999px;
  background: var(--f2-soft); color: var(--f2-sub); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.fl-genre__subs a:hover { border-color: var(--f2-coral); color: var(--f2-coral-dark); }
.fl-tint-0 { background: var(--f2-t0-bg); color: var(--f2-t0-fg); } .fl-tint-1 { background: var(--f2-t1-bg); color: var(--f2-t1-fg); }
.fl-tint-2 { background: var(--f2-t2-bg); color: var(--f2-t2-fg); } .fl-tint-3 { background: var(--f2-t3-bg); color: var(--f2-t3-fg); }
.fl-tint-4 { background: var(--f2-t4-bg); color: var(--f2-t4-fg); } .fl-tint-5 { background: var(--f2-t5-bg); color: var(--f2-t5-fg); }

/* ------------------------------------------------------------------ authors (2-09, 2-10) */
.fl-authors-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 14px; }
.fl-authors-head .fl-lead { margin-top: 6px; }
.fl-find { flex: 0 1 380px; min-width: min(100%, 280px); display: flex; margin: 0; }
.fl-find label {
  flex: 1; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 16px;
  background: var(--f2-surface); box-shadow: var(--f2-shadow-card); color: var(--f2-muted);
}
.fl-find label:focus-within { box-shadow: var(--f2-shadow-card), 0 0 0 3px var(--f2-accent); }
.fl-find input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; outline: none; box-shadow: none; font: 400 16px/1.2 var(--f2-ui); color: var(--f2-ink); }
.fl-find input::placeholder { color: var(--f2-muted); opacity: 1; }
.fl-letters { margin-top: 16px; }
.fl-letter {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 14px;
  background: var(--f2-surface); color: var(--f2-sub); font-size: 14px; font-weight: 700; text-decoration: none;
}
.fl-letter:hover { color: var(--f2-ink); }
.fl-letter[aria-current] { background: var(--f2-coral); color: #fff; }
.fl-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }

/* One author: the night header. */
.fl-author {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(18px, 3vw, 32px); margin-top: 14px;
  padding: clamp(22px, 4vw, 40px); border-radius: 28px; background: var(--f2-night); color: #fff;
}
.fl-author__portrait {
  display: grid; place-items: center; flex: 0 0 auto; width: clamp(84px, 10vw, 116px); height: clamp(84px, 10vw, 116px);
  overflow: hidden; border-radius: 50%; background: var(--f2-coral);
}
.fl-author__portrait img.f2-avatar, .fl-author__portrait img.f2-avatar[width][height] { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: none; }
.fl-author__text { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.fl-author__name { margin: 0; font-family: var(--f2-display); font-size: clamp(30px, 4vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: -1px; color: #fff; overflow-wrap: anywhere; }
.fl-author__name:lang(bn) { letter-spacing: 0; line-height: 1.3; }
.fl-author__latin { font-size: 15px; color: #D4CEF5; }
.fl-author__life { margin: 0; font-size: 15px; color: #D4CEF5; }
.fl-author__bio { max-width: 64ch; font-size: 16px; line-height: 1.65; color: #E4E0FF; }
.fl-author__bio p { margin: 0 0 .6em; }
.fl-author__bio p:last-child { margin: 0; }
.fl-author__stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
.fl-author__stats > div { padding: 10px 18px; border-radius: 16px; background: rgba(255, 255, 255, .1); }
.fl-author__stats dt { font-size: 13px; color: #D4CEF5; }
.fl-author__stats dd { margin: 2px 0 0; font-size: 19px; font-weight: 800; }
/* Bengali lines keep Hind Siliguri's own height (1.617 em: 22, 31 and 23 px at these sizes) while the
   phone's own Bengali font stands in for it, so the box does not grow when the file arrives (full
   audit 2026-10-20). The same heights as before once the font is there. */
html.bn .fl-author__stats dt { line-height: 22px; }
html.bn .fl-author__stats dd { line-height: 31px; }
html.bn .fl-section__note { line-height: 23px; }
.fl-author__stats dd a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .45); }
/* 44 px tap height for the genre link without moving the box (UI review 2026-10-21: 25 px). */
.fl-author__stats dd a { position: relative; }
.fl-author__stats dd a::before { content: ""; position: absolute; right: 0; left: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.fl-author__pd { margin: 0; max-width: 64ch; font-size: 14px; line-height: 1.55; color: var(--f2-night-soft); }
.fl-author__credit { margin: 0; max-width: 64ch; font-size: 13px; line-height: 1.5; color: var(--f2-night-soft); overflow-wrap: anywhere; }
.fl-author__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255, 255, 255, .4); }
.fl-author__credit a:hover, .fl-author__credit a:focus-visible { text-decoration-color: currentColor; }
.fl-series-link {
  display: flex; align-items: center; gap: 16px; max-width: 520px; padding: 12px; border-radius: 22px;
  background: var(--f2-surface); box-shadow: var(--f2-shadow-card); color: var(--f2-ink); text-decoration: none;
}
.fl-series-link + .fl-series-link { margin-top: 10px; }
.fl-series-link__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fl-series-link__text b { font-family: var(--f2-read); font-size: 17px; overflow-wrap: anywhere; }
.fl-series-link__text span { font-size: 13.5px; color: var(--f2-muted); }
.fl-similar > li { flex: 0 0 auto; }
.fl-similar a { width: 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--f2-ink); font-size: 13.5px; font-weight: 600; text-align: center; line-height: 1.25; text-decoration: none; overflow-wrap: anywhere; }
.fl-similar a:hover { color: var(--f2-coral-dark); }
.fl-similar small { font-size: 12.5px; font-weight: 500; color: var(--f2-muted); }
.fl-similar .fl-ic { width: 76px; height: 76px; }

/* ------------------------------------------------------------------ series (2-11) */
.fl-series {
  display: flex; flex-wrap: wrap-reverse; align-items: center; gap: clamp(20px, 4vw, 44px); margin-top: 14px;
  padding: clamp(22px, 4vw, 40px); border-radius: 28px; background: var(--f2-surface); box-shadow: var(--f2-shadow-card);
}
.fl-series__text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.fl-series__tag { align-self: flex-start; display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--f2-coral-tint); color: var(--f2-link); font-size: 13px; font-weight: 700; }
.fl-series__name { margin: 0; font-family: var(--f2-serif); font-size: clamp(30px, 4.2vw, 48px); font-weight: 600; line-height: 1.06; color: var(--f2-ink); text-wrap: balance; overflow-wrap: anywhere; }
.fl-series__name:lang(bn) { line-height: 1.35; }
.fl-series__by { margin: 0; font-size: 16px; color: var(--f2-sub); }
.fl-series__by a { font-weight: 700; color: var(--f2-link); text-decoration: none; }
.fl-series__about { margin: 0; max-width: 62ch; font-family: var(--f2-serif); font-size: 17px; line-height: 1.65; color: var(--f2-body); }
.fl-series__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.fl-series__start { display: inline-flex; align-items: center; height: 52px; padding: 0 24px; border-radius: 16px; background: var(--f2-coral); color: #fff; font-weight: 700; text-decoration: none; }
.fl-series__start:hover { background: var(--f2-coral-dark); color: #fff; }
.fl-series__cover {
  position: relative; flex: 0 0 auto; display: block; width: clamp(120px, 14vw, 170px); aspect-ratio: 2 / 3; overflow: hidden;
  container-type: inline-size; border-radius: 16px; background: var(--f2-loading); box-shadow: 0 26px 50px -18px rgba(80, 40, 25, .55);
}
.fl-series__cover img, .fl-series__cover img[width][height] { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The series index: the home's series cards in a grid. */
.fl-sets { display: flex; gap: 12px; margin: 22px calc(var(--f2-gutter) * -1) 0; padding: 4px var(--f2-gutter) 10px; overflow-x: auto; list-style: none; }
.fl-sets > li { display: flex; min-width: 0; }
@media (max-width: 767px) { .fl-sets { flex-direction: column; overflow: visible; margin-inline: 0; padding: 0; } }
@media (min-width: 768px) { .fl-sets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 22px 0 0; padding: 0; overflow: visible; } }
@media (min-width: 1100px) { .fl-sets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ Bengali */
html.bn .fl-pill, html.bn .fl-soft, html.bn .fl-check { line-height: 1.4; }
.fl-section--20 { margin-top: 20px; }
.fl-section--22 { margin-top: 22px; }
.fl-pill--on { background: var(--f2-coral); color: #fff; }
.fl-pill--on:hover { color: #fff; }
.fl-sbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
@media (min-width: 768px) { .fl-bar__filters.fl-bar__filters--all { display: inline-flex; margin-right: 0; } }
.fl-bar__filters--all { margin-right: 0; }
.fl-note { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--f2-muted); }
.fl-filters--sheet .fl-filters__acts { position: sticky; bottom: -18px; padding: 10px 0 0; background: var(--f2-surface); }
.fl-author-books .book-card.f2-card .book-author.f2-card__author { display: none; }
.fl-scroll > .fl-pill { flex: 0 0 auto; }
/* A long list of genre pills wraps at every width rather than scrolling one very long row. */
.fl-scroll.fl-scroll--wrap { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; gap: 10px; }
@media (min-width: 768px) { .fl-scroll.fl-scroll--wrap { gap: 14px; } }

/* ================================================================ blog listing */
/* A catalogue's blog (pages/blog, parity with WordPress 2026-09-30): each post as its featured
   image (16:9, the size WordPress made them) over its title, in the f2 card look (surface,
   card shadow, 20px radius) the author and search cards already use. */
.fl-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; margin: 22px 0 0; padding: 0; list-style: none; }
.fl-post {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 20px;
  background: var(--f2-surface); box-shadow: var(--f2-shadow-card); color: var(--f2-ink); text-decoration: none;
  transition: box-shadow .16s var(--f2-ease);
}
.fl-post:hover { color: var(--f2-ink); box-shadow: 0 16px 32px -18px rgba(80, 40, 25, .55); }
.fl-post:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: 2px; }
.fl-post__img { display: block; aspect-ratio: 16 / 9; background: var(--f2-loading); }
.fl-post__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fl-post__title { padding: 14px 16px 18px; font-size: 16px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; text-wrap: pretty; }
.fl-post:hover .fl-post__title { color: var(--f2-coral-dark); }
.fl-post__title:lang(bn) { line-height: 1.6; }
.fl-posts + .fl-pager { margin-top: 22px; }
@media (prefers-reduced-motion: reduce) { .fl-post { transition: none; } }

/* ================================================================ UI/UX review 2026-10-02 (slice 3)
   Homes and browsing pages, decisions D4 to D12 of bdebooks/docs/plans/laravel/UIUX-REVIEW-2026-10-02.md.
   Measured on 14 days of logs: 54% of Google visitors are on phones (BN 66%), about 8% sort or
   filter a list and popularity is the order they pick most. */

/* ---- book grids: three across on a phone, so the first books are in view at once; four on a
   tablet (three beside the filter panel); six from 1024 px (from 1280 px beside the panel), so a
   page of 36 ends on a full row. */
@media (max-width: 767px) {
  .grid-books.fl-grid:not([data-view="list"]), .fl-grid:not([data-view="list"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 10px; }
  .fl-grid:not([data-view="list"]) .f2-card .f2-card__cover { border-radius: 10px; }
  .fl-grid:not([data-view="list"]) .book-card.f2-card .book-title.f2-card__title { margin-top: 7px; font-size: 13.5px; line-height: 1.28; }
  .fl-grid:not([data-view="list"]) .book-card.f2-card .book-title.f2-card__title:lang(bn) { line-height: 1.45; }
  .fl-grid:not([data-view="list"]) .book-card.f2-card .book-author.f2-card__author { margin-top: 2px; font-size: 12px; }
  .fl-grid:not([data-view="list"]) .f2-card .f2-card__badge { top: 5px; left: 5px; height: 20px; padding: 0 7px; font-size: 10.5px; }
  .fl-grid:not([data-view="list"]) .book-card.f2-card .book-card__link::after { border-radius: 10px; }
  .fl-grid:not([data-view="list"]) .fl-item__year { font-size: 12px; }
  .fl-grid:not([data-view="list"]) .book-card.f2-card .fl-audio-card__listen { min-height: 32px; padding: 0 9px; font-size: 12px; }
  .fl-grid:not([data-view="list"]) .fl-audio-card__len { font-size: 12px; }
  .fl-grid:not([data-view="list"]) .book-card.f2-card .fl-audio-card__narrator { font-size: 11.5px; }
  /* Exactly four books (the Discover author shelf, a four-book collection): two by two, never
     three and one left alone on a row (polish 2026-10-02). */
  .fl-grid:not([data-view="list"]):has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
}
@media (min-width: 768px) {
  .grid-books.fl-grid:not([data-view="list"]), .fl-grid:not([data-view="list"]) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .fl-listing--filters .fl-grid:not([data-view="list"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fl-listing:not(.fl-listing--filters) .fl-grid:not([data-view="list"]),
  .fl-page > .fl-section .fl-grid:not([data-view="list"]) { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px 18px; }
}
@media (min-width: 1280px) {
  .fl-listing--filters .fl-grid:not([data-view="list"]) { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 16px; }
}
/* A short hub's one to three books: wide rows at every width, never a lone small card. */
.fl-grid.fl-grid--rows { max-width: 760px; }

/* ---- the bar: on a phone one compact row, Filters, the sort (the order in force), the count;
   no grid/list switch there. */
.fl-bar .fl-bar__sort, .fl-author-sort .fl-bar__sort { position: relative; gap: 0; color: var(--f2-sub); }
.fl-bar .fl-bar__sorticon, .fl-author-sort .fl-bar__sorticon { position: absolute; right: 11px; top: 50%; margin-top: -8px; pointer-events: none; }
.fl-bar .fl-bar__sort select, .fl-author-sort .fl-bar__sort select { padding-right: 34px; cursor: pointer; }
.fl-bar .fl-bar__sort select:hover, .fl-author-sort .fl-bar__sort select:hover { border-color: var(--f2-coral); }
.fl-bar .fl-bar__sort select:focus-visible, .fl-author-sort .fl-bar__sort select:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: 2px; }
/* The author page's sort, beside "Showing n of N" (owner 2026-10-06): the lists' own select. */
.fl-author-sort { display: flex; align-items: center; gap: 8px; margin: 0; }
@media (max-width: 767px) {
  .fl-author-sort { flex: 1 1 100%; }
  .fl-author-sort .fl-bar__sort { flex: 1 1 auto; min-width: 0; }
  .fl-author-sort .fl-bar__sort select { width: 100%; min-width: 0; text-overflow: ellipsis; }
}
@media (max-width: 767px) {
  .fl-bar { flex-wrap: nowrap; gap: 8px; padding: 6px; border-radius: 16px; }
  .fl-bar__filters { order: 1; flex: 0 0 auto; margin-right: 0; padding: 0 12px; }
  .fl-bar .fl-bar__sort { order: 2; flex: 0 1 auto; min-width: 0; }
  .fl-bar .fl-bar__sort select { width: 100%; min-width: 0; max-width: 46vw; text-overflow: ellipsis; }
  /* The count may take a second line rather than end in "..." (UI review 2026-10-21: "23,960 boo...",
     "118 libr..." at 390 px); the bar's 44 px controls keep its height. */
  .fl-bar__count { order: 3; flex: 1 1 auto; min-width: 0; padding-left: 8px; text-align: left; font-size: 13.5px; line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere; }
  .fl-bar__space { display: none; }
  .fl-bar > .fl-bar__count:first-child { text-align: right; padding-right: 10px; }
  .fl-bar__apply { order: 4; }
  .fl-view, .fl-view:not([hidden]) { display: none; }
  .fl-listing { margin-top: 14px; }
  .fl-main { gap: 14px; }
}

/* ---- Auto ads AdSense places inside a book grid take a whole row, never one card's cell. */
.fl-grid > .google-auto-placed, .fl-grid > ins.adsbygoogle,
.grid-books > .google-auto-placed, .grid-books > ins.adsbygoogle { grid-column: 1 / -1; width: 100%; }

/* ---- Readers' Top 100: the first ten as cards with a rank badge, the rest as compact rows. */
.fl-rank { position: absolute; top: 6px; right: 6px; z-index: 1; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 999px; background: var(--f2-ink); color: #fff; font: 800 13px/1 var(--f2-ui); box-shadow: 0 4px 10px -4px rgba(34, 26, 23, .6); }
.fl-item { position: relative; }
.fl-ranks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 8px 18px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.fl-ranks > li { min-width: 0; }
.fl-rankrow { position: relative; display: grid; grid-template-columns: 40px 44px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 66px; padding: 8px 8px 8px 12px; border-radius: 16px; background: var(--f2-surface); box-shadow: var(--f2-shadow-card); color: var(--f2-ink); text-decoration: none; }
.fl-rankrow:hover { color: var(--f2-ink); box-shadow: 0 14px 28px -16px rgba(80, 40, 25, .5); }
.fl-rankrow:hover .fl-rankrow__title { color: var(--f2-coral-dark); }
.fl-rankrow:focus-visible { outline: 3px solid var(--f2-accent); outline-offset: 2px; }
.fl-rankrow__n { justify-self: center; font: 800 15px/1 var(--f2-ui); color: var(--f2-sub); font-variant-numeric: tabular-nums; }
.fl-rankrow__cover { position: relative; display: block; width: 44px; height: 66px; overflow: hidden; container-type: inline-size; border-radius: 8px; background: var(--f2-loading); }
.fl-rankrow__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fl-rankrow__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fl-rankrow__title { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-family: var(--f2-serif); font-size: 15px; font-weight: 600; line-height: 1.3; }
.fl-rankrow__title:lang(bn) { line-height: 1.5; }
.fl-rankrow__author { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--f2-muted); }

/* ---- Series: the description folds to four lines with "Read more". */
.fl-clamp { position: relative; }
/* Folded only once the script has run (data-clamp), so without it the whole text shows. */
.fl-clamp[data-clamp]:not([data-open]) .fl-clamp__text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.fl-clamp__more { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--f2-link); font: 700 15px/1 var(--f2-ui); cursor: pointer; }
.fl-clamp__more:hover { color: var(--f2-link-hover); }
.fl-clamp__more[hidden] { display: none; }

/* ---- A short hub: the books of the wider genre under its own few. */
.fl-more-shelf .fl-grid:not([data-view="list"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 768px) { .fl-more-shelf .fl-grid:not([data-view="list"]) { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---- Genre directory: a jump list to each group, counts in place of the letter marks, and on
   a phone each group shows its six biggest genres and an "All N" that opens the rest. */
.fl-jump { margin-top: 16px; }
.fl-jump .fl-pill { min-height: 44px; }
.fl-genre { scroll-margin-top: 90px; }
.fl-genre__head .fl-genre__n { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 30px; padding: 0 11px; border-radius: 999px; background: var(--f2-hover); color: var(--f2-sub); font: 700 13px/1 var(--f2-ui); font-variant-numeric: tabular-nums; }
.fl-genre__subs a { gap: 8px; }
.fl-genre__subs a .fl-genre__subn { font-size: 12.5px; font-weight: 600; color: var(--f2-muted); font-variant-numeric: tabular-nums; }
.fl-genre__all { align-self: flex-start; display: none; align-items: center; gap: 6px; min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--f2-link); font: 700 14px/1 var(--f2-ui); text-decoration: none; cursor: pointer; }
.fl-genre__all:hover { color: var(--f2-link-hover); }
@media (max-width: 767px) {
  .fl-genre { padding: 16px; border-radius: 22px; gap: 12px; }
  .fl-genre__subs:not([data-open]) > li:nth-child(n+7) { display: none; }
  .fl-genre__all { display: inline-flex; }
  .fl-genre__subs[data-open] + .fl-genre__all { display: none; }
}

/* ---- Bangla digits and spacing: one number style in the counts. */
html.bn .fl-pill__n, html.bn .fl-genre__n, html.bn .fl-genre__subn, html.bn .fl-rankrow__n, html.bn .fl-rank { font-variant-numeric: normal; }

/* ---- Author portrait: the drawn mark (no photo) is smaller and lighter than a real photo. */
.fl-author__portrait:has(> img.f2-avatar--drawn) { width: clamp(72px, 8vw, 92px); height: clamp(72px, 8vw, 92px); background: #FFF3EE; }

@media (prefers-reduced-motion: reduce) {
  .fl-rankrow { transition: none; }
}
/* The Top 100's first ten: two across on a phone, five across above it (two full rows). */
.fl-grid.fl-grid--ten:not([data-view="list"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
@media (min-width: 768px) { .fl-page > .fl-section .fl-grid.fl-grid--ten:not([data-view="list"]) { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 20px; } }
.fl-grid--ten .fl-rank { top: 8px; right: 8px; min-width: 32px; height: 32px; font-size: 14px; }
.fl-grid.fl-grid--ten:not([data-view="list"]) .book-card.f2-card .book-title.f2-card__title { font-size: 15px; }
.fl-grid.fl-grid--ten:not([data-view="list"]) .book-card.f2-card .book-author.f2-card__author { font-size: 13px; }
/* Audiobook cards: "Listen" sits at the foot of every card in a row; on a phone's three-across
   card the length stays and the part count is left to the book page. */
.fl-grid:not([data-view="list"]) .book-card.f2-card .fl-audio-card__listen { margin-top: auto; }
.fl-grid:not([data-view="list"]) .book-card.f2-card .fl-audio-card__len { margin-bottom: 8px; }
@media (max-width: 767px) { .fl-grid:not([data-view="list"]) .fl-audio-card__parts { display: none; } }

/* ===================================================== search states
   (UI/UX review 2026-10-02, slice A; were public/css/search.css, folded in so a search page
   makes one stylesheet request fewer, polish slice F2). */
/* ------------------------------------------------ the empty search page (catalogue) */
.sr-start { display: flex; flex-direction: column; gap: 10px; }
.fl-none > .sr-start { margin-top: 6px; }
.sr-start__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--f2-ink); }
.sr-start__title:lang(bn), html.bn .sr-start__title { line-height: 1.5; }
/* A book title can be long: it wraps inside its chip instead of running off a phone. */
.fl-soft.sr-start__book { max-width: 100%; padding-top: 8px; padding-bottom: 8px; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }
html.bn .fl-soft.sr-start__book { line-height: 1.45; }
.fl-none .sr-start__browse { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--f2-line); }

/* ------------------------------------------------ nothing matched (catalogue) */
.sr-mean { margin: 0; font-size: 17px; line-height: 1.45; color: var(--f2-ink); }
.sr-mean a { font-weight: 700; color: var(--f2-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; overflow-wrap: anywhere; }
.sr-mean a:hover { color: var(--f2-link-hover, var(--f2-coral-dark)); }
.sr-near { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
/* The cards sit on the white panel, so they take the page's soft tone instead of a shadow. */
.sr-near .fl-card { background: var(--f2-soft); box-shadow: none; border: 1px solid var(--f2-line); }
.sr-near .fl-card:hover { border-color: var(--f2-coral); box-shadow: none; }