.convoy-list {margin:0}
.convoy-card {padding:18px 20px;overflow-wrap:anywhere;scroll-margin:12px}
.convoy-card+.convoy-card {border-top:1px solid var(--line)}
.convoy-card:focus {outline:2px solid var(--accent);outline-offset:-2px}
.convoy-card-head,.convoy-badges,.convoy-actions,.convoy-date {display:flex;align-items:center;flex-wrap:wrap}
.convoy-card-head {justify-content:space-between;align-items:flex-start;gap:8px 14px}
.convoy-card-head h3 {margin:4px 0 0;font-size:21px}
.convoy-date {gap:6px;margin:0;color:var(--muted);font-size:13px}
.convoy-date .icon {color:var(--accent);width:16px;height:16px}
.convoy-badges,.convoy-actions {gap:7px}
.convoy-route {display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:15px 0;padding:11px 14px;border-left:2px solid var(--accent);background:var(--soft);border-radius:3px}
.convoy-route dt,.convoy-attendance small,.convoy-attendance li small {font-size:12px;color:var(--muted)}
.convoy-route dd {margin:3px 0 0;font-size:14px;overflow-wrap:anywhere}
.convoy-attendance {display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;font-size:13px}
.convoy-attendance ul {display:flex;list-style:none;flex-wrap:wrap;gap:4px 12px;padding:0;margin:0}
.convoy-attendance li small {display:block}
.convoy-actions {margin-top:14px}
.convoy-notice {margin:10px 0;color:#eec082;font-size:13px}
.convoy-zone {margin:0 0 14px}
.convoy-form-event {margin:0 0 10px}
@media(max-width:620px) {
  .convoy-card {padding:14px}
  .convoy-route {grid-template-columns:1fr;gap:8px}
}