/* ============================================================
   V9 Lookup — "quick links" launchpad. A type-to-jump box deep-links one query
   to every external site; grouped branded tiles open them. Per-tile brand color
   is fair game (external brand identity, not our rationed accent) — it rides as
   a chip + hover edge, never as body text (keeps contrast on obsidian). Logos
   drop into .v9-lookup-logo when sourced. Scoped .v9-lookup.
   ============================================================ */

.v9-lookup { display: grid; gap: var(--v9-space-6); max-width: 50rem; padding: var(--v9-space-6) 0 var(--v9-space-9); }

/* ---- header ---- */
.v9-lookup-head { display: grid; gap: var(--v9-space-2); }
.v9-lookup-title { margin: 0; font: var(--v9-weight-display) var(--v9-text-xl)/1 var(--v9-font-ui); letter-spacing: var(--v9-track-display); color: var(--v9-text); }
.v9-lookup-sub { margin: 0; max-width: 38rem; color: var(--v9-text-mute); font: 400 var(--v9-text-sm)/1.45 var(--v9-font-ui); }

/* ---- type-to-jump box ---- */
.v9-lookup-search {
  display: flex; align-items: center; gap: var(--v9-space-3);
  height: 3rem; padding: 0 var(--v9-space-4);
  background: var(--v9-surface); border: 1px solid var(--v9-line); border-radius: var(--v9-r-md);
  transition: border-color var(--v9-t-micro) var(--v9-ease), box-shadow var(--v9-t-micro) var(--v9-ease);
}
.v9-lookup-search:focus-within { border-color: var(--v9-accent); box-shadow: var(--v9-focus-glow); }
.v9-lookup-search > span:first-child { display: inline-flex; flex: 0 0 auto; color: var(--v9-text-faint); }
.v9-lookup-input { flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: none; color: var(--v9-text); font: 400 var(--v9-text-md) var(--v9-font-ui); }
.v9-lookup-input::placeholder { color: var(--v9-text-faint); }
.v9-lookup-kbd { flex: 0 0 auto; padding: 0.2rem 0.5rem; white-space: nowrap; color: var(--v9-text-mute); background: var(--v9-raised); border: 1px solid var(--v9-line); border-radius: var(--v9-r-sm); font: 500 var(--v9-text-xs) var(--v9-font-mono); }

/* ---- one balanced grid of compact logo buttons ---- */
.v9-lookup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--v9-space-2); }

/* ---- a tile: a white button with the brand logo centered, no text ---- */
.v9-lookup-tile {
  --brand: var(--v9-accent);
  position: relative; display: grid; place-items: center;
  min-width: 0; height: 3.5rem; padding: var(--v9-space-2) var(--v9-space-3);
  background: #fff; border: 1px solid var(--v9-line); border-radius: var(--v9-r-md);
  text-decoration: none;
  transition: transform var(--v9-t-micro) var(--v9-ease), border-color var(--v9-t-micro) var(--v9-ease), box-shadow var(--v9-t-micro) var(--v9-ease);
}
.v9-lookup-tile:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.v9-lookup-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.v9-lookup-logo { display: grid; place-items: center; width: 100%; height: 100%; }
.v9-lookup-logo > img { max-width: 86%; max-height: 1.7rem; width: auto; height: auto; object-fit: contain; display: block; }
.v9-lookup-logo-fallback { font: 700 var(--v9-text-md) var(--v9-font-ui); color: var(--brand); }

@media (max-width: 560px) {
  .v9-lookup { padding: var(--v9-space-5) 0 var(--v9-space-8); }
  .v9-lookup-kbd { display: none; }
}