/* КНИЖКОВА ПОЛИЦЯ — розмітка в packages/ui/shelf.js (shelfBooks). Спільна для бази
   знань (/kb/:base) і лендінга oCBot; підключає сторінка, де полиця стоїть. */
/* Корінці: ряд томів на полиці. Ширина тома — flex-grow за числом статей,
   але не тонше 140px, щоб назва лишалась горизонтальною; коли томи не
   влазять — ряд гортається вбік, як справжня полиця. Серія: одна форма,
   свій колір (--book) на кожному томі — вимивка обкладинки, смужка зверху,
   номер. Палітурка: опуклий верх і шарнір уздовж лівого краю — два штрихи,
   далі вже бутафорія. */
.shelf-books-wrap{margin:26px 0 30px}
.shelf-books{display:flex;gap:6px;align-items:stretch;overflow-x:auto;padding:18px 4px 0;scroll-padding-inline:4px;scroll-snap-type:x proximity}
.shelf-book{--book:var(--green);flex:1 0 0;min-width:140px;container-type:inline-size;position:relative;display:flex;flex-direction:column;min-height:262px;padding:18px 16px 14px 20px;border:1px solid color-mix(in srgb,var(--book) 30%,var(--glass-border));border-bottom:0;border-radius:50% 50% 0 0/14px 14px 0 0;background:linear-gradient(180deg,color-mix(in srgb,var(--book) 16%,var(--surface)),color-mix(in srgb,var(--book) 6%,var(--surface)));box-shadow:var(--shadow-card);color:var(--text);text-decoration:none;scroll-snap-align:start;overflow:hidden;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1),border-color var(--transition)}
.shelf-book::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--book)}
.shelf-book::after{content:"";position:absolute;left:9px;top:6px;bottom:0;width:2px;background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(255,255,255,.75))}
.shelf-book:hover,.shelf-book:focus-visible,.shelf-book.active{transform:translateY(-14px);box-shadow:var(--shadow-lift);text-decoration:none;z-index:1}
.shelf-book.active{border-color:var(--book)}
.shelf-book.dim{opacity:.35}
.shelf-book-num{font:700 1.5rem/1 var(--font-display);color:var(--book);margin:4px 0 10px}
.shelf-book-title{font-family:var(--font-display);font-weight:700;font-size:1rem;line-height:1.25;color:var(--green);text-wrap:balance}
/* Середина тома: анотація і мапа статей в одній клітинці — на наведенні
   одна тане, друга домальовується, без стрибка висоти */
.shelf-book-mid{display:grid;margin-top:10px;flex:1}
.shelf-book-mid>*{grid-area:1/1}
.shelf-book-desc{align-self:start;font-size:.82rem;line-height:1.4;color:var(--text);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;transition:opacity .2s}
@container (max-width:189px){.shelf-book-desc{display:none}}
.shelf-book-n{margin-top:auto;padding-top:10px;font-size:.76rem;color:var(--hint);white-space:nowrap}
/* Гілки від номера до перших статей — як гілки на плитках головної:
   викреслюються одна за одною, підпис проявляється, коли гілка доросла;
   назад — усі разом і швидко */
.shelf-book-map{position:relative;color:var(--book);pointer-events:none;min-height:112px;opacity:0;transition:opacity .15s}
.shelf-book-map svg{position:absolute;left:0;top:4px;width:22px;overflow:visible}
.shelf-book-map path{stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .45s cubic-bezier(.22,1,.36,1)}
.shelf-book-map .leaf{position:absolute;left:30px;right:0;top:4px;transform:translate(-6px,-50%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:600 .76rem/1.25 var(--font);color:var(--text);opacity:0;transition:opacity .2s,transform .3s cubic-bezier(.22,1,.36,1)}
.shelf-book-map .leaf.more{color:var(--hint);font-weight:500}
.shelf-book-map .leaf{margin-top:4px}
.shelf-book:is(:hover,:focus-visible) .shelf-book-desc{opacity:0}
.shelf-book:is(:hover,:focus-visible) .shelf-book-map{opacity:1}
.shelf-book:is(:hover,:focus-visible) .shelf-book-map path{stroke-dashoffset:0;transition-delay:calc(var(--n) * 70ms)}
.shelf-book:is(:hover,:focus-visible) .shelf-book-map .leaf{opacity:1;transform:translate(0,-50%);transition-delay:calc(220ms + var(--n) * 70ms)}
.shelf-board{height:9px;margin:0 -2px;border-radius:2px;background:linear-gradient(180deg,var(--gold-light),var(--gold));box-shadow:0 8px 16px rgba(var(--green-rgb),.14)}

/* Телефон: сім корінців в один екран, назва вертикально знизу вгору, як на
   корінці книги; анотації, гілок і ваги нема — вони в аркуші за тапом */
@media(max-width:560px){
  .shelf-books-wrap{margin:18px 0 22px}
  .shelf-books{overflow:visible;gap:4px;padding:10px 2px 0}
  .shelf-book{min-width:40px;min-height:224px;padding:10px 0 10px 4px;align-items:center;border-radius:50% 50% 0 0/8px 8px 0 0}
  .shelf-book::after{left:4px}
  .shelf-book:hover,.shelf-book:focus-visible,.shelf-book.active{transform:translateY(-6px)}
  .shelf-book-num{font-size:1rem;margin:4px 0 8px}
  .shelf-book-title{display:block;writing-mode:vertical-rl;transform:rotate(180deg);font-size:.8rem;line-height:1.1;max-height:172px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .shelf-book-mid,.shelf-book-n{display:none}
}
@media(prefers-reduced-motion:reduce){.shelf-book,.shelf-book-map,.shelf-book-map path,.shelf-book-map .leaf,.shelf-book-desc{transition:none}.shelf-book:hover,.shelf-book.active{transform:none}}