/* ── Shared list card: mobile fallback for tabular lists ──────────────
   One plain card component for every wide list that degrades on phones
   (subdivisions, locations, users, movements, journal). Below the card breakpoint
   the .table-wrap.has-card-fallback is hidden and a .list-cards stack is shown
   instead. A card is a header (a primary identifier on the left, an optional badge
   or status on the right) over a body: an optional title line, then a plain
   label→value field list. No portraits, tiles or big numbers. An optional
   data-status paints the left spine (see the status→spine block above). Hidden on
   desktop. Person cards keep their own richer .pcard; this is the flat variant.
   The list container scaffold is shared with the person list's .person-cards. */
.person-cards, .list-cards { display: none; flex-direction: column; gap: 9px; list-style: none; padding: 0; margin: 0; }
.person-cards > li, .list-cards > li { margin: 0; }

.list-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border);
  border-left: 3px solid var(--spine, var(--accent-2));
  border-radius: var(--radius); background: var(--panel-2);
  transition: border-color .12s, background .12s;
}
.list-card:hover {
  background: var(--panel-3); border-color: var(--accent-2);
  border-left-color: var(--spine, var(--accent-2)); text-decoration: none;
}
/* Header: primary identifier (left, mono) + optional badge/status (right). Wraps
   defensively so a badge that outgrows its row drops to its own line intact (that is
   `.badge`'s own `nowrap`, in `components/badges.css` — this header is simply where it
   was first needed) instead of tearing the identifier mid-string. */
.list-card-top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 10px;
  padding: 9px 14px; border-bottom: 1px solid var(--border);
}
.list-card-code {
  font-family: var(--font-mono); font-weight: 700; font-size: 14px;
  color: var(--accent-2); letter-spacing: .5px; white-space: nowrap;
}
/* Alternative header identifier for name-like primaries (e.g. a location) — a
   plain strong label instead of the mono code/number. */
.list-card-name {
  font-weight: 600; font-size: 14px; color: var(--text-strong);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Body: optional title line, then a plain label→value field list. */
.list-card-body { padding: 11px 14px; background: var(--panel); }
.list-card-title {
  font-size: 14px; line-height: 1.3; color: var(--text-strong); margin-bottom: 9px;
}
.list-card-fields { margin: 0; display: flex; flex-direction: column; gap: 5px; }
.list-card-fields > div {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; line-height: 1.4;
}
.list-card-fields dt { color: var(--muted-2); margin: 0; flex: none; }
.list-card-fields dd {
  color: var(--text); margin: 0; text-align: right; min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
}
.list-card-fields dd a { color: var(--accent-2); }
/* Movement route line — full width under the title, wraps instead of truncating.
   Self-contained (arrow gap + alignment) so it needn't borrow .m-route's inline-flex.
   The whole card is a link, so pin the base text colour here (else the from-location
   inherits the link accent); the child .m-to / .m-first keep their own status colours. */
.list-card-route {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 13px; margin-bottom: 9px; color: var(--text);
}