/* Social links - icons / labels / buttons; small / medium / large; round / rounded / square. */
.sl { --sl-size: 44px; --sl-shape: 50%; display: grid; gap: 12px; }
.sl-small { --sl-size: 36px; }
.sl-large { --sl-size: 54px; }
.sl-rounded { --sl-shape: 30%; }
.sl-square { --sl-shape: 6px; }
.sl-title { margin: 0; font-size: 1.08em; font-weight: 750; letter-spacing: -.01em; color: var(--e-ink); overflow-wrap: anywhere; }
.sl-a-center .sl-title { text-align: center; }
.sl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sl-a-center .sl-list { justify-content: center; }
.sl-link { display: inline-flex; align-items: center; gap: 10px; color: var(--e-ink); text-decoration: none; min-height: 40px; }
.sl-glyph {
    flex: none; display: grid; place-items: center; width: var(--sl-size); height: var(--sl-size); border-radius: var(--sl-shape);
    background: var(--e-surface); border: 1px solid var(--e-line-strong); color: var(--e-ink);
    transition: background-color .15s var(--e-ease), color .15s var(--e-ease), border-color .15s var(--e-ease), transform .15s var(--e-ease);
}
.sl-glyph b { font-size: calc(var(--sl-size) * .34); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.sl-svg { width: calc(var(--sl-size) * .46); height: calc(var(--sl-size) * .46); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sl-link:hover .sl-glyph, .sl-link:focus-visible .sl-glyph { background: var(--e-accent); border-color: var(--e-accent); color: var(--e-accent-ink); transform: translateY(-1px); }
.sl-text { display: grid; min-width: 0; }
.sl-name { font-weight: 650; font-size: .94em; line-height: 1.25; overflow-wrap: anywhere; }
.sl-handle { font-size: .8em; color: var(--e-ink-3); overflow-wrap: anywhere; }

/* labels: glyph + name, airy */
.sl-labels .sl-list { gap: 8px 18px; }
.sl-labels .sl-link:hover .sl-name { color: var(--e-accent-fg); }

/* buttons: bordered tiles in a responsive grid */
.sl-buttons .sl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.sl-buttons .sl-list > li { display: flex; }
.sl-buttons .sl-link { display: flex; padding: 7px 12px 7px 7px; border: 1px solid var(--e-line); border-radius: 14px; background: var(--e-bg); width: 100%; }
.sl-buttons .sl-link:hover { border-color: color-mix(in srgb, var(--e-accent) 45%, var(--e-line)); background: var(--e-surface); }
.sl-buttons.sl-square .sl-link { border-radius: 8px; }
.sl-buttons.sl-round .sl-link { border-radius: 999px; }

html[data-compact="1"] .sl { gap: 8px; }