/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablet */
@media (max-width: 768px) {
  .topbar {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
  }

  .topbar__burger { display: flex; margin-left: auto; }

  .topbar__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    backdrop-filter: blur(16px);
    flex-direction: column;
    padding: var(--space-md);
    border-bottom: 1px solid var(--bg-inset);
    box-shadow: var(--shadow-md);
    z-index: 99;
  }

  .topbar--open .topbar__nav { display: flex; }

  /* Hide desktop user area, show the one inside nav */
  .topbar__user:not(.topbar__user--mobile) { display: none; }
  .topbar__user--mobile { display: none; }
  .topbar--open .topbar__user--mobile {
    display: flex;
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--bg-inset);
    margin-top: var(--space-xs);
  }

  .tab-btn {
    padding: 10px var(--space-md);
    font-size: 0.875rem;
    text-align: left;
    width: 100%;
  }

  .tab-btn--active::after { display: none; }

  .main {
    padding: var(--space-md) var(--space-sm);
  }

  .panel__title { font-size: 1.375rem; }

  /* Community stats */
  .community-stats__numbers {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .hero-stat {
    padding: var(--space-md) var(--space-sm);
  }

  .hero-stat__value { font-size: 1.5rem; }

  .community-stats__grid {
    grid-template-columns: 1fr;
  }

  /* Activity filters */
  .activity-filters {
    gap: 4px;
  }
  .activity-filter {
    font-size: 0.6875rem;
    padding: 4px 10px;
  }

  /* Book grid */
  .book-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: var(--space-sm);
  }

  .book-card__info {
    padding: 6px 8px 8px;
  }

  .book-card__title { font-size: 0.75rem; }
  .book-card__authors { font-size: 0.625rem; }

  /* Book actions (currently reading buttons) */
  .book-actions {
    flex-wrap: wrap;
  }
  .book-action {
    font-size: 0.5625rem;
    padding: 3px 4px;
  }

  /* Timeline events */
  .tl-event {
    padding-left: var(--space-sm);
  }

  .tl-event__content {
    padding: var(--space-sm);
  }

  .tl-event__header {
    gap: 4px;
    flex-direction: column;
    align-items: flex-start;
  }

  .tl-event__time {
    margin-left: 0;
    margin-top: 0;
  }

  .tl-event__icon-col { width: 22px; }
  .tl-event__icon { width: 20px; height: 20px; font-size: 0.5rem; }

  .timeline__events {
    padding-left: 10px;
    margin-left: 4px;
  }

  /* Reader grid */
  .reader-grid { grid-template-columns: 1fr; }

  .readers-toolbar {
    flex-direction: column;
    gap: var(--space-sm);
  }
  .readers-search { width: 100%; }

  .reader-detail__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .reader-detail__user {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .reader-detail__user h2 { font-size: 1.125rem; }

  /* Stats banner compact */
  .stats-banner {
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    justify-content: space-between;
  }
  .stats-banner__value { font-size: 0.9375rem; }
  .stats-banner__label { font-size: 0.5625rem; }

  /* Sub tabs scroll */
  .sub-tabs {
    gap: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .sub-tabs::-webkit-scrollbar { display: none; }

  .sub-tab {
    padding: var(--space-sm) 10px 10px;
    font-size: 0.75rem;
  }

  /* Spotlight */
  .currently-reading-spotlight {
    padding: var(--space-md);
  }

  .spotlight__cover { width: 32px; height: 48px; }
  .spotlight__book-title { font-size: 0.8125rem; }

  /* Challenges */
  .challenge-grid { grid-template-columns: 1fr; }
  .challenge-card { padding: var(--space-md); }

  /* Big stats */
  .big-stats { grid-template-columns: repeat(3, 1fr); }

  /* Stats sections */
  .stats-section { padding: var(--space-md); }

  /* Drilldown */
  .drilldown { padding: var(--space-md); }
  .drilldown__header { flex-direction: column; align-items: flex-start; }

  /* Modal */
  .modal {
    padding: var(--space-md);
    margin: var(--space-sm);
    max-height: calc(100vh - var(--space-md));
  }

  .modal-book__top {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
  }

  .modal-book__cover {
    width: 140px;
    min-height: 210px;
  }

  .monthly-chart { height: 120px; }

  .stats-header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Series groups */
  .series-group__books {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  /* Search */
  .list-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .list-search { max-width: 100%; }
  .list-sort { width: 100%; }

  /* My Log header */
  .my-log-header__user {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  .my-log-header__user h2 {
    width: 100%;
    font-size: 1.125rem;
  }

  /* Export dropdown */
  .export-dropdown__menu {
    right: auto;
    left: 0;
  }

  /* DNF list */
  .dnf-item { padding: var(--space-sm) var(--space-md); }

  /* Compare */
  .compare-header {
    flex-direction: column;
    gap: var(--space-md);
  }
  .compare-vs { display: none; }
  .compare-stats-row {
    flex-direction: column;
    gap: var(--space-sm);
  }
  .compare-book__ratings {
    flex-shrink: 0;
  }

  /* Search results in modal */
  .search-result {
    flex-wrap: wrap;
  }
  .search-result__actions {
    flex-direction: row;
    width: 100%;
    padding-top: var(--space-xs);
  }

  /* Recommendations */
  .recommendations {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
  }

  /* Batch rate */
  .batch-rate__book {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .batch-rate__cover { width: 80px; height: 120px; }
  .rate-grid { justify-content: center; }
}

/* Phone */
@media (max-width: 480px) {
  .main { padding: var(--space-sm); }

  .panel__header { margin-bottom: var(--space-md); }
  .panel__title { font-size: 1.25rem; }

  .community-stats__numbers {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .hero-stat { padding: var(--space-sm); }
  .hero-stat__value { font-size: 1.25rem; }
  .hero-stat__label { font-size: 0.5625rem; }

  .big-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .big-stat { padding: var(--space-md) var(--space-sm); }
  .big-stat__value { font-size: 1.25rem; }

  .book-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .book-card__info { padding: 4px 6px 6px; }
  .book-card__title { font-size: 0.6875rem; -webkit-line-clamp: 1; }
  .book-card__authors { display: none; }
  .book-card__badges { display: none; }
  .book-actions { display: none; }

  .tl-event__cover { width: 24px; height: 36px; }

  .reader-card { padding: var(--space-sm) var(--space-md); }
  .reader-card__avatar { width: 32px; height: 32px; }
  .reader-card__name { font-size: 0.8125rem; }

  .activity-event__left { min-width: 0; }

  .monthly-chart { height: 100px; }
  .mini-chart { height: 70px; }

  .modal { padding: var(--space-sm); }
  .modal-book__cover { width: 120px; min-height: 180px; }
  .modal-book__title { font-size: 1.125rem; }

  .topbar__brand-text { display: none; }
  .topbar__logo { width: 18px; height: 22px; }

  /* Stats banner even more compact */
  .stats-banner {
    gap: var(--space-sm);
    padding: var(--space-sm);
  }
  .stats-banner__value { font-size: 0.8125rem; }

  /* Search modal */
  .add-book-search {
    flex-direction: column;
  }
}

/* Ensure touch targets are large enough */
@media (pointer: coarse) {
  .tab-btn { min-height: 44px; }
  .sub-tab { min-height: 40px; }
  .btn { min-height: 36px; }
  .reader-card { min-height: 56px; }
  .load-more-btn { min-height: 44px; padding: 10px var(--space-xl); }
  .book-action { min-height: 32px; }
  .remove-book-btn { width: 28px; height: 28px; }
}