/* ─── Book Panel (shared across views) ─── */
.book-panel {
  width: 480px;
  flex-shrink: 0;
  background: #0d1117;
  border-left: 1px solid #21262d;
  max-height: calc(100vh - 170px);
  overflow-y: auto;
  padding: 20px 24px;
}
.book-panel::-webkit-scrollbar { width: 8px; }
.book-panel::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }

.panel-header {
  position: sticky; top: 0;
  background: #0d1117; padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid #21262d; z-index: 2;
}
.panel-header .title { font-size: 16px; color: #f0f6fc; font-weight: 700; }
.panel-header .meta { color: #8b949e; font-size: 12px; margin-top: 2px; }
.panel-header .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.panel-header .close {
  position: absolute; top: 0; right: 0; cursor: pointer;
  color: #8b949e; font-size: 20px; line-height: 1;
  background: none; border: none; font-family: inherit;
}
.panel-header .close:hover { color: #f0f6fc; }

.panel-empty {
  text-align: center; color: #6e7681; font-size: 13px;
  padding: 40px 20px;
}
.panel-empty-emoji { font-size: 32px; margin-bottom: 8px; }

.panel-group {
  font-size: 11px; color: #6e7681; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 12px 0 6px; border-bottom: 1px solid #21262d; margin-bottom: 6px;
  position: sticky; top: 60px; background: #0d1117;
}

.book-item {
  display: flex; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid #161b22;
}
.book-item:last-child { border-bottom: none; }
.book-cover {
  width: 48px; height: 48px; border-radius: 4px; flex-shrink: 0;
  background: #21262d; object-fit: cover;
}
.book-info { flex: 1; min-width: 0; }
.book-info .title { font-size: 13px; color: #f0f6fc; font-weight: 600; line-height: 1.3; }
.book-info .author { font-size: 11px; color: #58a6ff; margin-top: 2px; }
.book-info .sub { font-size: 11px; color: #6e7681; margin-top: 2px; }
.book-info .sub .series { color: #a78bfa; }
.book-info .sub .sep { margin: 0 4px; color: #30363d; }

.book-progress { display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 3px; margin-right: 4px; }
.book-progress.finished { background: rgba(63, 185, 80, 0.15); color: #3fb950; }
.book-progress.partial { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.book-progress.unread { background: rgba(139, 148, 158, 0.15); color: #8b949e; }

.book-links {
  display: flex; gap: 6px; margin-top: 6px;
}
.book-links a {
  font-size: 10px;
  padding: 2px 6px; border-radius: 3px;
  background: #21262d; border: 1px solid #30363d;
  color: #c9d1d9; text-decoration: none;
  transition: all 0.15s;
}
.book-links a:hover { background: #30363d; color: #f0f6fc; border-color: #484f58; }
.book-links a.audible { color: #ff9c00; border-color: rgba(255, 156, 0, 0.3); }
.book-links a.audible:hover { background: rgba(255, 156, 0, 0.1); }
.book-links a.amazon { color: #ffa726; border-color: rgba(255, 167, 38, 0.3); }

/* Responsive: on narrow screens, panel stacks below */
@media (max-width: 1100px) {
  .layout { flex-direction: column; }
  .book-panel { width: 100%; max-height: 400px; border-left: none; border-top: 1px solid #21262d; }
}

/* Sticky x-axis header used by Series Timeline and All Authors — keeps year
   labels visible as you scroll through hundreds of rows. */
.sticky-axis {
  position: sticky; top: 0; z-index: 3;
  background: #0d1117;
  border-bottom: 1px solid #21262d;
  margin-bottom: 2px;
}
.sticky-axis svg { display: block; }

/* Inline variant: panel takes the whole viz content area (used for "Recent" view). */
.book-panel-inline {
  width: 100%;
  max-width: 820px;
  max-height: none;
  height: auto;
  border-left: none;
  margin: 0 auto;
  padding: 0 16px 40px;
}