/* =========== © 2026 Centroarts - https://m1r.ru =========== */

.article-book .article-head, .article-book .article-head-min { margin-bottom: var(--g-sect); }
.article-book .article-head .heading { margin-bottom: .5em; }

.book {
  --book-text-maxrow: 4;
  user-select: none; margin-bottom: var(--g-sect);
}
.book-audio {
  --book-text-maxrow: 3;
}

.book .poster.as34 { --poster-mw: 198px; }
.book .poster.as11 { --poster-mw: 228px; }
.book .poster { --poster-rd: 12px; width: var(--poster-mw); background-color: hsla(var(--c-text),0.05); }
.book .poster .postid { display: inline-block; }
.book .poster-img { box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.25); }

.book-info { display: flex; flex-direction: column; gap: 12px; align-self: center; flex: 1 1 auto; }

.book-spec {
  --meta-gap: 12px;
  --meta-item-lh: 20px;
  --meta-item-fs: var(--fs-1);
  --meta-item-h: 28px;
  --meta-item-ic-s: 24px;
  --meta-item-pad: 0;
  --meta-item-c: var(--c-text-mute);
  --meta-item-gap: 4px;
}
.book-spec .age-badge::before {
    font-size: var(--fs-2); line-height: 16px; padding-inline: 0px;
    text-align: center; height: 24px; width: 24px; min-width: 24px;
}
.book-spec .age-badge { font-size: var(--meta-item-fs); padding: 0; }

