/* ── Person list: mobile card view ──────────────────
   The 10-column table degrades on phones; below the breakpoint it is swapped for
   this stacked "service-card" list (see media query near the mobile shell block).
   Reads like an облікова картка: a 3:4 dossier portrait, the callsign as the hero
   line, a mono readout of rank/unit/location, tags, and a status-coloured spine.
   Portrait and body are centre-aligned so neither leaves a dead gap. Hidden on
   desktop. The card-list container scaffold is shared with .list-cards — see the
   grouped .person-cards, .list-cards rule in the shared-list-card block below. */
.pcard {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border);
  border-left: 3px solid var(--spine, var(--border-bright));
  border-radius: var(--radius); background: var(--panel-2);
  transition: border-color .12s, background .12s;
}
.pcard:hover {
  background: var(--panel-3); border-color: var(--accent-2);
  border-left-color: var(--spine, var(--accent-2)); text-decoration: none;
}

/* Top block — the identity: portrait + name + callsign + status. */
.pcard-top { display: flex; align-items: center; gap: 13px; padding: 12px 14px; }
.pcard-portrait { flex: none; width: 58px; height: 77px; }
.pcard-portrait .list-initials { font-size: 18px; }
.pcard-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pcard-row1 { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pcard-name {
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px; line-height: 1.25;
  color: var(--text-strong); min-width: 0;
}
.pcard-status { flex: none; margin-top: 1px; }
/* Callsign — the identity line in this world, so it gets the accent, not the name. */
.pcard-cs {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--accent-2); letter-spacing: .2px;
}

/* Bottom block — the full record, past a divider with room to breathe: every
   table field as a label-over-value cell, the tag row spanning full width. The
   faint recess sets it apart from the identity block above. */
.pcard-readout {
  display: flex; flex-wrap: wrap; gap: 12px 22px;
  padding: 13px 14px; border-top: 1px solid var(--border);
  background: var(--panel);
}
.pcard-readout .ro { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pcard-readout .ro-wide { flex-basis: 100%; }
.pcard-readout .ro-v { max-width: none; white-space: normal; }
/* A person card's spine colour arrives inline as `--spine`, off its «Стан» row —
   see the note in pages/search.css. */