/* ==========================================================================
   READER GRID
   ========================================================================== */

.reader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

.reader-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--card-border);
}

.reader-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--accent-medium);
}

.reader-card--compact {
  padding: var(--space-sm) var(--space-md);
}

.reader-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.reader-card__avatar--placeholder { background: var(--bg-inset); }

.reader-card__info { flex: 1; min-width: 0; }

.reader-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.reader-card__stats {
  display: flex;
  gap: var(--space-md);
  margin-top: 2px;
}

.reader-card__stat {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.reader-card__stat--reading { color: var(--reading); }
.reader-card__stat--want { color: var(--want-to-read); }

.reader-card__activity {
  font-size: 0.6875rem;
  color: var(--text-faint);
  flex-shrink: 0;
}

/* --- Reader Detail --- */

.reader-detail__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
}

.reader-detail__user {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
}

.reader-detail__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.reader-detail__user h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  font-variation-settings: 'opsz' 36;
}

/* --- Currently Reading Spotlight --- */

.currently-reading-spotlight {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--reading);
}

.spotlight__title {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--reading);
  margin-bottom: var(--space-md);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-variation-settings: 'opsz' 14;
}

.spotlight__books {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.spotlight__book {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  cursor: pointer;
  transition: var(--transition);
  padding: var(--space-sm);
  margin: calc(var(--space-sm) * -1);
  border-radius: var(--radius-sm);
}

.spotlight__book:hover { background: var(--bg-hover); }

.spotlight__cover {
  width: 40px;
  height: 60px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.spotlight__cover--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-warm);
  color: var(--text-faint);
  font-size: 0.75rem;
}

.spotlight__info { flex: 1; min-width: 0; }

.spotlight__book-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spotlight__book-authors {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.spotlight__progress-label {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--text-muted);
  margin-top: 2px;
  display: block;
}

/* --- Readers Toolbar --- */

.readers-toolbar {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  align-items: center;
}

.readers-search {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  padding: 8px var(--space-md);
  background: var(--bg-surface);
  border: 1px solid var(--bg-inset);
  border-radius: var(--radius-md);
  color: var(--text);
  outline: none;
  transition: var(--transition);
}

.readers-search:focus {
  border-color: var(--accent-medium);
  box-shadow: 0 0 0 2px var(--accent-light);
}

.readers-sort {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  padding: 8px var(--space-md);
  background: var(--bg-surface);
  border: 1px solid var(--bg-inset);
  border-radius: var(--radius-md);
  color: var(--text);
  cursor: pointer;
}

/* --- Stats Banner --- */

.stats-banner {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--card-border);
  flex-wrap: wrap;
}

.stats-banner__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.stats-banner__value {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--text);
  font-variation-settings: 'opsz' 24;
}

.stats-banner__label {
  font-size: 0.6875rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* --- My Log Header --- */

.my-log-header { margin-bottom: var(--space-lg); }

.my-log-header__user {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.my-log-header__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.my-log-header__user h2 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  flex: 1;
  font-variation-settings: 'opsz' 36;
}