/* The memory page. One row per confirmation, wide enough to read the item
   name and the file it points at side by side, because the whole point of
   the page is checking that those two belong together. */

.top-nav { display: flex; gap: 8px; align-items: center; }

.mem-list { display: grid; gap: 10px; }

.mem-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: start;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-2);
}

.mem-thumb {
  width: 64px; height: 64px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  overflow: hidden;
  font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.3;
}
.mem-thumb img { width: 100%; height: 100%; object-fit: contain; }
/* A file the index cannot see right now - not a lost confirmation. */
.mem-thumb.gone { border-style: dashed; border-color: var(--warn); color: var(--warn); }

.mem-meta { min-width: 0; display: grid; gap: 5px; }
.mem-name { font-size: 14.5px; font-weight: 600; word-break: break-word; }
.mem-sub { display: flex; flex-wrap: wrap; gap: 6px; }
.mem-file {
  color: var(--muted); font-size: 12px; word-break: break-all;
}
.mem-note {
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 7px;
  padding: 5px 9px; font: inherit; font-size: 12.5px;
  max-width: 460px;
}

.chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 11.5px;
  color: var(--text);
}
.chip.dim { color: var(--muted); }

.mem-actions { display: flex; flex-direction: column; gap: 6px; }

.btn.danger { border-color: rgba(239, 90, 90, .45); color: var(--bad); }
.btn.danger:hover { background: rgba(239, 90, 90, .12); }

@media (max-width: 720px) {
  .mem-row { grid-template-columns: 48px 1fr; }
  .mem-thumb { width: 48px; height: 48px; }
  .mem-actions { grid-column: 1 / -1; flex-direction: row; }
  .mem-note { max-width: none; }
}