/* Shared directory/offer cards. Existing page grids and theme tokens remain in charge. */
.tf-website-card {
    position: relative;
    isolation: isolate;
    min-width: 0;
    height: 100%;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
.tf-website-card:hover { border-color: hsl(var(--foreground) / .24); }
.tf-website-card-grid { align-items: stretch; grid-auto-rows: 1fr; }
.tf-website-card-grid > .tf-website-card { height: auto; align-self: stretch; }
/* Card review links open this existing tab beneath the sticky header/search. */
#link-detail-tabs { scroll-margin-top: 8rem; }
.tf-card-primary { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.tf-card-primary:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -3px; }
.tf-card-heading { display: flex; align-items: center; gap: 1rem; min-width: 0; padding: 1.5rem 1.5rem 1rem; }
.tf-card-icon { width: 40px; height: 40px; flex: none; object-fit: contain; }
.tf-card-identity { flex: 1; min-width: 0; }
.tf-card-name-row { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.tf-website-card .tf-card-name {
    min-width: 0; margin: 0; color: hsl(var(--foreground)); font-size: 1rem; line-height: 1.5;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
}
.tf-card-claimed { display: inline-flex; flex: none; color: hsl(142 48% 32%); }
.dark .tf-card-claimed { color: hsl(139 46% 66%); }
.tf-card-ad-label { flex: none; border-radius: 9999px; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); padding: .15rem .4rem; font-size: .65rem; line-height: 1.5; }
.tf-card-meta { color: hsl(var(--muted-foreground)); margin-top: .2rem; font-size: .7rem; line-height: 1.4; }
.tf-card-content { padding: 0 1.5rem 1rem; }
.tf-card-copy { display: grid; height: 2.625rem; overflow: hidden; }
.tf-card-title, .tf-card-description {
    grid-area: 1 / 1; min-width: 0; margin: 0; font-size: .875rem; line-height: 1.3125rem;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
}
.tf-card-title { color: hsl(var(--muted-foreground)); opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 100ms ease 100ms, transform 100ms ease 100ms, visibility 0s linear 100ms; }
.tf-card-description { color: hsl(var(--muted-foreground)); opacity: 0; visibility: hidden; transform: translateY(5px); transition: opacity 100ms ease, transform 100ms ease, visibility 0s linear 100ms; }
.tf-card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1rem; }
.tf-card-badge { display: inline-flex; padding: .3rem .55rem; border-radius: 9999px; color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / .6); font-size: .7rem; line-height: 1.35; }
.tf-card-badge--featured { background: hsl(142 48% 32% / .12); color: hsl(142 48% 32%); }
.dark .tf-card-badge--featured { background: hsl(139 46% 66% / .12); color: hsl(139 46% 66%); }
.tf-card-footer { position: relative; z-index: 2; pointer-events: none; margin-top: auto; padding: 0 1.5rem 1.5rem; }
.tf-card-footer-link { position: absolute; inset: 0; z-index: 0; pointer-events: auto; }
.tf-card-category-row { min-width: 0; margin-bottom: .875rem; pointer-events: none; }
.tf-card-category {
    position: relative; z-index: 2; display: inline-block; max-width: 100%; padding: .25rem .55rem;
    border-radius: 9999px; background: hsl(var(--muted) / .65); color: hsl(var(--muted-foreground));
    font-size: .7rem; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; vertical-align: top; pointer-events: auto;
}
a.tf-card-category:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); }
.tf-card-category:not(a) { pointer-events: none; }
.tf-card-action-row { position: relative; display: flex; align-items: center; gap: .5rem; min-height: 36px; pointer-events: none; }
.tf-card-actions { position: relative; z-index: 2; display: flex; align-items: center; gap: .5rem; min-width: 0; pointer-events: none; opacity: 1; transition: opacity 100ms ease 100ms; }
.tf-card-control, .tf-card-share {
    position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    min-height: 36px; pointer-events: auto; border: 1px solid hsl(var(--input)); border-radius: .375rem; background: hsl(var(--background));
    color: hsl(var(--foreground)); padding: .4rem .6rem; font-size: .75rem; line-height: 1.25; white-space: nowrap;
}
.tf-card-control svg { flex: none; }
.tf-card-control:hover, .tf-card-share:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.tf-card-control:focus-visible, .tf-card-share:focus-visible, a.tf-card-category:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.tf-card-control.upvoted { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.tf-card-control:disabled { cursor: wait; opacity: .6; }
.tf-website-card .tf-card-share { width: 36px; height: 36px; padding: 0; margin-left: auto; flex: none; }
.tf-card-share[hidden] { display: none; }
.tf-card-read-more {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    pointer-events: none; color: hsl(var(--foreground)); font-size: .875rem; font-weight: 500;
    opacity: 0; transform: translateY(3px); transition: opacity 100ms ease, transform 100ms ease;
}
.tf-website-card--no-community .tf-card-read-more { opacity: 1; transform: none; padding-inline: 2.5rem; }
.tf-card-actions [data-upvote-status] { position: absolute; left: 0; right: 0; bottom: 100%; z-index: 3; padding: .5rem; border: 1px solid hsl(var(--border)); border-radius: .375rem; background: hsl(var(--card)); color: hsl(var(--foreground)); font-size: .7rem; line-height: 1.4; box-shadow: 0 2px 8px hsl(var(--foreground) / .08); }
.tf-card-actions [data-upvote-status]:empty { display: none; }

/* The primary link alone changes the footer. Vote/review/share hit targets stay
 * above it; hovering or tabbing to an action restores its visible controls. */
.tf-card-primary:focus-visible ~ .tf-card-content .tf-card-title { opacity: 0; visibility: hidden; transform: translateY(-5px); transition-delay: 0s, 0s, 100ms; }
.tf-card-primary:focus-visible ~ .tf-card-content .tf-card-description { opacity: 1; visibility: visible; transform: none; transition-delay: 100ms, 100ms, 0s; }
.tf-card-primary:focus-visible ~ .tf-card-footer .tf-card-actions { opacity: 0; transition-delay: 0s; }
.tf-card-primary:focus-visible ~ .tf-card-footer .tf-card-read-more { opacity: 1; transform: none; transition-delay: 100ms; }
@media (hover: hover) and (pointer: fine) {
    .tf-website-card:hover .tf-card-title { opacity: 0; visibility: hidden; transform: translateY(-5px); transition-delay: 0s, 0s, 100ms; }
    .tf-website-card:hover .tf-card-description { opacity: 1; visibility: visible; transform: none; transition-delay: 100ms, 100ms, 0s; }
    .tf-card-primary:hover ~ .tf-card-footer .tf-card-actions { opacity: 0; transition-delay: 0s; }
    .tf-card-primary:hover ~ .tf-card-footer .tf-card-read-more { opacity: 1; transform: none; transition-delay: 100ms; }
}
.tf-card-actions:hover, .tf-card-actions:focus-within { opacity: 1; transition-delay: 0s; }
.tf-card-footer:hover .tf-card-actions,
.tf-card-footer:focus-within .tf-card-actions,
.tf-card-primary:focus-visible ~ .tf-card-footer:hover .tf-card-actions { opacity: 1; transition: none; }
.tf-website-card:not(.tf-website-card--no-community) .tf-card-footer:hover .tf-card-read-more,
.tf-website-card:not(.tf-website-card--no-community) .tf-card-footer:focus-within .tf-card-read-more,
.tf-card-primary:focus-visible ~ .tf-card-footer:hover .tf-card-read-more { opacity: 0; transition: none; }

/* Compact homepage tiles/ranking rows keep their existing width and height. */
.tf-offer-tile-copy > .tf-offer-tile-name,
.tf-ranking-site > .tf-card-rank-name { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.tf-offer-tile-name > .tf-card-tile-name,
.tf-card-rank-name > .tf-card-rank-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-card-rank-name .tf-card-claimed, .tf-offer-tile-name .tf-card-claimed { flex: none; }

/* Sidebars keep their existing small icons and spacing rather than acquiring a
 * second padded panel or the main grid's community-control row. */
.tf-website-card--compact { border: 0; border-radius: .375rem; background: transparent; box-shadow: none; height: auto; overflow: visible; }
.tf-website-card--compact .tf-card-heading { padding: 0 0 .5rem; gap: .75rem; }
.tf-website-card--compact .tf-card-icon { width: 32px; height: 32px; }
.tf-website-card--compact .tf-card-name { font-size: .875rem; }
.tf-website-card--compact .tf-card-content { padding: 0 0 .5rem 2.75rem; }
.tf-website-card--compact .tf-card-copy { height: 2.25rem; }
.tf-website-card--compact .tf-card-title, .tf-website-card--compact .tf-card-description { font-size: .75rem; line-height: 1.125rem; }
.tf-website-card--compact .tf-card-footer { padding: 0 0 0 2.75rem; }
.tf-website-card--compact .tf-card-category-row { margin: 0; }
.tf-website-card--compact .tf-card-badges { margin-top: .5rem; }
.tf-website-card--compact .tf-card-badge { font-size: .65rem; }
.tf-website-card--promo { border: 1px solid hsl(var(--border)); padding: 1rem; border-radius: .5rem; background: hsl(var(--card)); }
@media (pointer: coarse) {
    .tf-card-control, .tf-website-card .tf-card-share { min-height: 44px; }
    .tf-website-card .tf-card-share { width: 44px; height: 44px; }
    .tf-card-action-row { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .tf-website-card, .tf-card-title, .tf-card-description, .tf-card-actions, .tf-card-read-more { transition: none !important; }
    .tf-card-title, .tf-card-description, .tf-card-read-more { transform: none !important; }
}