/* Split 2026-09-25 (speed on phones): only the rules two or more page families share, or that
   must keep their place in the cascade, stay here. A rule only one family uses lives in that
   family's file, public/css/family-{home,book,lists,reader,pages}.css, which each page view
   pushes after this file (layouts/site @stack('family-css')). Add a new family-only rule there;
   a rule that must beat a rule here with the same specificity has to stay here, below it. */
/*
 * BDeBooks app pilot (2026-09-25, branch app-ui-pilot): a modern phone book-app look.
 * Loaded last, after bde-v3.css, bde-v3-site.css and bde-v3-pages.css, and wins by order or
 * by one extra class. Pilot surfaces: every catalogue home, the book page and the book card;
 * the header, tab bar and footer follow them because they frame every page.
 *
 * Owner brief: clean white canvas, big real covers with soft shadows and no box, shelves that
 * scroll sideways, a pill row of subjects, round author marks, one warm orange accent.
 *
 * Colour (WCAG 2.2 AA, measured):
 *   --accent      #F97316  vivid orange, never text on white (2.80:1). Only non-text accents,
 *                          or a fill behind dark text: #1A1D29 on it is 5.99:1.
 *   --accent-ink  #C2410C  orange for text, links and fills behind white text: 5.18:1 on white,
 *                          4.78:1 on --warm, 4.80:1 on --soft.
 *   --accent-deep #9A3412  hover and text on --accent-tint: 7.31:1 on white, 6.38:1 on tint.
 *   --ink #1A1D29 16.78:1 · --body #4B5163 7.91:1 · --muted #5E6476 5.90:1 on white,
 *   5.45:1 on --warm, 5.46:1 on --soft. Field boundary #858A9A: 3.44:1 on white, 3.18:1 on --warm.
 *   Footer: #B9BDC9 on #1A1D29 8.94:1, #9DA2B0 6.57:1.
 */

:root {
  --ink: #1A1D29; --body: #4B5163; --muted: #5E6476; --sub: #4B5163;
  --line: #EEEFF2; --border: #E6E7EC; --field: #858A9A; --soft: #F6F6F8;
  --accent: #F97316; --accent-ink: #C2410C; --accent-deep: #9A3412; --accent-tint: #FFEDD5; --warm: #FFF4EC;
  /* The v3 names every other page uses, pointed at the new accent. */
  --blue: #C2410C; --blue-h: #9A3412; --blue-50: #FFEDD5;
  --audio: #6B3AB8; --audio-50: #F3ECFF; --audio-b: #E2D3FA;
  --r-cover: 10px; --r-card: 20px; --r-panel: 26px;
  --shadow-cover: 0 1px 2px rgba(26, 29, 41, .10), 0 10px 22px -8px rgba(26, 29, 41, .34);
  --shadow-cover-up: 0 2px 4px rgba(26, 29, 41, .10), 0 18px 30px -10px rgba(26, 29, 41, .40);
  --shadow-soft: 0 1px 2px rgba(26, 29, 41, .04), 0 10px 30px -12px rgba(26, 29, 41, .14);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --gutter: 16px;
  /* Phones: three covers across and the edge of a fourth, as the reference draws it. Kept
     smaller than every catalogue's heading (20,674 px2 at 390px, Portuguese), so the heading,
     not a 100-330 KB original cover, is what a slow phone's first paint is measured by. */
  --shelf-w: max(96px, calc((100vw - 52px) / 3.25)); --shelf-gap: 12px;
}
@media (min-width: 561px) { :root { --gutter: 24px; --shelf-w: 140px; --shelf-gap: 20px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; --shelf-w: 152px; --shelf-gap: 24px; } }