.book-stat { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.book-stat__value { display: flex; align-items: center; gap: 4px; }
.book-stat__label { display: block; line-height: 20px; font-size: var(--fs-1); }

.book-stat_views { opacity: .5; }

.book-stat_like a { color: hsl(var(--c-link)); }
.book-stat_like a:hover { color: hsl(var(--c-link-hover)); }

.book-text .text-clamp {
  --text-clamp-h: 24px;
  --text-clamp-rows: var(--book-text-maxrow);
  opacity: .9;
}
.book-text .text-clamp * { color: inherit !important; }

.book-meta-list { display: flex; gap: 16px; }
.book-meta .tag-links { flex-wrap: nowrap; }

.book-tools { display: flex; align-items: center; gap: 4px; }
.book-tools .btn { --btn-h: 44px; --btn-pad: 10px; }
.book-tools .btn-fav .btn > span { display: none; }

.btn-book-play.playnow .ic-play, .btn-book-play:not(.playnow) .ic-pause { display: none; }

@media (max-width: 767.9px) {
  .book-meta-list {
    overflow: hidden; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-inline: var(--wrp-p);  margin-inline: var(--wrp-p-inv);
    mask-image: linear-gradient( to right, #000 0, #000 calc(100% - 32px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 32px), transparent);
  }
  .book-meta-list::-webkit-scrollbar { display: none; }
  .book-meta_item.book-author { padding-inline-end: 8px; }
}
@media (min-width: 768px) {
  .book-meta-list { display: grid; gap: 12px; grid-template-columns: 1fr 2fr; }
  .book-meta-3c .book-meta-list { grid-template-columns: repeat(3,1fr); }
  .book-meta .tag-links {
    overflow: hidden; overflow-x: auto;	scrollbar-width: none;
    mask-image: linear-gradient( to right, #000 0, #000 calc(100% - 24px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent);
  }
  .book-meta .tag-links::-webkit-scrollbar { display: none; }
  .book-meta_item { min-width: 0px; }
}

.book-meta .tag-link {
  --btn-h: 24px;
  --btn-pad-x: 6px;
  --btn-pad-y: 4px;
}

.book-meta_label { display: block; font-size: var(--fs-1); line-height: 20px; color: var(--c-text-mute); margin-bottom: 4px; white-space: nowrap; }
.book-author { align-self: start; padding-inline-start: 56px; position: relative; z-index: 1; grid-column: auto; }
.book-author .avatar { position: absolute; left: 0; top: 0; --avatar-size: 48px; }
.book-author .truncate { font-weight: bold; }

.book-title {
  font-family: var(--f);
  font-size: var(--fs-heading-second); line-height: var(--lh-heading-second); margin-bottom: .5em;
  overflow-wrap: normal; word-break: normal; hyphens: none; /* text-wrap: balance; */
}

.article .box {
  --box-pad: 20px;
}

.box-author_head { display: flex; align-items: center; gap: 16px; }
.box-author_head .cont { flex: 1 1 auto; min-width: 0; }
.box-author_head .cont * { font-style: normal; display: block; }
.box-author_head .avatar { --avatar-size: 48px; }
.box-author_label { font-size: var(--fs-1); line-height: 20px; color: var(--c-text-mute); }
.box-author_links { margin-top: var(--box-pad); }

.info-list.glist { gap: 4px 12px; }
.info-list.glist .info-list_item { margin-top: 0; }

.box-iconbtn { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.box-iconbtn .cont { flex: 1 1 auto; min-width: 0; }
.box-iconbtn .cont > * { display: block; }

@media (max-width: 767.9px) {
  .article-page { position: relative; }

  .article-book .page-switcher { margin-inline: auto; margin-bottom: 16px; }
  .article-book .article-head .heading,
  .article-book .article-head-min .heading { text-align: center; margin-bottom: 16px; text-wrap: balance; }
  .article-book .article-head-min { text-align: center; }
  .article-head .poster { margin-inline: auto; margin-bottom: 12px; }
  .article-book .link-back { justify-content: center; margin-bottom: 16px; }
  .article-book .link-back .ic { display: none; }
  .article-book .link-back .btn { --btn-h: 36px; --btn-lh: 20px; --btn-pad: 8px; --btn-pad-inv: -8px; opacity: .7; }
  .book-spec, .book-tools { justify-content: center; }
  .book-text { text-align: center; }
  .book-tools .share-btn, .book-tools .btn-fav { position: absolute; top: 8px; }
  .book-tools .share-btn { right: 8px; }
  .book-tools .btn-fav { left: 8px; }
  .book-tools .btn-line { --btn-sw: none; }

  .book-tools .btn-fill, .book-tools .btn-mono { --btn-h: 48px; --btn-pad: 0px; }
  .book-tools .btn-fill, .book-tools .btn-mono, .book-tools > a { flex: 1; }
  .book-stat { text-align: center; }
  .book-stat_item, .book-stat_like > a { display: flex; flex-direction: column; align-items: center; }
  .book-stat__label { font-size: var(--fs-3); }
  .book-stat__value { justify-content: center; order: -1; }

  .book-specinfo { font-size: var(--fs-1); }
}
@media (min-width: 768px) {
  .book { display: flex; align-items: start; gap: 24px; }
  .book-tools { order: 13; }
  .book-spec .age-badge::before {
      font-size: inherit; line-height: 20px; width: 28px; height: 28px; min-width: 28px;
  }
  .book-tools .btn-fill, .book-tools .btn-mono, .book-tools > a { min-width: 126px; }
}
@media (min-width: 576px) {
  .box-iconbtn .icon { width: 44px; height: 44px; padding: 6px; border-radius: 50%; background-color: hsla(var(--c-second),0.1); color: hsl(var(--c-second)); }
  .box-iconbtn .icon .ic { --i-size: 32px; }
}
@media (max-width: 575.9px) {
  .article .box-iconbtn { --box-pad: 12px; }
  .box-iconbtn .icon { display: none; }
  .box-iconbtn .cont { font-size: var(--fs-2); line-height: 16px; padding-left: 4px; }
  .box-iconbtn_text { margin-top: 4px; opacity: .7; }
  .box-iconbtn .btn { --btn-fs: var(--fs-1); }
  
  .book-specinfo { display: block; }
  .book-specinfo .meta-tags_label { display: block; margin-bottom: 4px; }
  .book-specinfo-c2 { border-top: 1px solid var(--c-border); margin-top: var(--box-pad); padding-top: var(--box-pad); }

  .box-bookinfo.box { --box-rd: 0px; --box-pad: 12px; }
  .box-bookinfo .panel-tab-item.btn { --btn-fs: var(--fs-1); }
}

/* FAQ */
.faq-item { border-top: 1px solid var(--c-border); }
.faq-question { display: flex; align-items: start; gap: 8px; padding-block: 14px; user-select: none; cursor: pointer; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::marker { content: ""; }
.faq-icon {
  width: 24px; height: 24px; padding: 2px; border-radius: 50%;
  background-color: hsla(var(--c-primary), 0.1); color: hsl(var(--c-primary));
  transition: background-color .2s ease;
}
.faq-icon .ic { transition: transform .2s ease; }
.faq-title { font-weight: normal; flex: 1 1 auto; }

@media (min-width: 576px) {
  .faq-icon { width: 28px; height: 28px; }
  .faq-title { font-size: 17px; line-height: 28px; }
}
@media (max-width: 575.9px) {
  .faq-icon .ic { --i-size: 20px; }
}

.faq-item[open] .faq-icon {
  background-color: hsl(var(--c-primary));
  color: hsl(var(--c-text-white));
}
.faq-item[open] .faq-title { font-weight: bold; }
.faq-item[open] .faq-icon .ic {
  transform: rotate(45deg);
}
.faq-answer { margin-top: -8px; padding-bottom: 16px; }
.faq-answer:last-child p { margin-bottom: 0; }

/* -- Book Toc -- */
.book-toc { font-family: var(--f); font-size: var(--fs-3); line-height: var(--lh); margin-block: 12px; }
.book-toc ul { font-size: inherit !important; }
@media (min-width: 768px) {
  .book-toc { margin-top: 20px; }
}
.book-toc-label { font-weight: bold; font-size: var(--fs); font-weight: bold; }
.book-toc ul.book-toc-list { --atext-gap: .5em; border-left: 1px solid var(--c-border); margin-left: 6px; padding-left: 12px; list-style: none; }
.book-toc ul.book-toc-list li { margin: 0; }
.book-toc:not(.open) ul.book-toc-list li:not(:nth-child(-n + 3)),
.book-toc:not(.open) ul.book-toc-list li ul { display: none; }
.book-toc-list a { text-decoration: none !important; display: block; padding: .25em 0; }

.book-toc .book-toc-foot { display: flex; }
.book-toc-foot .btn { margin: calc(var(--btn-pad-y)/-1) calc(var(--btn-pad-x)/-1); --btn-fs: inherit; font-weight: bold; }
.book-toc-foot .btn .btn-cont { text-decoration: none; padding: 0; }

/* -- ReadPanel -- */
.read-panel-wrp { position: sticky; top: 0px; height: 0px; z-index: 100; pointer-events: none; }
html.mp-open .read-panel { visibility: hidden; }
.read-panel {
  --readpanel-bg: hsl(var(--c-body));
  --readpanel-c-text: hsl(var(--c-text));
  --readpanel-sw: none;

  position: relative; z-index: 1; pointer-events: auto;
  background-color: var(--readpanel-bg);
  color: var(--readpanel-c-text);
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px; box-shadow: var(--readpanel-sw);
  font-family: var(--f);

  opacity: 0; visibility: hidden;
  transform: translateY(-12px); transition: transform 0.2s ease-in-out, visibility 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.read-panel-progress {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; border-radius: inherit;
}
.read-panel-progress::after {
  content: ""; display: block; height: 100%; width: var(--readprogress);
  background-color: hsla(var(--c-primary), 0.2);
}
.read-panel a { text-decoration: none !important; }
.read-panel .btn {
  --btn-h: 36px;
  --btn-pad: 6px;
}
.panel-toc-lines {
  height: inherit; width: 24px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
}
.panel-toc-lines i { width: 4px; height: 1px; background-color: currentColor; }
.panel-toc-lines i:first-child, .panel-toc-lines i:last-child { opacity: .7; }
.panel-toc-lines i.rnow { height: 2px; width: 12px; background-color: hsl(var(--c-primary)); }

.read-panel button.panel-toc-btn { position: static; --btn-pad: 0; margin-left: 4px; margin-right: -4px; }
.panel-toc-btn::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.read-panel.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.panel-left { display: flex; align-items: center; flex-grow: 1; min-width: 0; position: relative; }
.panel-info { white-space: nowrap; padding-inline-start: 14px; min-width: 0; }

.panel-title { font-size: 14px; font-weight: bold; line-height: 16px; overflow: hidden; text-overflow: ellipsis; }
.panel-progress-text { font-size: 12px; opacity: .6; line-height: 14px; margin-top: 2px; }

.panel-right { display: flex; align-items: center; gap: 4px; margin-inline-start: 8px; }
.panel-right .btn { --btn-sw: inset 0 0 0 1px var(--c-border); }
.panel-right .btn:active { --btn-sw: inset 0 0 0 2px hsla(var(--c-primary),0.3); }

@media (min-width: 992px) {
  .panel-right .btn:hover {
    --btn-sw: inset 0 0 0 1.5px hsla(var(--c-primary),0.6);
  }
}
@media (min-width: 768px) {
  .read-panel-wrp { top: var(--header-h); }
  .read-panel {
    --readpanel-bg: hsla(var(--c-body-light),0.9);
    --readpanel-sw: 0 4px 20px -4px hsla(0,0%,0%,.25), inset 0 0 0 1px hsl(var(--c-body-light));

    border-radius: 40px;
    
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .read-panel-progress::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: inset 0 0 0 2px var(--readpanel-bg);
  }
}
@media (max-width: 767.9px) {
  .read-panel-wrp { margin-inline: var(--wrp-p-inv); }
  .read-panel { height: var(--mobile-menu-h); }
  .panel-right { margin-inline-start: 8px; margin-inline-end: 8px; }
  .read-panel-progress { top: auto; height: 2px; pointer-events: none; background-color: var(--c-border); }
  .read-panel-progress::after { background-color: hsl(var(--c-primary)); }
}