/* Directory cards share the site's colors, spacing and radii. Compact related
 * content and offers deliberately remain static; only full link copy swaps. */
.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; }
#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; align-items: center; }
.tf-card-claimed svg { display: block; }
.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; }
/* Copy layers share the same space so hovering does not move the controls. */
.tf-card-copy { display: grid; min-height: 5.25rem; overflow: hidden; }
.tf-card-title, .tf-card-description {
    grid-area: 1 / 1; align-self: start; min-width: 0; margin: 0; font-size: .875rem; line-height: 1.3125rem;
    display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
    color: hsl(var(--muted-foreground));
}
.tf-card-title { -webkit-line-clamp: 2; opacity: 1; visibility: visible; transition: opacity 140ms ease; }
.tf-card-description { -webkit-line-clamp: 3; opacity: 0; visibility: hidden; transition: opacity 140ms ease; }
.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 { position: relative; min-width: 0; min-height: 1.5rem; 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;
    transition: none;
}
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; flex-wrap: wrap; gap: .5rem; min-width: 0; pointer-events: none; }
.tf-card-actions:empty { display: none; }
.tf-card-action-row:empty { display: none; }
.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-card-upvote { min-width: 36px; }
.tf-card-control .upvote-count[hidden] { display: none; }
.tf-website-card .tf-card-share, .tf-website-card .tf-card-external { width: 36px; height: 36px; padding: 0; margin-left: auto; flex: none; }
.tf-card-share[hidden] { display: none; }
.tf-card-learn-more {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-start; gap: .5rem;
    pointer-events: none; color: hsl(var(--foreground)); font-size: .8125rem; font-weight: 500;
    opacity: 0; transition: opacity 140ms ease;
}
.tf-card-actions [data-upvote-status] { position: absolute; left: 0; min-width: 180px; bottom: calc(100% + .5rem); 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); pointer-events: auto; }
.tf-card-actions [data-upvote-status]:empty { display: none; }

/* Learn more replaces only the category strip. Mouse, touch and keyboard users
 * can always operate the separate vote/review/visit row; its targets never fade. */
.tf-website-card--link:not(.tf-website-card--compact) > .tf-card-primary:focus-visible ~ .tf-card-content .tf-card-title { opacity: 0; visibility: hidden; }
.tf-website-card--link:not(.tf-website-card--compact) > .tf-card-primary:focus-visible ~ .tf-card-content .tf-card-description { opacity: 1; visibility: visible; }
.tf-website-card--link:not(.tf-website-card--compact) > .tf-card-primary:focus-visible ~ .tf-card-footer .tf-card-category { opacity: 0; pointer-events: none; }
.tf-website-card--link:not(.tf-website-card--compact) > .tf-card-primary:focus-visible ~ .tf-card-footer .tf-card-learn-more { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
    .tf-website-card--link:not(.tf-website-card--compact):hover .tf-card-title { opacity: 0; visibility: hidden; }
    .tf-website-card--link:not(.tf-website-card--compact):hover .tf-card-description { opacity: 1; visibility: visible; }
    .tf-website-card--link:not(.tf-website-card--compact):hover .tf-card-category { opacity: 0; pointer-events: none; }
    .tf-website-card--link:not(.tf-website-card--compact):hover .tf-card-learn-more { opacity: 1; }
    .tf-website-card--link:not(.tf-website-card--compact):hover .tf-card-category:focus-visible { opacity: 1; pointer-events: auto; }
    .tf-website-card--link:not(.tf-website-card--compact):hover .tf-card-category:focus-visible ~ .tf-card-learn-more { opacity: 0; }
}
/* The existing favicon supplies color only. Heavy blur and low opacity produce
 * a restrained glow even from a small favicon; no enlarged pixel logo is shown. */
.tf-website-card--featured { background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--muted) / .18)); }
.tf-card-brand-glow { position: absolute; z-index: -1; width: 180px; height: 180px; top: -48px; right: -28px; object-fit: contain; filter: blur(35px) saturate(.65); opacity: .2; pointer-events: none; }
.dark .tf-card-brand-glow { opacity: .15; }
.tf-card-featured-visit { flex: none; width: 140px; margin-left: auto; padding: .4rem .5rem; background: hsl(var(--primary)); border-color: transparent; color: hsl(var(--primary-foreground)); font-size: .8125rem; font-weight: 500; }
.tf-card-featured-visit:hover { background: hsl(var(--primary) / .9); color: hsl(var(--primary-foreground)); }
.tf-card-visit-label-mobile { display: none; }
.tf-website-card--featured .tf-card-action-row,.tf-website-card--featured .tf-card-actions { gap: .375rem; }
.tf-website-card--featured .tf-card-actions { flex: 0 1 auto; flex-wrap: nowrap; }
.tf-website-card--featured .tf-card-control { padding-inline: .5rem; }
.tf-website-card--featured .tf-card-upvote { flex: none; }
.tf-website-card--featured .tf-card-reviews { min-width: 0; }
.tf-website-card--featured .tf-card-reviews span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 639px) {
    .tf-card-featured-visit { width: 72px; }
    .tf-card-visit-label { display: none; }
    .tf-card-visit-label-mobile { display: inline; }
}

/* Offer cards keep a stable deal title, offer badges, and a clear destination. */
.tf-website-card--offer .tf-card-copy { min-height: 2.625rem; }
.tf-card-offer-cta { min-height: 40px; padding-inline: .85rem; font-size: .8125rem; font-weight: 500; }

/* Compact homepage tiles/ranking rows keep their established dimensions. */
.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 and linked promotions are simple static summaries. No hidden copy,
 * category badges or community footer is rendered for these variants. */
.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; 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-title { margin-top: .375rem; font-size: .75rem; line-height: 1.125rem; }
.tf-website-card--promo { border: 1px solid hsl(var(--border)); padding: 1rem; border-radius: .5rem; background: hsl(var(--card)); }
/* Desktop copy reserves its actual height (up to three lines), with a two-line
 * minimum. The hidden description still sizes the grid, so hover never moves
 * the footer. Touch cards keep their established spacing and target sizes. */
@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
    .tf-website-card:not(.tf-website-card--compact) .tf-card-heading { padding: 1.25rem 1.25rem .75rem; gap: .75rem; }
    .tf-website-card:not(.tf-website-card--compact) .tf-card-content { padding: 0 1.25rem .5rem; }
    .tf-website-card:not(.tf-website-card--compact) .tf-card-footer { padding: 0 1.25rem 1.25rem; }
    .tf-website-card:not(.tf-website-card--compact) .tf-card-category-row { margin-bottom: .5rem; }
    .tf-website-card--link:not(.tf-website-card--compact) .tf-card-copy { min-height: 2.625rem; }
}
@media (hover: none) {
    .tf-website-card--link:not(.tf-website-card--compact) .tf-card-copy { min-height: 2.625rem; }
    .tf-website-card--link:not(.tf-website-card--compact) .tf-card-description { display: none; }
    .tf-website-card--link:not(.tf-website-card--compact) .tf-card-title { opacity: 1 !important; visibility: visible !important; }
}
@media (pointer: coarse) {
    .tf-card-control, .tf-website-card .tf-card-share { min-height: 44px; }
    .tf-website-card .tf-card-share, .tf-website-card .tf-card-external { 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-category, .tf-card-learn-more { transition: none !important; }
}