/* Directory and profile pages. Rendered by the profiles service, styled with
   the same tokens as everything else. */

.dir__filters {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-4);
  align-items: end;
  padding-bottom: var(--s-5);
  border-bottom: var(--rule-w) solid var(--rule);
}
@media (min-width: 52rem) {
  .dir__filters { grid-template-columns: 1fr 14rem 12rem auto; }
}
select.field__input { border-bottom: 2px solid var(--rule-strong); padding-block: var(--s-2); }

.dir__count { margin-top: var(--s-4); font-size: 0.84rem; color: var(--ink-faint);
              font-variant-numeric: tabular-nums; }

.dir__list { margin-top: var(--s-3); padding: 0; list-style: none;
             border-top: 2px solid var(--ink); }
.dir__row { border-bottom: var(--rule-w) solid var(--rule); }
.dir__link { display: block; padding-block: var(--s-4); text-decoration: none; color: inherit;
             transition: background var(--t-fast) var(--ease); }
.dir__link:hover { background: var(--surface-sunk); }
.dir__name { font-weight: var(--w-strong); font-size: 1.04rem; }
.dir__link:hover .dir__name { text-decoration: underline;
  text-decoration-color: var(--accent); text-underline-offset: 3px; }
.dir__meta { margin-top: 0.15rem; font-size: 0.82rem; color: var(--ink-faint); }
.dir__desc { margin-top: var(--s-2); font-size: 0.94rem; color: var(--ink-secondary);
             max-width: 60ch; line-height: 1.55; }
.dir__certs { margin-top: var(--s-2); font-size: 0.8rem; color: var(--ink-muted); }
.dir__empty { padding-block: var(--s-7); color: var(--ink-muted); }
.dir__add { margin-top: var(--s-6); }
a.btn { text-decoration: none; }

/* --- profile -------------------------------------------------------------- */

.profile { padding-block: var(--s-8) var(--s-9); max-width: 52rem; }
.profile__meta { margin-top: var(--s-4); font-size: 0.86rem; color: var(--ink-faint); }

/* The honesty notice. It is the single most important element on the page:
   without it every self-declared field reads as something Rekaro stands behind. */
.profile__flag {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: var(--rule-w) solid var(--mark);
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
}
.profile__flag-title { font-weight: var(--w-strong); font-size: 0.92rem; }
.profile__flag-body { margin-top: var(--s-2); font-size: 0.9rem; color: var(--ink-secondary);
                      max-width: 60ch; line-height: 1.6; }

.profile__desc { margin-top: var(--s-5); font-size: 1.06rem; line-height: 1.7;
                 color: var(--ink-secondary); max-width: 44rem; }

.profile__grid { margin-top: var(--s-6); display: grid; gap: var(--s-5); }
@media (min-width: 44rem) { .profile__grid { grid-template-columns: 1fr 1fr; } }
.profile__grid > div { padding-top: var(--s-3); border-top: var(--rule-w) solid var(--rule); }
.profile__label { font-size: 0.74rem; font-weight: var(--w-strong); letter-spacing: 0.02em;
                  color: var(--ink-faint); margin-bottom: var(--s-2); }
.profile__list { list-style: none; padding: 0; font-size: 0.94rem; color: var(--ink-secondary); }
.profile__list li { margin-top: var(--s-1); }
.profile__none { color: var(--ink-faint); }
.profile__claim { margin-top: var(--s-6); font-size: 0.92rem; color: var(--ink-muted); }

/* --- registration --------------------------------------------------------- */

.reg { padding-block: var(--s-8) var(--s-9); max-width: 46rem; }
.reg__form { margin-top: var(--s-6); display: grid; gap: var(--s-5); }
.reg__row { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .reg__row { grid-template-columns: 1fr 1fr; } }
.reg__help { margin-top: var(--s-1); font-size: 0.8rem; color: var(--ink-faint); }
.reg__err { margin-top: var(--s-1); font-size: 0.82rem; color: var(--error); }
.reg__err:empty { display: none; }
textarea.field__input { min-height: 7rem; resize: vertical; line-height: 1.6;
                        border: 0; border-bottom: 2px solid var(--rule-strong); }
.reg__checks { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.reg__check { display: flex; gap: var(--s-2); align-items: baseline; font-size: 0.92rem;
              color: var(--ink-secondary); }
.reg__check input { accent-color: var(--accent); }
.reg__status { font-size: 0.94rem; padding-left: var(--s-4); border-left: 2px solid var(--accent); }
.reg__status:empty { display: none; }
.reg__status[data-tone='error'] { border-left-color: var(--error); color: var(--error); }