/* Suggested collaborators on a project or grant, and a helper for text that only
   assistive technology should read. Loaded after app.css, so it uses its tokens. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.suggestions-panel { margin-top: 1.5rem; padding-top: 1rem; border-top: 2px solid var(--line); }
.suggestions-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.suggestions-head h3 { margin: 0; }
.suggestions { list-style: none; margin: 0.5rem 0; padding: 0; display: grid; gap: 0.5rem; }

.suggestion { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: start; padding: 0.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.suggestion-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.suggestion-name { overflow-wrap: anywhere; }
.suggestion > .menu { align-self: center; }

/* The bar is decoration; the percentage beside it says the same in words. */
.score { display: flex; align-items: center; gap: 0.5rem; }
.score-bar { flex: none; width: 6rem; height: 0.55rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.score-fill { display: block; height: 100%; width: var(--score, 0%); background: var(--accent); }
.score-text { font-weight: 700; }

/* A skill is a filled chip with a solid edge; an interest is outlined with a dashed one. */
.terms { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.15rem 0 0; padding: 0; }
.term { padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.85rem; color: var(--text); }
.term.skill { background: var(--tint); border: 1px solid var(--accent); }
.term.interest { background: transparent; border: 1px dashed var(--control); }