body { background: #fff; color: var(--ink); }
.container { padding-left: var(--gutter); padding-right: var(--gutter); }
::selection { background: var(--accent-tint); color: var(--ink); }

/* ------------------------------------------------------------------ controls */
.btn { border-radius: 999px; border-color: var(--border); font-weight: 650; transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out), transform .18s var(--ease-out); }
.btn:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.btn-primary { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn:active { transform: scale(.98); }
.btn-icon { border-radius: 50%; }
.pill { border-radius: 999px; border-color: var(--border); color: var(--ink); background: #fff; }
.pill.active { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.btn:focus-visible, .pill:focus-visible { box-shadow: 0 0 0 4px var(--accent-tint); }
@media (prefers-reduced-motion: reduce) { .btn, .btn:active { transition: none; transform: none; } }

/* ------------------------------------------------------------------ header */
.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.site-header .container { height: 60px; }
.brand { font-size: 17px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.site-header .brand:hover { color: var(--ink); }
.nav { gap: 4px; }
.nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--body); }
.nav a:hover { background: var(--soft); color: var(--ink); }
.nav a.active { padding: 0 14px; border: 0; background: var(--accent-tint); color: var(--accent-deep); font-weight: 700; }
.site-header .btn-icon { width: 40px; height: 40px; border: 0; color: var(--ink); background: transparent; }
.site-header .btn-icon:hover { background: var(--soft); color: var(--ink); }
.header-signin { height: 38px; padding: 0 16px; }
.header-join { height: 38px; padding: 0 18px; }
.header-searchbox { height: 40px; border-radius: 999px; border: 1px solid var(--field) !important; background: #fff; color: var(--muted); }
.header-searchbox input { font-size: 13.5px; }
.header-searchbox:focus-within { border-color: var(--accent-ink) !important; box-shadow: 0 0 0 4px var(--accent-tint); }
.searchbox-go { color: var(--muted); }
.mobile-menu { border-radius: 24px 0 0 24px; }
.mobile-link { border-radius: 14px; }
.mobile-link.active { background: var(--accent-tint); color: var(--accent-deep); }
.menu-close { border: 0; }

/* The phone tab bar: white, a soft lift, the current tab's icon in a warm pill. */
@media (max-width: 560px) {
  .tabbar { height: 66px; border-top: 0; box-shadow: 0 -1px 0 var(--line), 0 -8px 24px -12px rgba(26, 29, 41, .16); }
  body { padding-bottom: 66px; }
  html { scroll-padding-bottom: 82px; }
  .tabbar a { gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); }
  .tabbar a svg { box-sizing: content-box; padding: 4px 16px; border-radius: 999px; transition: background-color .2s var(--ease-out); }
  .tabbar a.active { color: var(--accent-deep); font-weight: 700; }
  .tabbar a.active svg { background: var(--accent-tint); }
  html.bn .tabbar a { font-size: 12px; }
  .toast { bottom: 150px; }
}

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--ink); color: #B9BDC9; margin-top: 56px; border-radius: 28px 28px 0 0; }
.site-footer .brand { color: #fff; }
.site-footer a { color: #B9BDC9; }
.site-footer a:hover { color: #fff; }
.site-footer .bottom { border-top-color: #2B2F3D; }
.site-footer .bottom .container { color: #9DA2B0; }
.footer-about { margin: 12px 0 0; max-width: 280px; font-size: 13px; line-height: 1.65; color: #B9BDC9; }
.footer-langs span { color: #9DA2B0; }

/* ------------------------------------------------------------------ section heads */
.app-block { margin-top: 34px; }
.app-head { display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; min-height: 44px; }
.app-head__end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.app-h2 { margin: 0; min-width: 0; font-size: 19px; font-weight: 800; letter-spacing: -.025em; line-height: 1.25; color: var(--ink); text-wrap: balance; }
.app-more { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; font-size: 13.5px; font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.app-more:hover { color: var(--accent-deep); }
.app-more span { transition: transform .2s var(--ease-out); }
.app-more:hover span { transform: translateX(3px); }
@media (min-width: 1024px) { .app-h2 { font-size: 22px; } .app-block { margin-top: 44px; } }

.app-arrows { display: inline-flex; gap: 6px; }
.app-arrows[hidden] { display: none; }
.app-arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out); }
.app-arrow:hover:not(:disabled) { border-color: var(--ink); }
.app-arrow:disabled { color: #9DA2B0; cursor: default; opacity: 1; }

/* ------------------------------------------------------------------ book card */
/* No box: the cover is the card. Title then author under it; formats as a quiet line. The
   title's link is stretched over the whole card (the tap target is the book). */
.book-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.book-card:hover { border-color: transparent; }
.book-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); }
.cover::after { box-shadow: inset 0 0 0 1px rgba(26, 29, 41, .07); }
.cover-mark { background: #EEEEF2; color: #9DA2B0; }
.book-card .book-title { margin-top: 12px; font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-card .book-author { margin-top: 3px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.book-card .tags { margin-top: 6px; gap: 0; flex-wrap: wrap; }
.book-card .tag { height: auto; padding: 0; border-radius: 0; background: none; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.book-card .tag + .tag::before { content: "·"; margin: 0 5px; color: var(--muted); }
.book-card .tag-audio { gap: 3px; color: var(--audio); }
.book-card .book-card__link::after { border-radius: 14px; }
.book-card .book-card__link:focus-visible::after { outline: 2.5px solid var(--accent-ink); outline-offset: 5px; }
.book-card:hover .book-title { color: var(--accent-deep); }
@media (hover: hover) {
  .book-card:hover .cover { transform: translateY(-4px); box-shadow: var(--shadow-cover-up); }
}
@media (prefers-reduced-motion: reduce) { .book-card .cover, .book-card:hover .cover { transition: none; transform: none; } }
html.bn .book-card .book-title { font-size: 15px; line-height: 1.55; }
html.bn .book-card .book-author { font-size: 13px; line-height: 1.5; }

/* The card grid (lists, search, subject and author pages): room for the shadows. */
.grid-books { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 22px; }
@media (max-width: 560px) {
  .grid-books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
  .grid-books .tags { display: flex; }
}
@media (min-width: 400px) and (max-width: 560px) { .grid-books { gap: 26px 18px; } }

/* ------------------------------------------------------------------ shelves */
/* A shelf scrolls sideways inside itself and never widens the page: it bleeds to the screen's
   edge through the container's own gutter. Its padding keeps the covers' shadows and the
   hover lift inside the scroll box. */
.grid-books.app-shelf__track {
  display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: var(--shelf-w);
  gap: 0 var(--shelf-gap); margin: 6px calc(var(--gutter) * -1) 0; padding: 8px var(--gutter) 18px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.app-shelf__track::-webkit-scrollbar { display: none; }
.app-shelf__track > * { scroll-snap-align: start; }
@media (max-width: 560px) { .app-shelf__track .tags { display: flex; } }

/* ------------------------------------------------------------------ home: hero */
.app-hero { margin-top: 14px; }
.app-hero__card { position: relative; overflow: hidden; isolation: isolate; padding: 26px 20px 22px; border-radius: var(--r-panel); background: var(--warm); }
.app-hero__card::before, .app-hero__card::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.app-hero__card::before { width: 240px; height: 240px; right: -90px; top: -110px; background: #FFE4CF; }
.app-hero__card::after { width: 120px; height: 120px; right: 36px; bottom: -70px; background: #FFEBDC; }
.app-hero__copy { position: relative; min-width: 0; }
.app-hero__title { margin: 0; max-width: 11.5em; font-size: 27px; font-weight: 800; line-height: 1.14; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.app-hero__lede { margin: 10px 0 0; max-width: 30em; font-size: 14.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.app-search { margin-top: 18px; display: flex; align-items: center; gap: 8px; height: 54px; padding: 0 6px 0 16px; border: 1px solid var(--field); border-radius: 999px; background: #fff; box-shadow: var(--shadow-soft); color: var(--muted); }
.app-search:focus-within { border-color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-tint), var(--shadow-soft); }
.app-search__icon { flex: 0 0 auto; }
.app-search input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 16px; font-weight: 500; color: var(--ink); }
.app-search input::placeholder { color: var(--muted); opacity: 1; }
.app-search input::-webkit-search-cancel-button { display: none; }
.app-search__go { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--accent-ink); color: #fff; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color .18s var(--ease-out); }
.app-search__go:hover { background: var(--accent-deep); }
.app-search__go:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (max-width: 359px) {
  .app-hero__card { padding: 22px 16px 18px; }
  .app-hero__title { font-size: 24px; }
  .app-search { padding-left: 12px; }
  .app-search__go { padding: 0 14px; }
}
@media (min-width: 761px) {
  .app-hero { margin-top: 20px; }
  .app-hero__card { padding: 44px 48px; }
  .app-hero__card::before { width: 420px; height: 420px; right: -80px; top: -160px; }
  .app-hero__card::after { width: 200px; height: 200px; right: 300px; bottom: -130px; }
  .app-hero__title { font-size: 38px; max-width: 11em; }
  .app-hero__lede { font-size: 16px; }
  .app-search { max-width: 540px; margin-top: 24px; height: 58px; }
  .app-search__go { height: 46px; padding: 0 24px; font-size: 15px; }
}
@media (min-width: 1024px) {
  .app-hero__card { padding: 52px 60px; }
  .app-hero__title { font-size: 44px; }
}
.app-pills { list-style: none; display: flex; gap: 8px; margin: 6px calc(var(--gutter) * -1) 0; padding: 4px var(--gutter) 6px; overflow-x: auto; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
.app-pills::-webkit-scrollbar { display: none; }
.app-pills > li { flex: 0 0 auto; }
.app-pill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; transition: background-color .18s var(--ease-out), color .18s var(--ease-out); }
.app-pill:hover { background: var(--accent-tint); color: var(--accent-deep); }
.app-pill__n { font-size: 12px; font-weight: 600; color: var(--muted); }
.app-pill:hover .app-pill__n { color: var(--accent-deep); }
.app-pill--on, .app-pill--on:hover { background: var(--accent-ink); color: #fff; font-weight: 700; }
.app-pills--wrap { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
@media (min-width: 1024px) { .app-pills { flex-wrap: wrap; margin: 6px 0 0; padding: 4px 0 6px; overflow: visible; } .app-pill { height: 42px; } }
.app-continue__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--accent); }

/* ------------------------------------------------------------------ home: authors */
.app-people__row { list-style: none; display: flex; gap: 14px; margin: 8px calc(var(--gutter) * -1) 0; padding: 4px var(--gutter) 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
.app-people__row::-webkit-scrollbar { display: none; }
.app-people__row > li { flex: 0 0 auto; scroll-snap-align: start; }
.app-person { display: flex; flex-direction: column; align-items: center; width: 88px; text-align: center; color: var(--ink); }
.app-person__mark { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #FDE7D8; color: #B4532A; transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out); }
.app-person__mark[data-tint="1"] { background: #F7E4EA; color: #A34463; }
.app-person__mark[data-tint="2"] { background: #E3F1E8; color: #3D7A53; }
.app-person__mark[data-tint="3"] { background: #E6ECF8; color: #43609A; }
.app-person__mark[data-tint="4"] { background: #F3ECDD; color: #86652A; }
.app-person:hover { color: var(--accent-deep); }
.app-person:hover .app-person__mark { transform: translateY(-2px); box-shadow: 0 10px 18px -10px rgba(26, 29, 41, .35); }
.app-person__name { margin-top: 9px; font-size: 13px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app-person__n { margin-top: 2px; font-size: 11.5px; font-weight: 500; color: var(--muted); }
@media (min-width: 1024px) { .app-people__row { gap: 22px; margin: 8px 0 0; padding: 4px 0 6px; flex-wrap: wrap; overflow: visible; } .app-person { width: 104px; } .app-person__mark { width: 84px; height: 84px; } }
@media (prefers-reduced-motion: reduce) { .app-person__mark { transition: none; } .app-person:hover .app-person__mark { transform: none; } }
html.bn .app-person__name { font-size: 14px; line-height: 1.45; }
html.bn .app-person__n { font-size: 12.5px; }
.app-set__spines { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-bottom: 8px; }
.app-set__spines i { display: block; width: 9px; border-radius: 3px; background: var(--accent); }
.app-set__spines i:nth-child(1) { height: 26px; }
.app-set__spines i:nth-child(2) { height: 30px; background: var(--ink); }
.app-set__spines i:nth-child(3) { height: 22px; background: #FDBA74; }
html.bn .app-set__name { font-size: 15px; line-height: 1.45; }
.ad { margin-top: 36px; border: 0; border-radius: var(--r-card); background: var(--soft); }
html.bn .app-h2, html.bn .app-hero__title { letter-spacing: 0; line-height: 1.4; }
html.bn .app-hero__title { font-weight: 700; }
html.bn .app-pill { font-size: 15px; }
html.bn .app-more { font-size: 14.5px; }
html.bn .app-hero__lede { font-size: 15.5px; line-height: 1.6; }
.bk-crumbs a:hover { color: var(--accent-ink); }
.bk-crumbs [aria-current] { color: var(--body); }
.app-bk .bk-title { font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; }
.app-bk .bk-subtitle { margin-top: 6px; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; color: var(--muted); }
.app-bk .bk-byline a { color: var(--accent-ink); text-decoration: none; }
.app-bk .bk-byline a:hover { color: var(--accent-deep); text-decoration: underline; }
.app-bk .bk-stats a { color: var(--accent-ink); }
@media (max-width: 359px) {
  .app-bk .bk-title { font-size: 23px; }
}
@media (min-width: 761px) {
  .app-bk .bk-title { font-size: 34px; }
}
@media (min-width: 1024px) {
  .app-bk .bk-title { font-size: 40px; }
}

.bk-toc a { border-bottom-color: var(--line); border-radius: 10px; }
.bk-toc a:hover { background: #fff; color: var(--accent-deep); }
html.bn .bk-main .h3, html.bn .bk-card__head .h3, html.bn .app-h2 { letter-spacing: 0; }

/* ================================================================== fixes after the first look */
/* A width in ch follows the font, so a title measured in ch rewraps when the web font
   replaces its fallback (a 0.078 layout shift on /bn/): hero widths are in em. */
/* Titles are the app's bold sans, not the craft pass's serif; the synopsis keeps the serif for reading. */
:root { --sans: var(--f2-ui, 'Inter Fallback', ui-sans-serif, system-ui, sans-serif); }
.book-card .book-title:not(:lang(bn)), .bk-title:not(:lang(bn)), .bk-subtitle:not(:lang(bn)), .bk-rel__title:not(:lang(bn)) { font-family: var(--sans); }
.bk-rel__title:not(:lang(bn)) { font-weight: 700; }

.site-footer .brand { font-size: 17px; font-weight: 800; }

/* Header on a laptop: the nav pills and the search box share one row without touching. */
@media (min-width: 981px) and (max-width: 1360px) {
  .nav { gap: 0; }
  .nav a, .nav a.active { padding: 0 10px; font-size: 13px; }
  .header-searchbox { width: 190px; }
}

/* A card's audio line sits under its formats, never half-wrapped after a dot. */
.book-card .tag-audio { flex-basis: 100%; margin-top: 3px; }
/* Its dot box stays, empty: the meta row is shifted left and that strip clipped
   (bde-v3-pages.css), so a line that starts without the box loses the headphones under the
   clip and "AUDIO" looks indented (measured 2026-09-25, /search?q=love on a phone). */
.book-card .book-card__meta .tag + .tag-audio::before { content: ""; margin: 0 -4px 0 0; }

/* Desktop shelves stop at the column's edge (a phone's bleed to the screen edge would look
   like a mistake on a wide page); the small inset keeps the first cover's shadow. */
@media (min-width: 1024px) {
  .grid-books.app-shelf__track { margin: 6px -12px 0; padding: 8px 12px 20px; scroll-padding-inline: 12px; }
}
.app-hero__lede { max-width: 34em; }

/* Tap targets (owner rule: 44px on phones). */
.app-search__go { height: 44px; }
.app-arrow { width: 40px; height: 40px; }

/* Phone shelf cards are narrower than grid cards: a touch smaller type, still two lines. */
@media (max-width: 560px) {
  .app-shelf__track .book-card .book-title, .bk-rels .bk-rel__title { font-size: 13.5px; }
  .app-shelf__track .book-card .book-author, .bk-rels .bk-rel__author { font-size: 12px; }
  .app-shelf__track .book-card .book-title { margin-top: 10px; }
  html.bn .app-shelf__track .book-card .book-title { font-size: 14.5px; }
}
/* A phone swipes its shelves; the arrows are for a mouse on a wider screen only. */
@media (max-width: 560px) { .app-arrows { display: none !important; } }
/* Anek Bangla draws smaller than Inter at the same size: Bengali nav and crumbs one step up. */
html.bn .nav a { font-size: 14.5px; }
html.bn .header-signin, html.bn .header-join { font-size: 14px; }
/* Tablet: a smaller fan, so the heading and the search keep the room. */
@media (min-width: 761px) and (max-width: 1023px) {
  .app-hero__card { padding: 36px 32px; }
}
.rt-search { margin: 0; }
.rt-search .app-search { margin-top: 18px; }
html.bn .rt-scope__label { font-size: 14px; }
@media (min-width: 761px) { .rt-search .app-search { margin-top: 24px; } }
html.bn .rt-head__sub { font-size: 14px; }
.rt-facts .rt-facts__list li { padding: 14px 0; border-top: 1px solid #E4E5EA; font-size: 14px; line-height: 1.6; color: var(--body); max-width: 68ch; }
.rt-facts .rt-facts__list b { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.rt-facts .rt-facts__list a { color: var(--accent-ink); font-weight: 650; }
.rt-facts .rt-facts__list a:hover { color: var(--accent-deep); }
.root-crumbs a:hover { color: var(--accent-ink); }
.root-crumbs [aria-current] { color: var(--body); font-weight: 600; }
.rt-results .root-results__title { margin: 2px 0 0; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
@media (min-width: 761px) { .rt-results .root-results__title { font-size: 34px; } }
.rt-lang:hover .rt-lang__en { color: var(--accent-deep); }
.app-pill--on .rt-lang__en, .app-pill--on:hover .rt-lang__en { color: #fff; opacity: 1; font-weight: 600; }
.rt-lang span:lang(bn) { font-size: 15px; }
.rt-lang:focus-visible, .app-pill:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.rt-notice .h3 { margin: 0; font-size: 16px; font-weight: 800; color: #8F1D14; }
.rt-state .app-h2 { font-size: 18px; }
.rt-group .root-group__english { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.rt-others .app-pill { height: 40px; font-size: 13.5px; }

/* ================================================================== shell (rollout 2026-09-25) */
/* The slide-in menu: the same pills and warm current state as the header, an ink backdrop. */
.menu-backdrop { background: rgba(26, 29, 41, .42); }
.mobile-menu { width: min(340px, 88vw); box-shadow: -24px 0 60px rgba(26, 29, 41, .22); transition: transform .26s var(--ease-out); }
.menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 20px; min-height: 64px; }
.menu-brand { font-size: 17px; }
.menu-close { width: 44px; height: 44px; background: var(--soft); color: var(--ink); }
.menu-close:hover { background: var(--accent-tint); color: var(--accent-deep); }
.menu-search { position: relative; display: flex; align-items: center; gap: 6px; margin: 2px 16px 8px; height: 50px; padding: 0 4px 0 14px; border: 1px solid var(--field); border-radius: 999px; background: #fff; }
.menu-search:focus-within { border-color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-tint); }
.menu-search__icon { flex: 0 0 auto; color: var(--muted); }
.menu-search .input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 4px; border: 0 !important; border-radius: 0; background: transparent; box-shadow: none !important; font: 500 16px/1 var(--sans); color: var(--ink); }
.menu-search .input::placeholder { color: var(--muted); opacity: 1; }
.menu-search .input:focus, .menu-search .input:focus-visible { outline: none; }
.menu-search .btn-icon { width: 42px; height: 42px; flex: 0 0 auto; }
.menu-nav { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; overflow-y: auto; }
.mobile-link { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 14px; font-size: 16px; font-weight: 700; color: var(--ink); }
.mobile-link:hover { background: var(--soft); color: var(--ink); }
.mobile-link.sub { min-height: 44px; padding: 0 14px; font-size: 14.5px; font-weight: 550; color: var(--body); }
.mobile-link.active, .mobile-link.active:hover { background: var(--accent-tint); color: var(--accent-deep); }
.menu-sep { height: 1px; margin: 8px 14px; background: var(--line); }
.menu-foot { margin-top: auto; display: flex; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.menu-foot .btn { flex: 1; height: 48px; font-size: 14.5px; }
html.bn .mobile-link { font-size: 17px; }
html.bn .mobile-link.sub { font-size: 15.5px; }
@media (prefers-reduced-motion: reduce) { .mobile-menu { transition: none; } }

/* Skip link: the accent pill, above everything, only when focused. */
.skip-link { top: -90px; left: 12px; padding: 12px 18px; border-radius: 999px; background: var(--accent-ink); color: #fff; font-size: 14px; font-weight: 700; box-shadow: none; }
.skip-link:focus { top: 10px; color: #fff; outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: var(--shadow-soft); }

/* Toast: an ink pill over the content (and over the tab bar on a phone). */
.toast { padding: 12px 20px; border-radius: 999px; background: var(--ink); font-size: 13.5px; font-weight: 600; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 16px 36px -12px rgba(26, 29, 41, .45); max-width: calc(100vw - 32px); text-align: center; }
@media (max-width: 560px) { .toast { bottom: 84px; } }

/* Footer: the root's language list as soft pills with their live counts. */
.site-footer .footer-langs ul { gap: 8px; }
.site-footer .footer-langs a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: #262A38; color: #E4E6EC; font-weight: 600; }
.site-footer .footer-langs a:hover { background: #33384A; color: #fff; }
.site-footer .footer-langs span { margin-left: 0; font-size: 12px; font-weight: 500; color: #B9BDC9; }
@media (max-width: 560px) { .site-footer .footer-langs a { min-height: 44px; } }
.site-footer a:focus-visible { outline-color: #FDBA74; }

/* Shared components still drawn in the old blue by the base stylesheet: warm neutrals here.
   Page files load after this one and may refine them. */
.input, .textarea, .select, .root-searchbar, .hero-search, .header-searchbox, .error-search input { border-color: var(--field) !important; }
.chip:hover { border-color: var(--accent-tint); background: var(--accent-tint); color: var(--accent-deep); }
.suggest a[aria-selected=true], .suggest a:hover { background: var(--accent-tint); }
.pagination a, .pagination span { border-radius: 12px; border-color: var(--border); }
.pagination a:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.pagination .disabled { color: var(--muted); }
.btn-dark { background: var(--ink); border-color: var(--ink); }
.cat-tile:hover { border-color: var(--accent-tint); }
.person:hover { background: var(--accent-tint); }
.tag-epub { color: var(--accent-deep); }
.ls-crumbs [aria-current], .dir-page .dir-crumbs [aria-current] { color: var(--body); font-weight: 600; }
.ls-tabs__n, .ls-chips__n, .dir-page .dir-chip__n, .dir-page .dir-chips .rows__side { font-size: 12px; font-weight: 600; color: var(--muted); opacity: 1; }
/* Five devices: one row of five on a laptop, two columns with the last one full width on a
   tablet, one column on a phone; never four and a lone "Computer". */
.devices { margin-top: 18px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1023px) {
  .devices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) { .devices { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* Bengali headings: Anek Bangla at 700 as the pilot sets them, no negative tracking, room
   for the vowel signs above and below. */
html.bn :is(.ls-banner.ch-flat .ls-banner__title, .dir-page .dir-hero.ch-flat h1, .ls-head__title.h1, .ls-empty__title, .dir-page .dir-head h2, .ls-others .h3, .dir-page .dir-panel h2) { font-weight: 700; letter-spacing: 0; line-height: 1.4; }

/* App-style rollout 2026-09-25 (app-reader): the chapter reader (pages/read) and the listening
   page (pages/listen) in the pilot's book-app look. Loaded after bde-app.css; overrides the v3
   reader rules in bde-v3-pages.css by order or one extra class. The PDF reader is a separate
   Vite page (resources/css/pdf-reader.css).

   Reading themes. bde-v3.js writes its own palette on #reader (--r-bg ... --r-sub) from the
   theme a reader picked; the pilot's palettes below replace it through the theme buttons'
   aria-pressed state, so the choice, its storage and its script stay exactly as they were.
   Measured (WCAG 2.2 AA):
     light  body #2E3240 on #fff 13.0:1 · sub #5E6476 5.90:1 · link #C2410C 5.18:1
     sepia  body #4A3721 on #F6EFE2 10.1:1 · sub #5C4630 7.9:1 · link #9A3412 6.4:1
     dark   body #D5D8DF on #16181F 12.6:1 · sub #A7ACB9 7.6:1 · link #FDBA74 10.6:1
   New shared tokens (this file only): --rd-bg, --rd-paper, --rd-ink, --rd-body, --rd-line,
   --rd-sub, --rd-link, --rd-tint, --rd-chrome. */

body:has(#reader) {
  --rd-bg: #fff; --rd-paper: #fff; --rd-ink: #1A1D29; --rd-body: #2E3240; --rd-line: #EEEFF2;
  --rd-sub: #5E6476; --rd-link: #C2410C; --rd-tint: #FFEDD5; --rd-chrome: #fff;
  background: var(--rd-bg);
}
body:has(#reader [data-theme="sepia"][aria-pressed="true"]) {
  --rd-bg: #F6EFE2; --rd-paper: #F6EFE2; --rd-ink: #3B2A17; --rd-body: #4A3721; --rd-line: #E6D8BF;
  --rd-sub: #5C4630; --rd-link: #9A3412; --rd-tint: #EFE1C8; --rd-chrome: #FBF6EC;
}
body:has(#reader [data-theme="dark"][aria-pressed="true"]) {
  --rd-bg: #16181F; --rd-paper: #16181F; --rd-ink: #F0F1F4; --rd-body: #D5D8DF; --rd-line: #2D313C;
  --rd-sub: #A7ACB9; --rd-link: #FDBA74; --rd-tint: rgba(249, 115, 22, .18); --rd-chrome: #1D2029;
  color-scheme: dark;
}
#reader {
  --r-bg: var(--rd-bg) !important; --r-paper: var(--rd-paper) !important; --r-ink: var(--rd-ink) !important;
  --r-body: var(--rd-body) !important; --r-line: var(--rd-line) !important; --r-sub: var(--rd-sub) !important;
  --r-top: 64px;
  background: var(--rd-bg);
}

/* In the dark theme the site's own header joins the page, so the screen is one dark surface. */
body:has(#reader [data-theme="dark"][aria-pressed="true"]) .site-header { background: var(--rd-chrome); border-bottom-color: var(--rd-line); }
body:has(#reader [data-theme="dark"][aria-pressed="true"]) .site-header :is(.brand, .btn-icon, .header-signin) { color: var(--rd-ink); }
/* The logo's dark wordmark would vanish on that surface: draw it white, like the footer's. */
body:has(#reader [data-theme="dark"][aria-pressed="true"]) .site-header .brand__logo { filter: brightness(0) invert(1); }
body:has(#reader [data-theme="dark"][aria-pressed="true"]) .site-header .nav a { color: var(--rd-sub); }
body:has(#reader [data-theme="dark"][aria-pressed="true"]) .site-header .nav a:hover,
body:has(#reader [data-theme="dark"][aria-pressed="true"]) .site-header .btn-icon:hover { background: rgba(255, 255, 255, .08); color: var(--rd-ink); }
body:has(#reader [data-theme="dark"][aria-pressed="true"]) .site-header .header-signin { background: transparent; border-color: var(--rd-line); }
body:has(#reader [data-theme="dark"][aria-pressed="true"]) .header-searchbox { background: transparent; border-color: #6B7080 !important; color: var(--rd-sub); }
body:has(#reader [data-theme="dark"][aria-pressed="true"]) .header-searchbox input { color: var(--rd-ink); }
body:has(#reader [data-theme="dark"][aria-pressed="true"]) .header-searchbox input::placeholder { color: var(--rd-sub); }
body:has(#reader [data-theme="sepia"][aria-pressed="true"]) .site-header { background: var(--rd-chrome); border-bottom-color: var(--rd-line); }
.reader-bar__title:hover { color: var(--rd-link); }
.reader-bar .btn { height: 40px; padding: 0 16px; border-color: var(--rd-line); background: transparent; color: var(--rd-ink); font-size: 13.5px; }
.reader-bar .btn-icon, .reader-bar .reader-aa { width: 40px; padding: 0; justify-content: center; }
.reader-bar .reader-aa { font-family: var(--f2-serif, 'BDe Serif', Georgia, serif); font-size: 16px !important; font-weight: 600; }
.reader-bar .btn-audio { border-color: var(--rd-line); color: var(--rd-ink); }
.reader-panel .reader-panel__label { font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--rd-sub); }
.reader-panel .btn { height: 44px; border-color: var(--rd-line); background: transparent; color: var(--rd-ink); font-size: 14px; }
.reader-panel__size .btn { width: 44px; padding: 0; justify-content: center; border-radius: 50%; }
/* Each theme button is drawn in its own colours, so the choice is seen before it is made. */
.reader-panel [data-theme="light"] { background: #fff; color: #1A1D29; border-color: #D9DBE1; }
.reader-panel [data-theme="sepia"] { background: #F6EFE2; color: #3B2A17; border-color: #E0CFB2; }
.reader-panel [data-theme="dark"] { background: #16181F; color: #F0F1F4; border-color: #16181F; }
.reader-mark { border-radius: 10px; background: var(--rd-tint); color: var(--rd-ink); }
@media (max-width: 980px) {
  #contents:target, .reader-toc.open { padding: 16px; border: 1px solid var(--rd-line); border-radius: 20px; background: var(--rd-chrome); gap: 12px; }
  body:has(#reader) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  html:has(#reader) { scroll-padding-bottom: 96px; }
}
@media (max-width: 560px) {
  body:has(#reader) .tabbar { display: none; }
}
/* A jump to the chapter list lands below the sticky bar, not under it. */
#contents, #chapter { scroll-margin-top: calc(var(--r-top) + 12px); }

/* App-style rollout 2026-09-25 (app-pages). */
/*
 * The policy pages (/about, /contact, /editorial-policy, /dmca, /terms, /privacy-policy,
 * /cookie-policy, /disclaimer), /publish-your-book and the design state pages (states/404,
 * states/500, states/removed) in the owner-approved app look. Loaded after bde-app.css, whose
 * tokens (--accent, --accent-ink, --accent-deep, --accent-tint, --warm, --soft, --ink, --body,
 * --muted, --field, --shadow-soft, --r-card, --r-panel, --gutter) it reuses; it adds none.
 *
 * Scope: .app-page--trust and .app-page--publish are body classes on those two standalone
 * documents; .app-state is the state pages' own wrapper. Nothing here reaches a catalogue page.
 * Text stays word for word (owner 2026-09-19): this file only styles it.
 *
 * Contrast (WCAG 2.2 AA, measured): --body #4B5163 on --warm #FFF4EC 7.30:1, --muted #5E6476
 * 5.45:1 on --warm, --accent-deep #9A3412 on white 7.31:1 and on --accent-tint 6.38:1,
 * --accent-ink #C2410C on white 5.18:1, white on it 5.18:1, error #B42318 on white 6.53:1.
 */

/* ---------------------------------------------------------------- shared on these pages */
:is(.app-page--trust, .app-page--publish) main { padding-bottom: 8px; }