/* Discover · Book tab (官方精选 shelf + 用户作品 grid). Split out of discover.css on 2026-10-21 so the
   activity and book redesigns do not edit the same file; loaded only by discover.html.
   Visual pass 2026-10-21 (docs/plan-discover-visual-a-20261021.md §4): community cards follow mockup A
   (docs/design-discover-visual/a-tidy/pc-books.html), the official row is mockup B's wooden shelf
   (b-gallery/pc-books.html). Every rule hangs off #discoverBooks or a .dl-* class: the bookstore and
   creator pages share discover.css and .discover-page, and must not change. */
#discoverBooks .dl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[dir=rtl] #discoverBooks .dl-flip { transform: scaleX(-1); }

/* Section heads (A): 20px titles; the shelf arrows share the 40px row */
.dl-shelf[hidden] { display: none; }
/* A hidden 官方精选 (no books, or the request failed) must not leave its gap above 用户作品 */
.dl-shelf:not([hidden]) + .dl-shelf { margin-block-start: 40px; }
.dl-shelf-head { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.dl-shelf-title { margin: 0; color: var(--rk-ink); font-family: var(--rk-font-body); font-size: 20px; font-weight: 700; line-height: 1.4; }
.dl-shelf-nav { display: flex; gap: 8px; }
.dl-shelf-step { display: grid; width: 40px; height: 40px; place-items: center; padding: 0; border: 1px solid var(--rk-line); border-radius: 50%; background: var(--rk-surface); color: var(--rk-ink); cursor: pointer; }
.dl-shelf-step svg { width: 18px; height: 18px; }
.dl-shelf-step:hover:not(:disabled) { border-color: var(--rk-ink-muted); }
.dl-shelf-step:disabled { background: transparent; color: var(--rk-ink-muted); cursor: default; }

/* 用户作品 (A): two wide cards per row (1.0 BookListNew); cover · author + title · actions, then pages */
.dl-book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-block-end: 16px; }
.dl-book { min-width: 0; overflow: hidden; border: 1px solid var(--rk-line); border-radius: var(--rk-radius); background: var(--rk-surface); box-shadow: var(--rk-shadow-card); transition: border-color 180ms ease-out; }
.dl-book:hover { border-color: var(--rk-card-hover-border); }
.dl-book-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 16px; padding: 20px 20px 0; }
/* The cover keeps the book's shape on an 88px long edge, so square and landscape books never push the
   title aside; --dl-cover-ratio comes from the API and is corrected by the picture once it loads. */
.dl-book-cover { --dl-cover-long: 88px; position: relative; display: block; width: calc(var(--dl-cover-long) * min(1, var(--dl-cover-ratio, .75))); height: calc(var(--dl-cover-long) * min(1, 1 / var(--dl-cover-ratio, .75))); overflow: hidden; border-radius: 5px; border-start-start-radius: 3px; border-end-start-radius: 3px; background: var(--rk-paper-2); box-shadow: var(--rk-shadow-card), 0 1px 2px color-mix(in srgb, var(--rk-ink) 18%, transparent); }
.dl-book-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dl-book-cover::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 5px; width: 1px; background: color-mix(in srgb, var(--rk-ink) 16%, transparent); box-shadow: 1px 0 0 color-mix(in srgb, var(--rk-surface) 40%, transparent); }
[dir=rtl] .dl-book-cover::after { box-shadow: -1px 0 0 color-mix(in srgb, var(--rk-surface) 40%, transparent); }
.dl-book-cover-empty { display: block; width: 100%; height: 100%; background: var(--book-cloth); }
.dl-book-meta { display: grid; min-width: 0; }
/* Neutral author chips on this tab (the card byline and the official panel's Readkidz byline) */
#discoverBooks .discover-book-author { display: flex; min-width: 0; min-height: 40px; align-items: center; gap: 8px; color: var(--rk-ink-soft); font-size: 16px; font-weight: 500; }
#discoverBooks .discover-book-author-avatar { width: 28px; height: 28px; flex: 0 0 28px; background: var(--rk-paper-2); color: var(--rk-ink-soft); font-size: 13px; font-weight: 700; }
/* Titles break at spaces or after "：" / "·" (<wbr>), and mid-word only when a run cannot fit. The
   two-line clamp sits on the link, not on the h3: a clipping h3 cut the link's focus ring down to a
   2px sliver, and the link is the card's keyboard entry (the cover link is out of the tab order). */
