/* Small shared pieces: flashes, badges, chips, loan banner, pagination,
 * keyword cloud, plain lists. Rectangles, hairlines, no shadows. */

.flash {
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.7rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  margin: 0 0 1.5rem;
}
.flash-alert { border-left-color: var(--signal); }

.badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  vertical-align: middle;
  line-height: 1.4;
}
.badge-loan { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 1rem 0; }
.chip {
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}
.chip:hover { border-color: var(--ink); text-decoration: none; }
.chip-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip-clear { color: inherit; text-decoration: none; font-weight: 700; }

/* "ON LOAN" — an ink label on the cover's top edge, large enough to read
   at grid size; the only state the shelf shows. Ink-on-paper works on every
   tone except the ink-colored one, which flips it. */
.loan-flag {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 0.35rem 0.7rem;
  line-height: 1.2;
}
.cover-tone-2 + .loan-flag { background: var(--paper); color: var(--ink); }
/* Give a flagged generated cover room so the label never sits on its title. */
.book-card-cover:has(.loan-flag) .cover-placeholder { padding-top: 2.6rem; }

.loan-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 3px solid var(--signal);
  border-bottom: 1px solid var(--rule);
  padding: 0.9rem 0;
  margin: 1.2rem 0;
}
.loan-banner p { margin: 0; }

.loan-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule-strong); }
.loan-row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}
.loan-title { font-weight: 600; }
.loan-row form { margin-left: auto; }

.pagination {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: baseline;
  margin: 2.5rem 0 1rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.keyword-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  align-items: baseline;
  margin-top: 1.5rem;
}
.keyword {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: calc(var(--weight, 1) * 1.1em);
  color: var(--ink);
}
.keyword:hover { color: var(--accent); text-decoration: none; }

.plain-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule-strong); }
.plain-list li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  flex-wrap: wrap;
}
.plain-list form { display: inline; }

.empty-state { color: var(--muted); }