/* Directory: the roster the agent learned (/directory), one person (/directory/people/<id>),
   and the deactivate and merge confirm pages. Tokens and components from style.css. */

.dir { max-width: 960px; }
.dir .card { margin-top: var(--s4); }
.dir h2.label { margin: 0 0 var(--s2); }
.dir-back { margin: 0 0 var(--s2); font-size: var(--t-meta); }
.dir-search { width: min(360px, 100%); }
.dir-muted { color: var(--muted); }
.dir-addr { margin-left: var(--s2); color: var(--muted); }

/* a row: who on the left, the actions on the right */
.dir-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; justify-content: space-between; }
.dir-who { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; min-width: 0; }
.dir-who .meta { flex-basis: 100%; }
.dir-acts { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.dir-acts form, .dir-inline { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: 0; }
.dir-add { margin-top: var(--s3); }
.dir-add .field { width: min(320px, 100%); }

/* a responsibility and who holds it */
.dir-resp { min-width: 200px; font-weight: 600; }
.dir-holder { display: inline-flex; gap: var(--s1); align-items: baseline; }
.dir-holder + .dir-holder::before { content: "·"; margin-right: var(--s1); color: var(--faint); }
.dir-nobody { color: var(--amber); }
.dir-x { display: inline; margin: 0; }
.dir-x-btn { padding: 0 var(--s1); border: 0; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.dir-x-btn:hover { color: var(--red); }
.dir-suggest { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; }
.dir-suggest p { margin: 0; }

/* the people table */
.dir-table td .chip { margin: 0 var(--s1) var(--s1) 0; }
.dir-mail { display: inline-flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: center; }
.dir-mail .chip { margin: 0; }
.dir-person .dir-table td { vertical-align: middle; }
.dir-table td .meta { margin-top: 2px; }

/* forms on the person page and "Add a person" */
.dir-form { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); align-items: flex-end; margin: 0 0 var(--s3); }
.dir-form label, .dir-wide { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--t-meta); color: var(--muted); }
.dir-form .field { min-width: 200px; color: var(--ink); font-size: var(--t-body); }
.dir-wide { flex: 1 1 100%; margin-top: var(--s3); }
.dir-wide .field { width: 100%; color: var(--ink); font-size: var(--t-body); }
.dir-check { display: inline-flex !important; flex-direction: row !important; gap: var(--s2); align-items: center; color: var(--ink) !important; font-size: var(--t-body) !important; }
.dir-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--acc); }
.dir-checks { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0 0 var(--s3); }
.dir-addperson { margin-top: var(--s4); }
.dir-addperson > summary { list-style: none; }
.dir-addperson > summary::-webkit-details-marker { display: none; }
.dir-addperson[open] > summary { margin-bottom: var(--s4); }
.dir-inactive > summary { margin: 0; }
.dir-inactive[open] > summary { margin-bottom: var(--s2); }
.dir-status { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.dir-danger { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; }
.dir-confirm { display: flex; gap: var(--s3); align-items: center; margin: var(--s4) 0 0; }

/* the avatar links to the Directory until the avatar menu takes it */
a.avatar:hover { text-decoration: none; filter: brightness(1.08); }

@media (max-width: 700px) {
  .dir-resp { min-width: 0; flex-basis: 100%; }
  .dir-form .field { min-width: 0; width: 100%; }
  .dir-form label { flex: 1 1 100%; }
  .dir-table thead { display: none; }
  .dir-table tr { display: block; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
  .dir-table td { display: block; padding: 2px 0; border: 0; }
}