/* Additive styles only — shared chrome (.hero, .panel, .hero-button,
   .search-modal family, .queue-list family, .reader-modal family) comes from
   ../styles.css so this app stays a visual sibling of the book downloader
   without duplicating that CSS. */

.categories-panel.hidden,
.hidden {
  display: none;
}

.categories-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.category-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

.category-row input {
  accent-color: var(--accent);
}

.category-row span.category-label {
  flex: 1;
  font-size: 0.92rem;
}

.category-row span.category-count {
  color: var(--muted);
  font-size: 0.8rem;
}

.manual-panel summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.manual-panel summary::-webkit-details-marker {
  display: none;
}

.manual-panel summary i {
  margin-right: 6px;
}

.manual-form {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.manual-form textarea {
  width: 100%;
  resize: vertical;
  min-height: 90px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.7);
  font: inherit;
  color: var(--ink);
}

.manual-form-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.manual-format {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
}

/* Job rows reuse .queue-row/.queue-row-info/.queue-row-message from the book
   app's stylesheet; this just adds the category badge + open-reader link. */
.job-row-category {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(160, 63, 36, 0.12);
  color: var(--accent-strong);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.job-row-open {
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  padding: 0;
}

.poet-search-results .search-result {
  text-align: center;
}

.poet-search-results .search-cover {
  margin: 0 auto 8px;
  border-radius: 50%;
}

/* .reader-shell/.reader-toolbar/.reader-stage come from ../styles.css and
   already give the book reader its fullscreen, compact-toolbar layout. The
   book reader only ever holds one bounded image, so it never needed
   min-height:0 on the flex chain -- text content is unbounded, so without it
   the stage refuses to shrink below its content and pushes the toolbar off
   the bottom of the screen with no visible scrollbar. Also give the stage an
   actual light reading background: the shared dark modal backdrop is meant
   to frame a page image, not sit directly behind body text in the site's
   normal (dark-on-light) text colors. */
.reader-shell {
  position: relative;
  min-height: 0;
}

.reader-toolbar-actions {
  display: flex;
  gap: 6px;
}

/* Sticky (not overlaid) so it never covers the title/body text -- it's a
   normal flow child of the stage that just stays pinned while you scroll. */
.reader-format-bar {
  position: sticky;
  top: -28px;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: 0 0 16px;
  padding: 10px 0 8px;
  background: linear-gradient(var(--bg) 75%, rgba(244, 239, 230, 0));
}

.reader-format-bar select,
.reader-format-bar input {
  border: none;
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.92);
  box-shadow: 0 6px 16px rgba(59, 37, 16, 0.18);
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink);
  padding: 6px 12px;
}

.reader-format-bar input {
  width: 90px;
}

@media (max-width: 640px) {
  .reader-format-bar {
    justify-content: center;
  }

  .reader-format-bar select,
  .reader-format-bar input {
    font-size: 0.78rem;
  }
}

.poetry-reader-stage {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  padding: 28px clamp(16px, 5vw, 56px) 60px;
  background: var(--bg);
  touch-action: pan-y;
}

.poetry-reader-stage > * {
  width: 100%;
  max-width: 760px;
}

.reader-source {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.reader-title {
  margin: 0 0 4px;
  font-family: "Mehr", "Payami", serif;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
}

.reader-author {
  margin: 0 0 20px;
  color: var(--muted);
}

.reader-body {
  font-family: "Mehr", "Payami", serif;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 2.1;
}

.reader-body--prose {
  text-align: justify;
  text-justify: inter-word;
  line-height: 2;
  white-space: pre-wrap;
}