/*
 * components.css - styles for the Ontology Atlas component library
 * (assets/components.js). On-brand with the site design system (slate + purple).
 *
 * Design tokens (--bg-*, --accent, --text-*, --border, --radius) are defined in
 * index.html's :root and mirrored in assets/learn.css. This file only consumes
 * them, with safe fallbacks so components still render if loaded standalone
 * (e.g. in Storybook without the full page stylesheet).
 */

/* -- GitHubOntologyBadge --------------------------------------- */
.gh-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border, #334155);
  border-radius: var(--radius, 14px);
  background:
    linear-gradient(to right, color-mix(in srgb, var(--accent, #9333ea) 10%, transparent), transparent 65%),
    var(--bg-850, #131c31);
  color: var(--text-300, #cbd5e1);
  text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  max-width: 100%;
}
.gh-badge:hover {
  border-color: var(--accent-400, #c084fc);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -14px rgba(147, 51, 234, .6);
}

.gh-badge .ghb-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--text-100, #f1f5f9);
  background: color-mix(in srgb, var(--accent, #9333ea) 20%, var(--bg-800, #1e293b));
}

.gh-badge .ghb-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.gh-badge .ghb-kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-400, #c084fc);
}
.gh-badge .ghb-kicker .gh-mark { opacity: .9; }
.gh-badge .ghb-repo {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-100, #f1f5f9);
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gh-badge .ghb-repo .ghb-owner { color: var(--text-400, #94a3b8); font-weight: 600; }

.gh-badge .ghb-pills {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  flex-wrap: wrap;
}
.gh-badge .ghb-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-300, #cbd5e1);
  background: var(--bg-800, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.gh-badge .ghb-pill svg { flex: none; opacity: .85; }
.gh-badge .ghb-stars svg { color: #fcd34d; opacity: 1; }
.gh-badge .ghb-archived {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 10.5px;
  color: var(--text-400, #94a3b8);
}

@media (max-width: 480px) {
  .gh-badge { flex-wrap: wrap; }
  .gh-badge .ghb-pills { margin-left: 0; width: 100%; }
}

/* -- PersonCard ------------------------------------------------ */
/* Mirrors the .d-person block in ontology.html so the component renders the
 * same on the live page (which supplies its own copy) and standalone in
 * Storybook. Keep the two in sync if either changes. */
.d-person {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border, #334155);
  border-radius: var(--radius, 14px);
  background: var(--bg-850, #131c31);
  transition: border-color .12s, transform .12s;
}
.d-person:hover { border-color: var(--accent-400, #c084fc); transform: translateY(-1px); }
.d-person .avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  font-size: 15px; font-weight: 800; letter-spacing: -.02em;
  color: var(--accent-400, #c084fc);
  background: color-mix(in srgb, var(--accent-500, #a855f7) 22%, var(--bg-800, #1e293b));
}
.d-person .avatar img { width: 100%; height: 100%; object-fit: cover; }
.d-person .body { min-width: 0; }
.d-person .nm { font-size: 14px; font-weight: 700; line-height: 1.25; }
.d-person a.nm { color: var(--text-100, #f1f5f9); text-decoration: none; }
.d-person a.nm::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.d-person:hover a.nm { color: var(--accent-400, #c084fc); }
.d-person .aff { font-size: 12.5px; color: var(--text-400, #94a3b8); margin-top: 3px; line-height: 1.35; }
/* Optional ontology-count line (People directory). Sits above the stretched
 * name link, styled as a subtle accent-tinted counter. */
.d-person .pc-count {
  position: relative; z-index: 1;
  display: inline-block; margin-top: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--accent-400, #c084fc);
  background: color-mix(in srgb, var(--accent-500, #a855f7) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-500, #a855f7) 30%, transparent);
  border-radius: 999px; padding: 2px 9px;
}