/* ─── directory.css ──────────────────────────────────────────────────────────
   Public agent directory (list of condensed passport cards). Requires
   css/shared.css and css/passport.css loaded first — reuses .status-chip,
   .status-pill-*, .empty-state, .honesty-panel from passport.css rather
   than forking a new visual language, per the directory brief.
   ─────────────────────────────────────────────────────────────────────────── */

.directory-page { min-height: 100vh; padding: 0 20px 64px; }
.directory-main { max-width: 1080px; margin: 0 auto; }

.directory-toolbar {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.directory-toolbar input[type="search"] { flex: 1; min-width: 220px; }
.directory-toolbar select { min-width: 180px; }

.directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

.dir-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  transition: border-color .15s, box-shadow .15s;
}
.dir-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); color: inherit; }

.dir-card-top { display: flex; align-items: center; gap: 12px; }
.dir-card-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 35%, #ef9a63, #e0662a);
}
.dir-card-headline { flex: 1; min-width: 0; }
.dir-card-name { font-size: 15px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-card-category { font-size: 11px; margin-top: 2px; }
.dir-card-desc {
  font-size: 13px; color: var(--dim); line-height: 1.55; margin-top: 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dir-card-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

@media (max-width: 640px) {
  .directory-toolbar select { flex: 1; min-width: 140px; }
}