/* Library (docs/RESOURCES.md): the shelves' cards, the Approved mark, the add panel and the change dialog.
   Locky Design System tokens only; the drop zone and upload rows are the shared ones in styles.css. */

.rs-toolbar { margin-bottom: 8px; }
.rs-approved-only { flex: none; }
.rs-shelves { margin-bottom: 16px; }
.rs-groups { display: grid; gap: 18px; }
.rs-group { margin: 0; }

/* ---------- cards */
.rs-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.rs-card {
  display: grid; grid-template-rows: auto 1fr auto; gap: 8px; min-width: 0; padding: 10px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-s); background: var(--raised);
}
.rs-tile {
  display: grid; place-items: center; align-content: center; gap: 4px; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-s); background: var(--sunk); border: 1.5px solid var(--line); color: var(--muted);
}
.rs-tile-picture { position: relative; }
.rs-tile-picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.rs-tile-type { font-size: 12.5px; font-weight: 800; letter-spacing: .02em; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-card-text { display: grid; gap: 4px; min-width: 0; align-content: start; }
/* Approved: a green band down the card's leading edge as well as the chip, so it reads without colour too. */
.rs-card-approved { box-shadow: inset 4px 0 0 var(--ok-ink); }
.rs-card-text .chip { justify-self: start; }
.rs-card-name { font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.rs-card-note { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; white-space: pre-line; }
.rs-card-text .small { margin: 0; overflow-wrap: anywhere; }
.rs-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rs-card-actions .btn-ghost { margin-left: auto; }
.rs-card-actions a.btn { text-decoration: none; }

/* ---------- adding */
.rs-add-area:empty { display: none; }
.rs-add-area { margin-bottom: 18px; }
.rs-form { display: grid; gap: 10px; }
.rs-form .toolbar { margin: 0; align-items: start; }
.rs-form textarea { width: 100%; }
.rs-form .uploads { list-style: none; margin: 0; padding: 0; }

/* ---------- changing */
.rs-dialog { width: min(480px, calc(100% - 32px)); }
.rs-newer { display: grid; gap: 6px; justify-items: start; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-s); background: var(--sunk); }
.rs-newer p { margin: 0; overflow-wrap: anywhere; }
.rs-dialog .rs-remove { margin-right: auto; }

@media (max-width: 520px) {
  .rs-grid { grid-template-columns: 1fr; }
  .rs-card { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto auto; }
  .rs-tile { aspect-ratio: 1; grid-row: 1; }
  .rs-card-actions { grid-column: 1 / -1; }
}