/* Reusable building blocks. Tools should reuse these before inventing their own. */
.hero { padding: 1.5rem 0 2rem; }
.hero p { color: var(--ink-soft); max-width: 40rem; font-size: 1.15rem; }

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

.card {
  --accent: var(--brand);
  display: flex; flex-direction: column; gap: .35rem;
  background: var(--surface); border-radius: var(--radius);
  border-top: 6px solid var(--accent);
  padding: 1rem 1.1rem 1.1rem; text-decoration: none; box-shadow: var(--shadow);
  transition: transform .15s ease;
}
a.card:hover { transform: translateY(-3px); }
.card .emoji { font-size: 2rem; line-height: 1; }
.card h3 { margin: 0; font-size: 1.15rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

.chip {
  display: inline-block; font-size: .78rem; font-weight: 800; padding: .1rem .6rem;
  border-radius: 999px; background: color-mix(in srgb, var(--accent, var(--brand)) 18%, transparent);
  color: var(--ink);
}

.btn {
  font: inherit; font-weight: 800; cursor: pointer; border: 0;
  background: var(--brand); color: var(--brand-ink);
  padding: .6rem 1.2rem; border-radius: 999px; box-shadow: 0 3px 0 rgba(0,0,0,.18);
}
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn.secondary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }

.section-title { margin: 2rem 0 .75rem; }
.crumbs { font-size: .9rem; color: var(--ink-soft); margin-bottom: 1rem; }
.empty { color: var(--ink-soft); padding: 1rem 0; }

/* Layout for a single tool page */
.tool-stage {
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.tool-controls { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.parent-note {
  margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent, var(--brand)) 10%, var(--surface));
  border-left: 6px solid var(--accent, var(--brand));
}
.parent-note h2 { font-size: 1.1rem; }

/* Parent-facing "lens" on a tool card: what it starts from and builds to */
.card .lens { font-size: .88rem; line-height: 1.4; margin: .25rem 0 .4rem; }
.card .lens b { color: var(--ink); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; margin-right: .25rem; }

/* Long-form text pages (About, guides) */
.prose { max-width: 40rem; }
.prose p { margin: 0 0 1rem; }
.prose h2 { margin-top: 2rem; }