.dl-book-title { margin: 0; color: var(--rk-ink); font-size: 18px; font-weight: 700; line-height: 24px; word-break: keep-all; overflow-wrap: anywhere; }
.dl-book-title a { display: -webkit-inline-box; max-inline-size: 100%; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; vertical-align: top; color: inherit; text-decoration: none; }
.dl-book-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dl-book-actions { display: flex; align-items: center; gap: 4px; }
.dl-like, .dl-book-share { display: inline-flex; min-width: 40px; height: 40px; flex: none; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 0; border-radius: var(--rk-radius-sm); background: transparent; color: var(--rk-ink); font: inherit; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.dl-like svg, .dl-book-share svg { width: 20px; height: 20px; flex: none; }
.dl-like:hover, .dl-book-share:hover { background: var(--rk-paper-2); }
.dl-like.is-liked svg { color: var(--rk-danger); fill: currentColor; }
.dl-like[aria-disabled=true] { cursor: progress; }
.dl-book-preview { display: inline-flex; height: 40px; align-items: center; justify-content: center; gap: 6px; margin-inline-start: 8px; padding: 0 16px; border: 1px solid var(--rk-line); border-radius: var(--rk-radius-sm); background: var(--rk-surface); color: var(--rk-ink); font: inherit; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; }
.dl-book-preview svg { width: 18px; height: 18px; flex: none; }
.dl-book-preview:hover { border-color: var(--rk-ink-muted); }
/* Page strips (community card and official panel): tiles keep the book's ratio and show linen until
   the picture arrives */
.dl-book-pages { display: flex; height: 188px; gap: 10px; margin-block-start: 12px; padding: 4px 20px 20px; box-sizing: content-box; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 20px; scrollbar-width: thin; }
.dl-book-page { position: relative; flex: none; height: 100%; padding: 0; overflow: hidden; border: 1px solid var(--rk-line); border-radius: 6px; background-color: var(--rk-paper-2); background-image: repeating-linear-gradient(0deg, color-mix(in srgb, var(--rk-ink) 3%, transparent) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--rk-ink) 3%, transparent) 0 1px, transparent 1px 3px); scroll-snap-align: start; cursor: zoom-in; }
.dl-book-page img { display: block; width: 100%; height: 100%; object-fit: cover; }
:is(.dl-like, .dl-book-share, .dl-book-preview, .dl-book-title a, .dl-book-page, .dl-shelf-step, .dl-official-preview, .dl-official-share):focus-visible { outline: 2px solid var(--rk-emerald); outline-offset: 2px; }

/* 官方精选 (B): standing hardcovers on a wooden board, Pudding at the far end, the picked book opens in
   the panel below. --rk-book-scale has to be declared here: the shared .book-object sizes itself with
   it, and it only exists on the home shelf's containers — without it every book collapses to 0 high. */
.dl-official-shelf {
  --rk-book-scale: 1;
  --dl-shelf-long: 184px;
  --dl-shelf-gap: 12px;
  --dl-shelf-pad: 18px;
  --dl-shelf-lift: 34px;
  --dl-shelf-cat-h: 152px;
  --dl-shelf-cat-reserve: 120px;
  --dl-book-area: calc(var(--dl-shelf-long) * var(--rk-book-scale));
  --dl-shelf-stride: calc(var(--dl-shelf-long) * .75 * var(--rk-book-scale) + 12px + var(--dl-shelf-gap));
  --dl-shelf-peek: calc(var(--dl-shelf-long) * .3 * var(--rk-book-scale));
  --dl-shelf-peek-min: 40px;
  --dl-shelf-fade-dir: 90deg;
  position: relative;
}
/* Six whole books plus part of a seventh (PRD goal 3) down to laptop widths: the books shrink with the
   shelf instead of the row dropping to five or four. The scale is the room for six strides (shelf width
   less Pudding's reserve, the start padding, the minimum peek, six times the depth allowance and gap,
   and 2px so rounding never drops the sixth book) over six 3:4 book widths; tan(atan2(a, b)) is a / b
   as a plain number. It never grows past 1 and never drops below the ≤1050 step (.74), which takes
   over below that width. Without container units or trig functions the shelf keeps scale 1. */
