/* ============================================================
   CROWN & CORE - TOOLS OVERVIEW
   Page-specific styles for /tools. Namespaced .tl-*; built from the
   shared tokens and the shared .card component.
   ============================================================ */

.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-5); }

.tl-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.tl-card__type {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-text);
}
.tl-card__title { font-size: var(--fs-xl); }
.tl-card__meta { font-size: var(--fs-sm); color: var(--ink-muted); }
.tl-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: var(--space-3);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
}
/* The whole card is the click target; the title link stretches over it. */
.tl-card__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-md); }
.tl-card__link:focus-visible { outline: none; }
.tl-card__link:focus-visible::after { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.tl-status { color: var(--ink-muted); }