/*
 * The link from the supervisor-email template to supervisor outreach
 * (coach/partials/template-link.blade.php). Tokens only; logical
 * properties for the Arabic page.
 */
.hpc-tlink {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    margin: 18px 0 0;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, var(--hx-quill) 55%, transparent);
    border-radius: 20px;
    background: linear-gradient(120deg, var(--hx-quill-soft), var(--hx-surface) 75%);
}
.hpc-tlink-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--hx-royal);
    color: var(--hx-on-stage);
    --hp-icon-accent: var(--hx-cream);
}
.hpc-tlink-icon .icon { width: 20px; height: 20px; }
.hpc-tlink-text { display: grid; gap: 4px; min-width: 0; }
.hpc-tlink-kicker { margin: 0; color: var(--hx-ink-2); font: 600 .86rem/1.4 var(--hx-f-body); }
.hpc-tlink-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    color: var(--hx-royal-ink);
    font: 400 1.45rem/1.2 var(--hx-f-display);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--hx-quill) 70%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}
.hpc-tlink-link:hover { text-decoration-color: var(--hx-quill); }
.hpc-tlink-link:focus-visible { outline: 2px solid var(--hx-focus); outline-offset: 3px; border-radius: 4px; }
.hpc-tlink-link .icon { flex: none; width: 18px; height: 18px; }
[dir="rtl"] .hpc-tlink-link .icon { transform: scaleX(-1); }
.hpc-tlink-note { margin: 2px 0 0; color: var(--hx-ink-3); font: 400 .86rem/1.5 var(--hx-f-body); }
html[lang="ar"] .hpc-tlink-link { font-family: "HP Arabic Display", var(--hx-f-display); font-size: 1.35rem; }
@media (max-width: 520px) {
    .hpc-tlink { grid-template-columns: minmax(0, 1fr); }
    .hpc-tlink-link { font-size: 1.25rem; white-space: normal; }
}