@supports (width: calc(100cqi * tan(atan2(1px, 1px)))) {
  .dl-official-shelf {
    container-type: inline-size;
    --rk-book-scale: clamp(.74, tan(atan2(100cqi - var(--dl-shelf-cat-reserve) - var(--dl-shelf-pad) - var(--dl-shelf-peek-min) - 6 * (12px + var(--dl-shelf-gap)) - 2px, 6 * .75 * var(--dl-shelf-long))), 1);
  }
}
[dir=rtl] .dl-official-shelf { --dl-shelf-fade-dir: 270deg; }
/* The row: as many whole books as fit before Pudding with at least 40px to spare, plus a faded part
   (40% of a book) of the next one. Any rest stays bare board in front of Pudding (wide screens, and
   below about 1190px where the fit above stops shrinking the books). */
.dl-shelf-track { position: relative; z-index: 2; display: flex; inline-size: calc(100% - var(--dl-shelf-cat-reserve)); align-items: flex-start; gap: var(--dl-shelf-gap); padding-block: var(--dl-shelf-lift) 8px; padding-inline: var(--dl-shelf-pad) 8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--dl-shelf-pad); scrollbar-width: none; --dl-shelf-fade: linear-gradient(var(--dl-shelf-fade-dir), black calc(100% - 32px), transparent); -webkit-mask-image: var(--dl-shelf-fade); mask-image: var(--dl-shelf-fade); }
@supports (inline-size: round(down, 100px, 7px)) {
  .dl-shelf-track { inline-size: min(100% - var(--dl-shelf-cat-reserve), var(--dl-shelf-pad) + round(down, 100% - var(--dl-shelf-cat-reserve) - var(--dl-shelf-pad) - var(--dl-shelf-peek-min), var(--dl-shelf-stride)) + var(--dl-shelf-peek)); }
}
.dl-shelf-track::-webkit-scrollbar { display: none; }
/* The end fade says "more books"; once scrolled, the start edge fades too so no cut-off sliver shows */
.dl-shelf-track:not([data-at-start]) { --dl-shelf-fade: linear-gradient(var(--dl-shelf-fade-dir), transparent, black 24px, black calc(100% - 32px), transparent); }
.dl-shelf-track[data-at-end] { --dl-shelf-fade: none; }
.dl-shelf-track[data-at-end]:not([data-at-start]) { --dl-shelf-fade: linear-gradient(var(--dl-shelf-fade-dir), transparent, black 24px); }
.dl-shelf-item { display: flex; flex: none; flex-direction: column; align-items: center; inline-size: calc(var(--dl-item-w) * var(--rk-book-scale) + 12px); padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; scroll-snap-align: start; }
.dl-shelf-item:focus-visible { outline: 2px solid var(--rk-emerald); outline-offset: 4px; }
#discoverBooks .dl-shelf-slot { display: flex; block-size: var(--dl-book-area); align-items: flex-end; justify-content: center; }
#discoverBooks .dl-shelf-slot .book-object { display: block; flex: none; }
/* A book without art (or whose cover failed) is the cloth cover with the title printed on it. The shared
   cover title neither wraps long words nor scales, so on this shelf it breaks anywhere and follows the
   book's scale. */
