/* The Members tab (directory cards, chosen skills) and the Stats overview. Loaded after
   app.css, so it uses its tokens. */

.members { gap: 0.6rem; }
.member-card { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: start; }
.member-body { display: grid; gap: 0.25rem; min-width: 0; }
.member-name { overflow-wrap: anywhere; }
.member-text { margin: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.term.skill.chosen { display: inline-flex; align-items: center; gap: 0.25rem; }
.chip-remove { min-width: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
.chip-remove:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

.overview-block { margin-bottom: 1.25rem; }
.overview-block h2 { margin: 0 0 0.5rem; }
.overview-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.6rem; }
.overview-card { display: grid; gap: 0.15rem; align-content: start; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.overview-block.platform .overview-card { border-top-color: var(--c-stats); }
.overview-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.overview-number { font-size: 2rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.overview-hint { font-size: 0.8rem; }
.stats-readable-title { margin: 1.25rem 0 0.5rem; }