/* v105: both sides use the same native hover and normal-flow details.
   No left-only pullout, hidden face, or disabled factual panel. */
/* Hover decoration belongs only to the one native peek target. GPU ownership
   stays continuous during input/scroll; no global opacity restart is needed. */
.side-spine:not(.is-peeked) { transition-property:border-color,background-color; }
.side-spine .side-spine-art { transition:none; }

/* Expanding factual previews must not move the document scroll anchor. */
.side-shelf,.side-shelf-info { overflow-anchor:none; }

/* Only the last actual row on each independently filtered shelf has no rule. */
.side-shelf-row.is-final-row .side-shelf-grid { border-bottom:0; }

/* Original full-sized origins never shrink: crossing/reversing a boundary does
   not move later rows or the document scrollbar. Compact targets are original
   nodes, not duplicate books. Each side gets a bounded native-scroll stack. */
.side-row-origin { min-width:0; overflow-anchor:none; }
.side-row-origin > .side-shelf-info { width:100%; margin:0; }
.side-compact-stack {
  position:fixed; z-index:3; box-sizing:border-box; overflow-x:hidden;
  overflow-y:auto; overscroll-behavior-y:contain; overflow-anchor:none;
  scrollbar-width:none; scrollbar-color:#75658f #15121b;
  background:#14121b; border:0; box-shadow:0 8px 18px #0009,0 2px 5px #000b; border-radius:5px;
  scroll-padding:4px; padding:0;
}
.side-compact-stack[hidden] { display:none; }
.side-compact-stack .side-shelf-info { width:100%; box-sizing:border-box; margin:0; }
.side-shelf-row.is-compact-row { min-height:0; animation:side-row-arrive 180ms ease-out; }
.side-shelf-row.is-compact-row .side-shelf-grid {
  padding:4px 10px; gap:0 6px; grid-template-columns:repeat(var(--side-columns),minmax(44px,1fr));
}
.side-shelf-row.is-compact-row .side-spine { min-width:44px; min-height:64px; height:64px; }
.side-shelf-row.is-compact-row .side-spine-art { opacity:1; object-fit:cover; }
.side-shelf-row.is-compact-row .side-spine-title {
  writing-mode:horizontal-tb; text-orientation:mixed; transform:none;
  inset:auto 0 0; width:auto; max-width:100%; height:auto; max-height:100%;
  box-sizing:border-box; padding:3px; border:0; border-radius:0;
  font-size:11px; line-height:1.3; white-space:normal; overflow-wrap:anywhere;
  background:#14141de8; color:#f4f2ff;
}
.side-shelf-row.is-compact-row .side-spine-status { top:2px; left:2px; }
@keyframes side-row-arrive { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .side-shelf-row.is-compact-row { animation:none; } }
/* Labels participate in compact height: large fonts / long Thai titles must
   never be cropped just to preserve a decorative fixed-height ribbon. */
.side-shelf-row.is-compact-row .side-spine { display:flex; flex-direction:column; justify-content:flex-end; height:auto; }
.side-shelf-row.is-compact-row .side-spine-title { position:relative; inset:auto; width:100%; max-height:none; overflow:visible; }

/* Match the original spine lanes exactly, including when the dock scrolls. */
.side-compact-stack::-webkit-scrollbar { display:none; }
/* First visible card top shares the central banner's grid origin. */
.side-shelf-row[data-row="0"]:not(.is-compact-row) .side-shelf-grid { padding-top:0; }
/* Underlap is a label-only state: never shrink or reparent a partially visible row. */
.side-shelf-row.is-underlapped-row:not(.is-compact-row) .side-spine-title {
 writing-mode:horizontal-tb; text-orientation:mixed; transform:none;
 inset:auto 0 0; width:100%; max-width:100%; height:auto; max-height:none;
 box-sizing:border-box; padding:4px; border:0; border-radius:0;
 font-size:11px; line-height:1.3; white-space:normal; overflow-wrap:anywhere;
 background:#14141de8; color:#f4f2ff;
}

