/* Links (a character ↔ a place or an event), places, and the Timeline. */

/* ── link rows ── */
.dr-link-rows { margin: 0 0 var(--space-2); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
.dr-link-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); min-height: var(--control-h); }
.dr-link-row > .dr-icon { color: var(--color-text-dimmer); }
.dr-link-name { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
.dr-link-name .dr-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-link-note { flex: none; font-size: var(--text-small); color: var(--color-text-dimmer); }
.dr-link-role { height: var(--control-h-small); font-size: var(--text-small); border-color: transparent; background: transparent; }
.dr-link-role:hover { border-color: var(--color-popover-border); }
.dr-link-remove { width: var(--control-h-small); height: var(--control-h-small); opacity: 0; }
.dr-link-row:hover .dr-link-remove, .dr-link-remove:focus-visible { opacity: 1; }
@media (hover: none) { .dr-link-remove { opacity: 1; } }
.dr-link-adder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }

/* ── places ── */
.dr-place-thumb { border-radius: var(--radius-control); }
.dr-place-image { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.dr-place-picture { width: 100%; max-height: calc(4 * var(--space-24)); object-fit: cover; border-radius: var(--radius-card); }
.dr-place-image-actions { display: flex; gap: var(--space-2); }

/* ── the timeline ── */
.dr-timeline-hint { margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.dr-events { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); max-width: calc(3 * var(--card-min)); }
.dr-event {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-popover-border);
  border-radius: var(--radius-card);
  background: var(--color-popover);
  scroll-margin: var(--space-16);
}
.dr-event[data-flash='true'] { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.dr-event .dr-links { padding: 0; border: 0; }
.dr-event .dr-section-title { margin-bottom: var(--space-1); }
.dr-event-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); }
.dr-event-move { display: flex; flex-direction: column; }
.dr-event-move .dr-icon-button { width: var(--control-h-small); height: var(--space-4); }
.dr-event-titles { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.dr-event-title, .dr-event-date { border-color: transparent; background: transparent; padding: 0 var(--space-1); margin-left: calc(-1 * var(--space-1)); }
.dr-event-title { height: var(--control-h); font-size: var(--text-name); }
.dr-event-date { height: var(--control-h-small); font-family: var(--font-num); font-size: var(--text-small); color: var(--color-text-dim); }
.dr-event-title:hover, .dr-event-date:hover { border-color: var(--color-popover-border); }
.dr-event-category-wrap { width: calc(2 * var(--space-16)); }
.dr-event-delete[data-armed='true'] { color: var(--color-danger); background: var(--color-popover-hover); }
.dr-event-armed { color: var(--color-danger); }
.dr-event-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.dr-event-where { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-dimmer); }
.dr-event-where .dr-select { flex: 1 1 auto; min-width: 0; }

@container app (max-width: 720px) {
  .dr-link-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dr-link-row .dr-link-role { grid-column: 2 / 3; grid-row: 2; }
  .dr-link-adder { grid-template-columns: minmax(0, 1fr) auto; }
  .dr-link-adder > .dr-select, .dr-link-adder > input { grid-column: 1 / -1; }
  .dr-event-head { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .dr-event-category-wrap { grid-column: 3 / 5; grid-row: 2; width: auto; }
  .dr-event-body { grid-template-columns: minmax(0, 1fr); }
}