.catch-journal { margin: 0 0 72px; }
.catch-journal .section-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
.catch-journal .section-title h2, .catch-journal .section-title .eyebrow { margin: 0; }
.catch-journal .section-title .eyebrow { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.catch-journal .section-title .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--leaf, #93bf7a); }
.catch-journal .section-title button { margin-left: auto; min-height: 44px; }
.catch-journal > .fine { max-width: 70ch; margin: 16px 0 0; }
#recent-catches-status { margin-top: 4px; }
#recent-catches-status:empty { display: none; }
/* The list shows the same information, so keep the live status for screen readers only. */
.catch-journal:has(#recent-catches-list > li) #recent-catches-status:not(.error) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.catch-journal ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; padding: 0; margin: 20px 0 0; list-style: none; }
.catch-entry { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border: 1px solid var(--line); border-radius: var(--radius, 10px); background: var(--panel); }
.catch-icon { width: 44px; height: 44px; padding: 6px; box-sizing: border-box; border-radius: 8px; background: var(--raised) url('/monsters-v1.png?v=placeholder-20261020') no-repeat; background-origin: content-box; background-clip: content-box; box-shadow: inset 0 0 0 6px var(--raised); image-rendering: pixelated; }
.catch-icon.art-pending { background-image: none; }
.catch-entry:has(> .monster-custom-art) { grid-template-columns: auto minmax(0, 1fr) auto; }
/* The magnifying glass sits in the top-right corner; the time moves down out of its way. */
.catch-entry .inspect-link { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; margin: 0; border-radius: 8px; }
.catch-entry:has(> .inspect-link) time { align-self: end; }
.catch-entry .monster-custom-art { width: var(--monster-art-size); height: var(--monster-art-size); box-sizing: content-box; flex-shrink: 0; aspect-ratio: 1; }
.catch-details { min-width: 0; overflow-wrap: anywhere; }
.catch-details p { margin: 0; font-size: 15px; color: var(--muted); }
.catch-details strong { color: var(--ink); font-weight: 600; }
.catch-details a { display: inline-flex; align-items: center; min-height: 44px; }
.catch-details .catch-metadata { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; margin-top: 2px; color: var(--faint, #857e8c); }
.catch-type { color: var(--muted); }
.catch-type + span::before { content: "·"; margin-right: 10px; }
.catch-entry time { font-size: 13px; color: var(--faint, #857e8c); white-space: nowrap; font-variant-numeric: tabular-nums; }
.catch-empty { grid-column: 1 / -1; padding: 20px; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: var(--radius, 10px); }
.catch-journal .error { color: var(--danger, #ff9fab); }
@media (max-width: 950px) { .catch-journal ol { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
  .catch-journal .section-title .eyebrow { margin-left: 0; width: 100%; }
  .catch-entry { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; }
  .catch-entry:has(> .monster-custom-art) { grid-template-columns: auto minmax(0, 1fr); }
  .catch-entry .catch-icon { grid-row: span 2; }
  .catch-entry time { grid-column: 2; }
}