/* Frame belongs to each native cell, including GPU-owned and compact art. */
.side-spine { border:1px solid #75658f; box-sizing:border-box; }
.side-spine::after { content:""; position:absolute; inset:0; border:1px solid #75658f; border-radius:inherit; pointer-events:none; z-index:4; }

/* Applied only in compact state: measured full-size border boxes, including
   fractional/native grid widths, are the source of truth. Untested/zero-size
   layouts retain the canonical CSS tracks above instead of inventing pixels. */
.side-shelf-row.is-compact-row .side-shelf-grid[data-measured="true"] {
 box-sizing:border-box; width:var(--side-measured-grid-width);
 border-left-width:0; border-right-width:0; margin-left:var(--side-measured-grid-offset); padding-left:var(--side-measured-inset); padding-right:0;
 grid-template-columns:var(--side-measured-tracks); column-gap:0; justify-content:start;
}
.side-shelf-row.is-compact-row .side-shelf-grid[data-measured="true"] .side-spine {
 width:var(--side-measured-card-width); min-width:0; max-width:none;
 grid-column:var(--side-measured-column); margin-left:0; margin-right:0;
}

/* Paint opaque surfaces, not translucent covers over the comic. */
.side-shelf-row .side-shelf-grid,.side-spine,.side-book-face { background-color:#14121b; }
.side-book-face { display:block;position:absolute;inset:0;border-radius:inherit;transform-origin:15% 50%;transition:transform 220ms ease,box-shadow 220ms ease; }
.side-row-origin { position:relative; }
.side-shelf-info.is-cover-pullout { position:absolute;left:var(--pullout-left,0px);top:var(--pullout-top,0px);width:var(--pullout-width,240px);max-height:390px;overflow:auto;box-sizing:border-box;z-index:8;margin:0;min-height:0!important;padding:14px;border:1px solid #9b88ba;border-radius:7px;background-color:#14121b;background-image:linear-gradient(#14121b99,#14121bf5 46%),var(--pullout-cover);background-size:cover;background-position:center;box-shadow:7px 5px 0 #594e68,12px 12px 24px #0009;transform-origin:0 50%;animation:cover-pullout 220ms ease-out; }
.side-shelf-info.is-cover-pullout .side-info-related,.side-shelf-info.is-cover-pullout .side-relations,.side-shelf-info.is-cover-pullout .side-info-creator { display:none; }
.side-shelf-info.is-cover-pullout .side-info-premise { display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.side-info-detail { margin-top:10px;border:1px solid #8875a4;background:#30273e;color:#fff;padding:8px;border-radius:5px;cursor:pointer; }
@keyframes cover-pullout { from { opacity:0;transform:perspective(700px) translate3d(0,0,-10px) rotateY(-28deg); } to { opacity:1;transform:perspective(700px) translate3d(0,0,0) rotateY(0); } }
@media(prefers-reduced-motion:reduce) { .side-book-face,.side-shelf-info.is-cover-pullout { animation:none;transition:none;transform:none!important; } }

.side-shelf-row.is-compact-row .side-book-face { position:relative;inset:auto;width:100%;min-height:64px;display:flex;flex-direction:column;justify-content:flex-end; }
/* The face may project outside its native target, but never changes that box. */
.side-shelf-info.is-cover-pullout:focus-within { outline:2px solid #c1b2ff;outline-offset:2px; }
/* Opaque native faces own the visible artwork. The legacy canvas is behind
   their backing, so never suppress the matching cover on a GPU-ready target. */
.side-shelf .side-spine.scene-spine-active .side-spine-art { opacity:1; }

/* v69: the shared natural-label height is published by the central banner.
   Identical cell and row padding align the three compact lanes. */
.side-shelf-row.is-compact-row .side-spine,
.side-shelf-row.is-compact-row .side-book-face { height:var(--shared-compact-card-height,84px); min-height:var(--shared-compact-card-height,84px); }
.side-shelf-row.is-compact-row .side-shelf-grid { padding-top:8px; padding-bottom:8px; }
/* Seal the space above the fixed dock without shifting its native top. */
.side-compact-cap { position:fixed; z-index:2; background:#14121b; pointer-events:none; border-radius:0 0 10px 10px; }
.side-compact-cap[hidden] { display:none; }
body:has(#book-dialog[open]) .side-compact-cap { visibility:hidden; }
/* Round the section paint; do not clip the connected pulled-out cover. */
.side-shelf-grid { border-radius:10px; }
.side-compact-stack { border-radius:10px; }
.side-shelf-row { border-radius:10px; }

/* The exposed left cover and upright right face form one connected book.
   Facts are painted on the angled cover, not in a flat floating popover. */
.side-shelf-info.is-cover-pullout {
 max-height:none; overflow:visible; min-height:290px!important;
 padding:14px 12px; border-radius:3px 0 0 3px;
 background-image:linear-gradient(#14121bd9,#14121bf5),var(--pullout-cover);
 transform-origin:left top; transform:skewY(12deg);
 box-shadow:-7px 12px 22px #0008; animation:cover-open-v69 220ms ease-out;
}
.side-shelf-info.is-cover-pullout::after {
 content:''; position:absolute; left:100%; top:0; bottom:0;
 width:var(--pullout-front-width,48px); transform-origin:left top;
 transform:skewY(-12deg); border:1px solid #9b88ba; border-radius:0 4px 4px 0;
 background-color:#14121b; background-image:linear-gradient(90deg,#0005,transparent 30%),var(--pullout-cover);
 background-size:cover; background-position:center;
 box-shadow:5px 7px 0 #4c4358,10px 10px 18px #0008; pointer-events:none;
}
.side-shelf-info.is-cover-pullout .side-info-title { font-size:15px; line-height:1.5; }
.side-shelf-info.is-cover-pullout .side-info-genres { font-size:11px; line-height:1.6; }
.side-shelf-info.is-cover-pullout .side-info-premise { -webkit-line-clamp:2; font-size:12px; }
.side-shelf-info.is-cover-pullout .chapter-link { min-height:44px; padding:5px; font-size:11px; }
.side-shelf-info.is-cover-pullout .chapter-date { font-size:9px; }
@keyframes cover-open-v69 { from { opacity:0;transform:skewY(0deg) translateX(-8px); } to { opacity:1;transform:skewY(12deg) translateX(0); } }
@media(prefers-reduced-motion:reduce) { .side-shelf-info.is-cover-pullout { animation:none; } }
.side-shelf-row.is-compact-row .side-shelf-grid { border-bottom-width:0; }
.side-shelf-info.is-cover-pullout.is-compact-pullout { position:fixed; }
@media(prefers-reduced-motion:reduce) { .side-shelf-info.is-cover-pullout { transform:skewY(12deg)!important; } }
/* The parent owns the border-box height; its face fills only the inner box. */
.side-shelf-row.is-compact-row .side-book-face { height:100%; min-height:0; flex:1 1 auto; }

.side-shelf-info.is-cover-pullout[data-narrow-cover="true"] { padding:10px 7px; }
.side-shelf-info.is-cover-pullout[data-narrow-cover="true"] .side-info-genres,
.side-shelf-info.is-cover-pullout[data-narrow-cover="true"] .side-info-premise,
.side-shelf-info.is-cover-pullout[data-narrow-cover="true"] .side-info-latest,
.side-shelf-info.is-cover-pullout[data-narrow-cover="true"] .chapter-date { display:none; }
.side-shelf-info.is-cover-pullout[data-narrow-cover="true"] .side-info-title { font-size:12px; }
.side-info-detail { min-height:44px; }

/* v70: state decorations from older styles must never shift compact labels.
   These rules deliberately outrank viewed/saved/scene-peek selector variants. */
.side-shelf .side-shelf-row.is-compact-row .side-spine .side-spine-title,
.side-shelf .side-shelf-row.is-underlapped-row:not(.is-compact-row) .side-spine .side-spine-title {
 top:auto; right:0; bottom:0; left:0; transform:none;
 writing-mode:horizontal-tb; text-orientation:mixed; width:100%; max-width:100%;
 height:auto; max-height:none; white-space:normal; overflow:visible; text-overflow:clip;
 display:block; -webkit-line-clamp:unset; -webkit-box-orient:initial;
}
.side-shelf .side-shelf-row.is-compact-row .side-spine .side-spine-title { position:absolute; padding:4px; }
.side-shelf .side-shelf-row.is-compact-row .side-spine { display:block; overflow:hidden; }
.side-shelf .side-shelf-row.is-compact-row .side-spine .side-book-face {
 position:absolute; inset:0; width:auto; height:auto; min-height:0; display:block; transform:none; box-shadow:none;
}
/* Native cell frame/title layers cannot escape above a higher compact dock.
   Info remains a separate sibling at z8 so its intended pullout can escape. */
.side-shelf-row { position:relative; z-index:0; isolation:isolate; }
.side-shelf-row:not(.is-compact-row) .side-shelf-grid { clip-path:inset(var(--side-row-clip-top,0px) 0 0 0); }
@keyframes side-row-arrive { from { opacity:0; } to { opacity:1; } }
/* One visible two-plane book. The original native target stays focusable and
   measurable, but cannot paint a second giant cover behind its exposed face. */
/* Saved state remains in device storage and accessible labels, without a chip. */
.side-shelf .side-spine-status { display:none!important; }
.side-shelf .side-spine:is(.is-saved,.is-viewed) .side-spine-title { top:8px; }
/* Both shelves retain native shortcuts and share in-flow factual previews. */