/* Related links (js/related-ui.js, phone components/Related.tsx). Each link takes the color of the hub
   it goes to (.c-<hub> sets --halo / --halo-ink); the hotlines wear the calm care teal. */
.related-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--halo); box-shadow: 0 0 8px var(--halo-soft); }
.rel-care { --halo: var(--care); --halo-soft: transparent; --halo-ink: var(--care); }
.related-kind { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--halo-ink); }

/* The card: bottom of a guide, a quiz result ("Next"), the game, a Podcasts topic. */
.card.related { margin-top: 18px; padding: 4px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.related-h { margin: 12px 0 2px; }
.related-list { list-style: none; margin: 0; padding: 0; }
.related-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 0; color: inherit; text-decoration: none; border-top: 1px solid var(--line); }
.related-list li:first-child .related-row { border-top: 0; }
.related-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.related-label { font-weight: 600; line-height: 1.3; }
.related-go { color: var(--ink-soft); }
.related-row:hover .related-label, .related-row:focus-visible .related-label { text-decoration: underline; }

/* The chip row: under each Resources section, at the top of a topic Discuss board. */
.related-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; }
.related-chips-h { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-right: 2px; }
.chip.related-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; max-width: 100%; padding: 6px 14px; color: var(--ink); text-decoration: none; white-space: normal; text-align: left; line-height: 1.25; }
.chip.related-chip .related-kind { font-size: .68rem; }