/* Help-topic tiles are one link each: the title anchor stretches over the
   tile through ::after; faces and chips sit above it and keep their own
   links. Card rules themselves live in alder.css (untouched here). */
.al-need { position: relative; cursor: pointer; transition: background-color .18s, box-shadow .18s; }
.al-need__link { color: inherit; text-decoration: none; }
.al-need__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--al-r); }
.al-need > .al-faces, .al-need > .al-chips { position: relative; z-index: 1; }
.al-need:has(.al-need__link:hover), .al-need:has(.al-need__link:focus-visible) { background: var(--al-sand-2); box-shadow: var(--al-raise); }
.al-scope .al-need__link:focus-visible { outline: none; }
.al-need:has(.al-need__link:focus-visible) { outline: 2px solid var(--al-brand); outline-offset: 3px; }