/* V51 — focused polish: desktop Points placement + tighter beta reader reactions. */

/* Book: place the reader letter directly beneath the full cover on desktop. */
body[data-page="book"] .book-cover-column {
  width: 100%;
  min-width: 0;
}
body[data-page="book"] .points-invite-desktop {
  display: none;
}

@media (min-width: 981px) {
  body[data-page="book"] .book-cover-column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  body[data-page="book"] .points-invite-desktop {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(420px, 72%);
    margin: 24px auto 0 !important;
    padding: 18px 0 6px !important;
    min-height: 0 !important;
    text-align: center;
    border-top: 1px solid rgba(215,182,122,.18);
  }
  body[data-page="book"] .points-invite-copy {
    display: none !important;
  }
  body[data-page="book"] .points-invite-desktop .points-invite-kicker {
    width: 100%;
    text-align: center;
  }
  body[data-page="book"] .points-invite-desktop strong {
    margin: 6px auto 0 !important;
  }
  body[data-page="book"] .points-invite-desktop::after {
    margin: 13px auto 0 !important;
  }
}

/* Mobile/tablet keeps the already-approved invitation placement. */
@media (max-width: 980px) {
  body[data-page="book"] .points-invite-desktop {
    display: none !important;
  }
  body[data-page="book"] .points-invite-copy {
    display: block !important;
  }
}

/* Home: beta-reader reactions should be a slim strip, not three tall panels. */
body[data-page="home"] .reader-notes-section {
  padding: 9px 0 10px !important;
}
body[data-page="home"] .reader-notes-grid {
  gap: 8px !important;
}
body[data-page="home"] .reader-note {
  padding: 7px 13px 6px !important;
}
body[data-page="home"] .reader-note p {
  font-size: .91rem !important;
  line-height: 1.22 !important;
}
body[data-page="home"] .reader-note footer {
  margin-top: 4px !important;
  font-size: .64rem !important;
  line-height: 1.15 !important;
}

@media (max-width: 760px) {
  body[data-page="home"] .reader-notes-section {
    padding: 10px 0 11px !important;
  }
  body[data-page="home"] .reader-notes-grid {
    gap: 6px !important;
  }
  body[data-page="home"] .reader-note {
    padding: 7px 12px 6px !important;
  }
  body[data-page="home"] .reader-note p {
    font-size: .9rem !important;
    line-height: 1.22 !important;
  }
}