/*
 * The Static Dev home — page stylesheet.
 *
 * Loaded after the suite's shared package (vendor/thestaticdev-ui/css/
 * tokens.css + components.css), which provides the palette (dark on :root,
 * html.light override, --spark-text), reset, layout, brand title, buttons,
 * empty state and footer. This file only holds what the home has and the
 * tools don't: a roomier header, the inline "S" logo, the manifesto and
 * the tool cards grid.
 *
 * No --accent override: the home has no second colour of its own, so the
 * package's spark default applies (focus rings, the 404 button).
 */

/* The home reads as a landing page, not a tool: larger base text and a
   taller header than the suite default. */
body { font-size: 16px; }

.site-header { padding: 56px 16px 40px; }
@media (min-width: 640px) { .site-header { padding: 72px 24px 48px; } }
@media (min-width: 1024px) { .site-header { padding: 88px 32px 56px; } }

/* ── Brand: the logo stands in for the "S" of "Static" ─────────────────── */

.brand-logo-inline { height: 0.75em; width: auto; display: inline-block; vertical-align: baseline; margin: 0 1px; }

/* ── Manifesto ──────────────────────────────────────────────────────── */

.manifesto { max-width: 36rem; margin: 20px auto 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
@media (min-width: 640px) { .manifesto { font-size: 16px; } }

/* ── Tool cards grid ────────────────────────────────────────────────── */

.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }

.tool-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  color: var(--text);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
a.tool-card:hover, a.tool-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--spark);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
a.tool-card:focus-visible { outline: 2px solid var(--spark); outline-offset: 2px; }

.tool-card.is-disabled {
  opacity: 0.6;
  cursor: default;
}

.tool-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tool-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tool-icon { width: 22px; height: 22px; flex-shrink: 0; display: block; }
.tool-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.tool-desc { font-size: 14px; line-height: 1.55; color: var(--muted); }

.tool-tech { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tech-chip { font-size: 11px; color: var(--muted); background: var(--ink); border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; white-space: nowrap; }

.tool-badge { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
/* --spark-text, not --spark: spark as text on its own tint is 1.70:1 in
   light mode; the package's light --spark-text (#8F610A) is 4.94:1. */
.badge-live { background: rgba(242,179,61,0.15); color: var(--spark-text); border: 1px solid rgba(242,179,61,0.35); }
.badge-beta { background: var(--ink); color: var(--muted); border: 1px solid var(--border); }
.badge-coming { background: transparent; color: var(--muted); border: 1px dashed var(--border); }

.tools-error { color: var(--muted); font-size: 14px; padding: 24px 0; text-align: center; }

/* ── Footer: more air above it than in the tools, and a muted link ──── */

.site-footer { margin-top: 3rem; font-size: 13px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--text); }