/* ------------------------------------------------------------------
   Home — search first, then libraries, then the import row
   ------------------------------------------------------------------ */

.hero {
  padding-top: var(--s-8);
  padding-bottom: var(--s-2);
}

.hero h1 {
  font-size: var(--t-display);
  max-width: 15ch;
  letter-spacing: -0.02em;
}
.hero__lead {
  margin-top: var(--s-4);
  max-width: 54ch;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.hero__search { margin-top: var(--s-6); max-width: 780px; }
.hero__meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding-left: 14px;
  font-size: var(--t-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.hero__meta span + span::before {
  content: "·";
  margin-inline-end: var(--s-2);
  color: var(--rule-2);
}

/* ---------- results ---------- */
.results { padding-top: var(--s-6); }
.results__head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.results__head h2 { font-size: var(--t-h3); font-family: var(--font-ui); font-weight: 600; }
.results__count { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--muted); }
.results__head .spacer { flex: 1 1 auto; }

/* ---------- libraries ---------- */
.libraries { padding-top: var(--s-7); }

.lib-tools {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-4);
}
.lib-tools h2 { font-size: var(--t-h2); flex: none; }
.lib-tools .spacer { flex: 1 1 auto; }
.lib-tools .filter {
  min-height: 32px;
  width: 190px;
  font-size: var(--t-xs);
  background-color: var(--paper-2);
  border-color: var(--rule);
}
.lib-tools .filter::placeholder { color: var(--muted); }
.lib-tools .filter:hover { border-color: var(--rule-2); }
.lib-tools .filter:focus { background-color: var(--paper-2); }

/* ---------- import row ---------- */
.imports { padding-top: var(--s-7); }
.import-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-4);
}
.import-tile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  padding: var(--s-4) var(--s-5);
  text-align: left;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}
.import-tile:hover {
  border-color: var(--rule-2);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
  color: var(--ink);
}
.import-tile__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-md);
  background: var(--paper-3);
  color: var(--accent);
  border: 1px solid var(--rule);
}
.import-tile > span { display: block; min-width: 0; }
.import-tile__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.import-tile__sub { display: block; font-size: var(--t-xs); color: var(--muted); margin-top: 2px; }
.import-tile__go { color: var(--muted); }
.import-tile:hover .import-tile__go { color: var(--accent); }

/* ---------- recent jobs ---------- */
.jobs { padding-top: var(--s-7); }
.jobs__panel { border-top: 1px solid var(--rule); }

@media (max-width: 700px) {
  .hero { padding-top: var(--s-6); }
  .hero h1 { max-width: 20ch; }
  .lib-tools { flex-wrap: wrap; }
  .lib-tools .filter { width: 100%; order: 3; }
  .import-tile { padding: var(--s-4); }
}