#discoverBooks .dl-shelf-slot .book-face.is-blank { padding: calc(16px * var(--rk-book-scale)) calc(12px * var(--rk-book-scale)); }
#discoverBooks .dl-shelf-slot .blank-title { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; hyphens: auto; font-size: calc(.98rem * var(--rk-book-scale)); }
/* Past 40 books, books far from the view stand as flat covers until the shelf nears them (discover.js) */
#discoverBooks .dl-shelf-flat { position: relative; display: block; flex: none; width: calc(var(--book-w) * var(--rk-book-scale)); height: calc(var(--book-h) * var(--rk-book-scale)); }
#discoverBooks .dl-shelf-flat .book-face { transform: none; }
.dl-shelf-cover { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Contact shadow on the board's top surface, under the book's foot (the shared one sinks into the home plank) */
#discoverBooks .dl-shelf-slot .slot-ground { inset-inline: 2% -6%; inset-block-end: -5px; height: 10px; }
/* Rest at the shared 28deg lean; the picked, hovered or keyboard-focused book is lifted face-on.
   This overrides the shared .slot:hover lift so the whole tab (caption included) drives it. */
#discoverBooks .dl-shelf-item .book-object { transform: rotateY(28deg) rotateX(1deg); }
#discoverBooks .dl-shelf-item:is([aria-selected=true], :focus-visible) .book-object { transform: rotateY(4deg) rotateX(0deg) translateY(-12px); }
#discoverBooks .dl-shelf-item:is([aria-selected=true], :focus-visible) .slot-ground { opacity: .58; }
@media (hover: hover) {
  #discoverBooks .dl-shelf-item:hover .book-object { transform: rotateY(4deg) rotateX(0deg) translateY(-12px); }
  #discoverBooks .dl-shelf-item:hover .slot-ground { opacity: .58; }
}
/* RTL twins (components.css has none): the book leans the other way, so the spine sits on the right
   and the page block on the left, both folding back from their own edge. */
[dir=rtl] #discoverBooks .dl-shelf-item .book-object { transform: rotateY(-28deg) rotateX(1deg); }
[dir=rtl] #discoverBooks .dl-shelf-item:is([aria-selected=true], :focus-visible) .book-object { transform: rotateY(-4deg) rotateX(0deg) translateY(-12px); }
@media (hover: hover) {
  [dir=rtl] #discoverBooks .dl-shelf-item:hover .book-object { transform: rotateY(-4deg) rotateX(0deg) translateY(-12px); }
}
[dir=rtl] #discoverBooks .dl-shelf-slot .book-spine { transform-origin: 100% 50%; transform: rotateY(90deg); }
[dir=rtl] #discoverBooks .dl-shelf-slot .book-pages { transform-origin: 0 50%; transform: rotateY(-90deg); }
[dir=rtl] #discoverBooks .dl-shelf-slot .book-face { border-radius: 6px 2px 2px 6px; }
[dir=rtl] #discoverBooks .dl-shelf-slot .book-back { border-radius: 2px 6px 6px 2px; }
.dl-shelf-name { display: -webkit-box; inline-size: 100%; min-block-size: calc(2 * 1.4em); margin-block-start: 46px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--rk-ink); font-size: 16px; font-weight: 600; line-height: 1.4; text-wrap: balance; overflow-wrap: anywhere; }
.dl-shelf-item[aria-selected=true] .dl-shelf-name { font-weight: 800; }
/* The board, drawn from the shelf tokens: books stand 9px into its top surface */
.dl-shelf-board { position: absolute; z-index: 1; inset-inline: 0; inset-block-start: calc(var(--dl-shelf-lift) + var(--dl-book-area) - 9px); pointer-events: none; }
.dl-shelf-board-top { position: relative; display: block; height: 16px; overflow: hidden; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--rk-shelf-top-a) 0%, var(--rk-shelf-top-b) 45%, var(--rk-shelf-top-c) 100%); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--rk-surface) 35%, transparent); }
.dl-shelf-board-top::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--rk-shelf-grain) 0 2px, transparent 2px 110px); }
.dl-shelf-board-face { position: relative; display: block; height: 15px; overflow: hidden; border-radius: 0 0 4px 4px; background: linear-gradient(180deg, var(--rk-shelf-face-a), var(--rk-shelf-face-b)); box-shadow: inset 0 2px 2px color-mix(in srgb, var(--rk-ink) 14%, transparent), 0 22px 34px -14px color-mix(in srgb, var(--rk-shelf-face-b) 62%, transparent); }
.dl-shelf-board-face::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--rk-shelf-grain) 0 3px, transparent 3px 130px); }
.dl-shelf-bracket { position: absolute; inset-block-start: 31px; width: 30px; height: 15px; border-radius: 0 0 6px 6px; background: linear-gradient(180deg, var(--rk-shelf-bracket-a), var(--rk-shelf-bracket-b)); box-shadow: 0 8px 12px -6px color-mix(in srgb, var(--rk-shelf-bracket-b) 70%, transparent); }
.dl-shelf-bracket.is-start { inset-inline-start: 58px; }
.dl-shelf-bracket.is-end { inset-inline-end: 58px; }
.dl-shelf-cat { position: absolute; z-index: 3; inset-inline-end: 22px; inset-block-start: calc(var(--dl-shelf-lift) + var(--dl-book-area) - 1px - var(--dl-shelf-cat-h) * .72); width: auto; height: var(--dl-shelf-cat-h); filter: drop-shadow(0 7px 5px color-mix(in srgb, var(--rk-shelf-face-b) 55%, transparent)); pointer-events: none; }
[dir=rtl] .dl-shelf-cat { transform: scaleX(-1); }
/* The panel for the picked book; its caret points up at that book */
.dl-official-detail { position: relative; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; margin-block-start: 12px; padding: 24px; border: 1px solid var(--rk-line); border-radius: var(--rk-radius); background: var(--rk-surface); box-shadow: var(--rk-shadow-card); }
.dl-official-detail:empty { display: none; }
.dl-official-detail::before { content: ''; position: absolute; inset-block-start: -9px; inset-inline-start: calc(var(--dl-caret, 48px) - 8px); width: 16px; height: 16px; border: 1px solid var(--rk-line); border-inline-end: 0; border-block-end: 0; background: var(--rk-surface); transform: rotate(45deg); }
[dir=rtl] .dl-official-detail::before { transform: rotate(-45deg); }
.dl-official-detail[data-caret=off]::before { display: none; }
.dl-official-info { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.dl-official-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--rk-line); border-radius: 999px; color: var(--rk-ink-soft); font-size: 14px; font-weight: 700; line-height: 1.5; }
.dl-official-tag svg { width: 15px; height: 15px; flex: none; }
.dl-official-title { display: -webkit-box; margin: 12px 0 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--rk-ink); font-family: var(--rk-font-display); font-size: 24px; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
#discoverBooks .dl-official-info .discover-book-author { margin-block-start: 6px; font-weight: 600; }
.dl-official-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: auto; padding-block-start: 20px; }
.dl-official-preview, .dl-official-share { display: inline-flex; height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 1px solid var(--rk-line); border-radius: var(--rk-radius-sm); background: var(--rk-surface); color: var(--rk-ink); font: inherit; font-size: 16px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; }
.dl-official-preview svg, .dl-official-share svg { width: 18px; height: 18px; flex: none; }
.dl-official-preview { border-color: var(--rk-emerald-ink); background: var(--rk-emerald-ink); color: var(--rk-surface); }
.dl-official-preview:hover { border-color: var(--rk-emerald-ink-hover); background: var(--rk-emerald-ink-hover); }
.dl-official-share:hover { border-color: var(--rk-ink-muted); }
.dl-official-pages { display: flex; min-width: 0; height: 176px; gap: 12px; padding: 4px; box-sizing: content-box; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 4px; scrollbar-width: thin; -webkit-mask-image: linear-gradient(90deg, black calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, black calc(100% - 40px), transparent); }
[dir=rtl] .dl-official-pages { -webkit-mask-image: linear-gradient(270deg, black calc(100% - 40px), transparent); mask-image: linear-gradient(270deg, black calc(100% - 40px), transparent); }

