/* ── Reading page ────────────────────────────────────────── */
/* Chart color: categorical slot 1 of the validated reference palette,
   with a separate step for dark mode (theme toggles body.dark). */

#reading-page {
  padding: 0;
  --rd-series-1: #2a78d6;
  --rd-grid:     rgba(0, 0, 0, 0.08);
  --rd-star:     #e2a400;
  --rd-star-empty: #d3d1cb;
  --rd-card-bg:  var(--secondary-color);
}

body.dark #reading-page {
  --rd-series-1: #3987e5;
  --rd-grid:     rgba(255, 255, 255, 0.1);
  --rd-star:     #f0b429;
  --rd-star-empty: #4a4945;
}

.rd-heading {
  font-size: 2rem;
  color: var(--text-color);
  opacity: 0.85;
}

.rd-subheading {
  color: var(--text-secondary-color);
  font-size: 1rem;
}

.rd-section-title {
  font-size: 1.25rem;
  color: var(--text-color);
  opacity: 0.85;
  margin-bottom: 1rem;
}

/* ── Profile strip ───────────────────────────────────────── */

.rd-profile {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--rd-card-bg);
  box-shadow: 0px 4px 20px rgba(15, 80, 100, 0.08);
  text-decoration: none;
  color: var(--text-color);
}

.rd-profile:hover { color: var(--text-color); }

.rd-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.rd-profile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rd-profile-stats {
  font-size: 0.95rem;
  font-weight: 600;
}

.rd-star-inline { color: var(--rd-star); }

.rd-profile-handle {
  margin-left: auto;
  color: var(--text-link-color);
  font-size: 0.9rem;
  white-space: nowrap;
}

@media (max-width: 576px) {
  .rd-profile { flex-wrap: wrap; }
  .rd-profile-handle { margin-left: 0; }
}

/* ── Covers ──────────────────────────────────────────────── */

.rd-cover {
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

.rd-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.rd-cover:hover img { transform: scale(1.04); }

.rd-cover-none {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #fff;
  font-size: 0.8rem;
  opacity: 0.8;
}

.rd-title {
  display: block;
  font-weight: 600;
  color: var(--text-color);
  text-decoration: none;
  line-height: 1.3;
}

.rd-title:hover { color: var(--text-link-color); }

.rd-author {
  display: block;
  color: var(--text-secondary-color);
  font-size: 0.9rem;
}

.rd-meta {
  display: block;
  color: var(--text-secondary-color);
  font-size: 0.8rem;
  margin-top: 0.15rem;
}

.rd-stars {
  position: relative;
  display: inline-block;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 1px;
  margin-top: 0.35rem;
  white-space: nowrap;
}

.rd-stars-base { color: var(--rd-star-empty); }

.rd-stars-fill {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: var(--rd-star);
}

/* ── Currently reading ───────────────────────────────────── */

.rd-current-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  .rd-current-grid { grid-template-columns: 1fr; }
}

.rd-current {
  display: flex;
  gap: 1.25rem;
  padding: 1rem;
  border-radius: 0.75rem;
  background: var(--rd-card-bg);
  box-shadow: 0px 4px 20px rgba(15, 80, 100, 0.08);
}

.rd-current .rd-cover { width: 96px; }

.rd-current-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1;
}

.rd-progress {
  height: 8px;
  border-radius: 4px;
  background: var(--rd-grid);
  overflow: hidden;
  margin-top: 0.75rem;
}

.rd-progress span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--rd-series-1);
}

/* ── Recently finished ───────────────────────────────────── */

.rd-recent-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

@media (max-width: 992px) {
  .rd-recent-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .rd-recent-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

.rd-recent { min-width: 0; }

.rd-recent .rd-cover { margin-bottom: 0.6rem; }

.rd-recent .rd-title {
  font-size: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rd-recent .rd-author { font-size: 0.8rem; }

/* ── Charts ──────────────────────────────────────────────── */

.rd-charts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  .rd-charts { grid-template-columns: 1fr; }
}

.rd-card {
  padding: 1.25rem;
  border-radius: 0.75rem;
  background: var(--rd-card-bg);
  box-shadow: 0px 4px 20px rgba(15, 80, 100, 0.08);
  margin: 0;
}

.rd-chart-title {
  font-weight: 600;
  color: var(--text-color);
  opacity: 0.85;
  margin-bottom: 0.75rem;
}

.rd-chart svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.rd-grid { stroke: var(--rd-grid); stroke-width: 1; }
.rd-baseline { stroke: var(--text-secondary-color); stroke-opacity: 0.45; }

.rd-axis {
  fill: var(--text-secondary-color);
  font-size: 13px;
}

.rd-label {
  fill: var(--text-color);
  font-size: 13px;
  font-weight: 600;
}

.rd-line {
  fill: none;
  stroke: var(--rd-series-1);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.rd-dot {
  fill: var(--rd-series-1);
  stroke: var(--rd-card-bg);
  stroke-width: 2;
  transition: r 0.15s ease;
}

.rd-bar {
  fill: var(--rd-series-1);
  transition: opacity 0.15s ease;
}

.rd-hit { cursor: default; }
.rd-hit:hover .rd-dot { r: 6; }
.rd-chart svg:hover .rd-bar { opacity: 0.55; }
.rd-chart svg .rd-hit:hover .rd-bar { opacity: 1; }

.rd-nowrap { white-space: nowrap; }