/* ═══════════════════════════════════════════════════════
   Obzek.io — the tool roster card.

   Shared by the landing page and the tools directory so the list of
   what exists is described once and looks the same in both places.
   Tokens come from the host page's :root.
   ═══════════════════════════════════════════════════════ */

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.15rem;
}

.tool-card {
  display: flex; flex-direction: column; gap: .85rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem;
  text-decoration: none; color: var(--text);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
a.tool-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -24px rgba(245,158,11,.35);
}
/* Planned tools stay in the list — knowing what's coming is the point —
   but they read as a promise, not a link. */
.tool-card.soon { opacity: .62; cursor: default; }

.tool-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.tool-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(109,40,217,.22); color: var(--gold-light);
  flex: none;
}
.tool-icon svg { width: 20px; height: 20px; }

.tool-status {
  font-family: var(--font-head); font-size: .62rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .28rem .55rem; border-radius: 100px;
  border: 1px solid var(--border-gold); color: var(--gold-light);
  background: rgba(245,158,11,.08); white-space: nowrap;
}
.tool-status.planned { border-color: var(--border); color: var(--text-sub); background: transparent; }

.tool-title { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.tool-desc { font-size: .84rem; color: var(--text-sub); line-height: 1.7; flex: 1; }
.tool-desc code { font-family: ui-monospace, monospace; font-size: .92em; color: var(--text); }

.tool-link {
  font-size: .82rem; font-weight: 600; color: var(--gold-light);
  display: flex; align-items: center; gap: .35rem;
  transition: gap .2s ease;
}
a.tool-card:hover .tool-link { gap: .6rem; }