/* Contact buttons - stack (default), row and pill layouts. Targets are at least 48px tall. */
.cb { display: grid; gap: 12px; }
.cb-title { margin: 0; font-size: 1.12em; font-weight: 750; letter-spacing: -.012em; color: var(--e-ink); overflow-wrap: anywhere; }
.cb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cb-btn {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px; text-decoration: none;
    border-radius: 14px; border: 1px solid var(--e-line); background: var(--e-surface); color: var(--e-ink);
    transition: background-color .15s var(--e-ease), border-color .15s var(--e-ease), transform .15s var(--e-ease), box-shadow .15s var(--e-ease);
}
.cb-btn:hover { border-color: color-mix(in srgb, var(--e-accent) 45%, var(--e-line)); background: var(--e-surface-2); }
.cb-btn:active { transform: translateY(1px); }
.cb-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--e-bg); color: var(--e-accent-fg); border: 1px solid var(--e-line); }
.cb-i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cb-text { min-width: 0; flex: 1; display: grid; }
.cb-label { font-weight: 700; font-size: .96em; line-height: 1.25; overflow-wrap: anywhere; }
.cb-detail { font-size: .84em; color: var(--e-ink-3); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cb-go { flex: none; width: 18px; height: 18px; color: var(--e-ink-3); }
.cb-main { background: linear-gradient(135deg, var(--e-accent) 0%, var(--e-accent-2) 100%); border-color: transparent; color: var(--e-accent-ink); }
.cb-main:hover { background: linear-gradient(135deg, var(--e-accent) 0%, var(--e-accent-2) 100%); filter: brightness(1.05); box-shadow: 0 6px 18px color-mix(in srgb, var(--e-accent) 26%, transparent); }
html.e-custom-accent .cb-main, html.e-custom-accent .cb-main:hover { background: var(--e-accent); }
.cb-main .cb-ico { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .28); color: inherit; }
.cb-main .cb-detail, .cb-main .cb-go { color: inherit; opacity: .85; }

/* row: equal buttons side by side, wrapping */
.cb-row .cb-list { display: flex; flex-wrap: wrap; }
.cb-row .cb-list > li { flex: 1 1 118px; }
.cb-row .cb-btn { height: 100%; }
.cb-row .cb-btn { flex-direction: column; justify-content: center; gap: 6px; min-height: 84px; text-align: center; padding: 10px 8px; }
.cb-row .cb-text { flex: none; }

/* pill: a floating-style bar of rounded pills */
.cb-pill .cb-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 6px; border-radius: 999px; background: var(--e-bg); border: 1px solid var(--e-line); box-shadow: 0 6px 22px rgba(16, 22, 43, .1); }
.cb-pill .cb-btn { min-height: 46px; border-radius: 999px; padding: 6px 16px 6px 8px; gap: 8px; }
.cb-pill .cb-ico { width: 32px; height: 32px; border-radius: 50%; }
.cb-pill .cb-i { width: 18px; height: 18px; }
.cb-pill .cb-title { text-align: center; }
@media (max-width: 420px) {
    .cb-pill .cb-list { border-radius: 22px; }
    .cb-pill .cb-btn { flex: 1 1 calc(50% - 8px); }
}

.cb-issues { margin: 0; padding-left: 28px; }
html[data-compact="1"] .cb-btn { min-height: 46px; }