/* ============================================================
   PASSAGE by Khoshà — contacts.css
   The ranked-contacts panel + institution locations panel appended
   to the Employer and College/DLI dossiers by contacts.js.
   Reuses the house tokens/vocabulary (--gold, --ink, --bone, --stroke,
   .btn, .pill, .panel, .panel-title, .toolrow, .frow, .fld, .m-*,
   .hint) exactly as onboard.css does — no new colours, no new fonts.
   Mobile-first: base rules target a narrow viewport; the min-width
   query widens the grid on larger screens.
   ============================================================ */

.ct-panel{margin-top:18px}

.ct-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:720px){
  .ct-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1080px){
  .ct-grid{grid-template-columns:repeat(3,1fr)}
}

.ct-card{background:var(--bone);border:1px solid var(--stroke-soft);border-radius:var(--r-md);
  padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ct-card.ct-rank-primary{border-color:rgba(169,130,76,.35);background:rgba(169,130,76,.06)}

.ct-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.ct-name{font-family:var(--disp);font-weight:700;font-size:14.5px;line-height:1.3;word-break:break-word}
.ct-role{font-size:12.5px;color:var(--ink-soft)}

.ct-lines{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.ct-line{font-size:13px;color:var(--ink);text-decoration:none;word-break:break-word}
.ct-line:hover{color:var(--gold-deep);text-decoration:underline}
.ct-line.ct-muted{color:var(--ink-faint);text-decoration:none}

.ct-locbadge{font-size:11.5px;color:var(--gold-deep);background:rgba(169,130,76,.10);
  border-radius:8px;padding:4px 9px;display:inline-block;margin-top:2px;width:fit-content;max-width:100%;
  overflow:hidden;text-overflow:ellipsis}

.ct-notes{font-size:12.5px;color:var(--ink-soft);line-height:1.5;margin-top:2px;white-space:pre-wrap;word-break:break-word}

.ct-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

.ct-empty,.ct-msg{grid-column:1/-1;font-size:13px;color:var(--ink-faint);background:var(--bone);
  border-radius:var(--r-md);padding:16px;text-align:center;line-height:1.6}

/* ---------- add/edit contact modal ---------- */
.ct-rank-group{margin-bottom:14px}
.ct-rank-label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:600;margin-bottom:8px}
.ct-rank-row{display:flex;flex-wrap:wrap;gap:8px}
.ct-rank-opt{display:inline-flex;align-items:center;gap:6px;font-size:13px;border:1px solid var(--stroke);
  border-radius:99px;padding:6px 13px;cursor:pointer;transition:border-color .2s,background .2s}
.ct-rank-opt:has(input:checked){border-color:var(--gold);background:rgba(169,130,76,.08);color:var(--gold-deep);font-weight:600}
.ct-rank-opt input{accent-color:var(--gold)}
.ct-rank-hint{margin-top:10px}

/* ---------- institution locations panel ---------- */
.ct-loc-card{background:var(--bone);border:1px solid var(--stroke-soft);border-radius:var(--r-md);
  padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.ct-jumplink{margin-top:14px;font-size:12.5px}
.ct-jumplink a{color:var(--gold-deep);text-decoration:underline;cursor:pointer}
.ct-jumplink a:hover{color:var(--gold)}

/* ---------- narrow-viewport tightening (mirrors styles.css's own
   mobile breakpoint tightening for .panel/.frow) ---------- */
@media (max-width:480px){
  .ct-panel{padding:16px}
  .ct-card,.ct-loc-card{padding:12px 13px}
  .ct-actions .btn{flex:1 1 auto;text-align:center}
  .ct-rank-row{gap:6px}
  .ct-rank-opt{padding:5px 11px;font-size:12.5px}
}