/* The character grid: cards in the spirit of Baretext's corkboard. */

.dr-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }

.dr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: var(--space-3);
}

.dr-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-popover-border);
  border-radius: var(--radius-card);
  background: var(--color-popover);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.dr-card:hover { border-color: var(--color-text-dimmer); }
.dr-card:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.dr-card[aria-current='true'] { border-color: var(--color-accent); }
.dr-grid[data-reorder='on'] .dr-card { cursor: grab; }

/* The character's accent: a stored color (shown as-is), as a bar down the card's edge. */
.dr-card-accent { position: absolute; inset: 0 auto 0 0; width: var(--accent-bar); background: var(--accent-color); }

.dr-card-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.dr-card-portrait {
  flex: none;
  width: var(--card-portrait);
  height: var(--card-portrait);
  border-radius: 50%;
  object-fit: cover;
}
.dr-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-monogram);
  color: var(--color-text-dim);
  font-family: var(--font-num);
  font-size: var(--text-small);
  letter-spacing: 0.04em;
}
.dr-card-titles { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.dr-card-name {
  margin: 0;
  font-size: var(--text-name);
  line-height: var(--lh-ui);
  font-weight: 400;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.dr-card-name[data-unnamed='true'] { color: var(--color-text-dimmer); font-style: italic; }
.dr-card-summary { margin: 0; font-size: var(--text-small); line-height: var(--lh-ui); color: var(--color-text-dim); }
.dr-card-summary[data-empty='true'] { color: var(--color-text-dimmer); }
.dr-card-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }

.dr-card-loading { cursor: default; min-height: calc(var(--card-portrait) + 2 * var(--space-3)); }
.dr-card-loading:hover { border-color: var(--color-popover-border); }