/* Failed / retry notices: 16px text and a 40px retry, as on the activity tab (PRD goal 5) */
#discoverBooks .dl-empty p, #discoverBooks .dl-more { font-size: 16px; }
#discoverBooks .contest-button { min-height: 40px; padding-block: 0; font-size: 16px; }

.dl-page-viewer { display: grid; gap: 16px; justify-items: center; }
.dl-page-viewer img { max-width: 100%; max-height: 72vh; object-fit: contain; }
.dl-page-viewer-nav { display: flex; align-items: center; gap: 16px; color: var(--rk-ink-soft); }

@media (max-width: 1050px) {
  .dl-book-grid { grid-template-columns: minmax(0, 1fr); }
  .dl-official-shelf { --rk-book-scale: .74; }
  .dl-official-detail { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 740px) {
  .dl-book-head { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 16px 16px 0; }
  .dl-book-cover { --dl-cover-long: 72px; }
  /* The actions take their own row so the title keeps its width on phones */
  .dl-book-actions { grid-column: 1 / -1; justify-content: flex-end; margin-block-start: -4px; }
  .dl-book-pages { height: 150px; padding-inline: 16px; padding-block-end: 16px; scroll-padding-inline: 16px; }
  .dl-official-shelf { --rk-book-scale: .66; --dl-shelf-pad: 12px; --dl-shelf-cat-h: 110px; --dl-shelf-cat-reserve: 96px; }
  #discoverBooks .dl-shelf-slot .book-spine span { display: none; }
  .dl-official-detail { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
  .dl-official-actions { padding-block-start: 16px; }
  .dl-official-pages { height: 140px; }
}
@media (max-width: 480px) {
  /* Pudding steps off narrow shelves (PRD open question 3); the row gets the room back */
  .dl-official-shelf { --rk-book-scale: .56; --dl-shelf-cat-reserve: 0px; }
  .dl-shelf-track { inline-size: 100%; }
  .dl-shelf-cat { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dl-book { transition: none; }
  #discoverBooks .dl-shelf-item .book-object, #discoverBooks .dl-shelf-slot .slot-ground { transition: none; }
}