/* ============================================================
   stack — brand v0.1
   ----------------------------------------------------------------
   Cream canvas, candy accents, ink type, one punk-hot accent.
   Bricolage Grotesque does the heavy lifting; JetBrains Mono for
   marginalia. No gradients, no AI-startup vocabulary, no cute.
   ============================================================ */

:root {
  /* Canvas */
  --cream: #fef6e8;
  --cream-deep: #f8ebd3;
  --ink: #1f1916;
  --ink-soft: #3a322d;
  --muted: #857c6e;

  /* Candy palette */
  --bubblegum: #ff6fb5;
  --sherbet: #ff9b5c;
  --butter: #ffd84d;
  --mint: #5ddb9f;
  --sky: #6fb6ff;
  --lavender: #b493ff;

  /* Punk accent — use sparingly, one element per surface */
  --hot: #ff1744;

  /* Type */
  --display: 'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background: var(--cream);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 155, 92, 0.04), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 111, 181, 0.04), transparent 50%);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.4;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

a {
  color: inherit;
}

/* Inline-link button. Used for adapter "switch →" copy where a button
   should *read* like a link. Specific scopes (results-empty, detail-error)
   override the color but inherit the rest. */
.link {
  color: var(--bubblegum);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
}

/* ============ APP STATES ============ */

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#app[data-state='hero'] .hero { display: flex; }
#app[data-state='hero'] .results,
#app[data-state='hero'] .loading,
#app[data-state='hero'] .detail,
#app[data-state='hero'] .browse { display: none; }

#app[data-state='loading'] .hero,
#app[data-state='loading'] .results,
#app[data-state='loading'] .detail,
#app[data-state='loading'] .browse { display: none; }
#app[data-state='loading'] .loading { display: flex; }

#app[data-state='results'] .hero,
#app[data-state='results'] .loading,
#app[data-state='results'] .detail,
#app[data-state='results'] .browse { display: none; }
#app[data-state='results'] .results { display: block; }

/* ============ HERO ============ */

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem 4rem;
  text-align: center;
  color: var(--ink);
}

.hero-mark {
  width: clamp(120px, 16vw, 200px);
  height: auto;
  color: var(--ink);
  margin-bottom: 2.5rem;
}

.wordmark {
  font-family: var(--display);
  font-variation-settings: 'opsz' 96;
  font-size: clamp(5rem, 14vw, 12rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.85;
  color: var(--ink);
}

.tagline {
  margin-top: 1rem;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
  font-weight: 400;
  max-width: 32ch;
}

/* ----- ask form ----- */

.ask {
  margin-top: 3rem;
  width: 100%;
  max-width: 640px;
  background: white;
  border: 2px solid rgba(31, 25, 22, 0.08);
  border-radius: 100px;
  box-shadow: 0 4px 12px rgba(31, 25, 22, 0.04);
  display: flex;
  align-items: center;
  padding: 0.5rem 0.55rem 0.5rem 1.75rem;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

.ask:focus-within {
  border-color: var(--bubblegum);
  box-shadow: 0 6px 18px rgba(255, 111, 181, 0.18);
}

#ask-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--ink);
  padding: 0.85rem 0;
}

#ask-input::placeholder {
  color: var(--ink-soft);
  opacity: 0.65;
}

.ask-pill {
  background: var(--bubblegum);
  color: white;
  border-radius: 100px;
  padding: 0.7rem 1.4rem;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform 150ms var(--ease), background 150ms var(--ease);
}

.ask-pill:hover {
  transform: translateY(-1px);
  background: #ff5aa9;
}

.ask-pill:active {
  transform: translateY(0);
}

/* ----- suggestion chips ----- */

/* Primary example queries below the search box. Five chips, slightly
   louder than the secondary .suggest row. */
.example-queries {
  margin: 1.35rem 0 0.35rem;
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.example-queries-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.example-queries-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}
.example-chip {
  background: var(--cream);
  color: var(--ink);
  border: 1px solid rgba(31, 25, 22, 0.14);
  border-radius: 100px;
  padding: 0.5rem 1.0rem;
  font-family: var(--display);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), transform 150ms var(--ease);
}
.example-chip:hover {
  background: #ffe5d4;
  border-color: rgba(31, 25, 22, 0.32);
  transform: translateY(-1px);
}

/* Council receipt — bottom of hero, under chips. Line of copy, then
   a centered transcript link on its own row. */
.council-receipt {
  margin: 1.75rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  max-width: 520px;
  width: 100%;
  text-align: center;
}
.council-receipt-line {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  line-height: 1.45;
}
.council-receipt-link {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  line-height: 1.45;
}
.council-receipt-link:hover { color: var(--ink); }

.suggest {
  margin-top: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  max-width: 640px;
}

.chip {
  background: var(--cream-deep);
  color: var(--ink-soft);
  border: 1px solid rgba(31, 25, 22, 0.05);
  border-radius: 100px;
  padding: 0.55rem 1.1rem;
  font-family: var(--display);
  font-size: 0.9rem;
  transition: background 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease);
}

.chip:hover {
  background: #ffe5d4;
  color: var(--ink);
  transform: translateY(-1px);
}

/* ============ AI affiliation chip ============ */
/* Restore HTML `hidden` semantics for display-overridden elements — the
   default UA rule `[hidden] { display: none }` gets clobbered by our
   `display: flex` / `inline-flex` declarations below otherwise. */
.affil[hidden], .affil-pill[hidden] { display: none !important; }

.affil {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  max-width: 640px;
}
.affil-q {
  color: var(--ink-soft);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}
.affil-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}
.affil-chip {
  background: var(--cream);
  color: var(--ink-soft);
  border: 1px solid rgba(31, 25, 22, 0.18);
  border-radius: 100px;
  padding: 0.4rem 0.9rem;
  font-family: var(--display);
  font-size: 0.85rem;
  transition: background 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}
.affil-chip:hover {
  background: var(--cream-deep);
  color: var(--ink);
  border-color: rgba(31, 25, 22, 0.4);
}
.affil-chip-open {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.affil-chip-skip {
  color: var(--muted);
  border-style: dashed;
}
.affil-pill {
  margin-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
}
.affil-pill-label {
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.affil-pill-value {
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.78rem;
  cursor: pointer;
  border-bottom: 1px dashed var(--ink-soft);
  padding: 0;
}
.affil-pill-value:hover {
  border-bottom-color: var(--bubblegum);
}

/* ============ LOADING ============ */

.loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 6rem 2rem;
  color: var(--ink);
}

.loading-mark {
  width: 100px;
  height: auto;
}

.loading-text {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--ink-soft);
}

/* ============ RESULTS ============ */

.results {
  flex: 1;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  padding: 3rem 2rem 6rem;
}

.results-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px dashed rgba(31, 25, 22, 0.18);
}

.results-mark {
  display: block;
  width: 36px;
  height: 36px;
  color: var(--ink);
  text-decoration: none;
}

.results-mark svg {
  width: 100%;
  height: 100%;
}

.results-q {
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink-soft);
}

.results-q strong {
  color: var(--ink);
  font-weight: 600;
}

.results-back {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--ink-soft);
  background: var(--cream-deep);
  border-radius: 100px;
  padding: 0.45rem 0.9rem;
  transition: background 150ms var(--ease);
}

.results-back:hover {
  background: #ffe5d4;
}

/* Did-you-mean affordance. Sits between the results-head row and the
   greeting, mono-styled to read as a system note (not a result). The
   suggestion itself is link-styled so users learn it's clickable. */
.did-you-mean {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}

.did-you-mean-link {
  font: inherit;
  color: var(--bubblegum);
  background: transparent;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  cursor: pointer;
}

.did-you-mean-link:hover {
  color: #ff5aa9;
}

.results-greeting {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 38ch;
  margin-bottom: 2rem;
}

.results-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.results-empty {
  margin-top: 2rem;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink-soft);
}

.results-empty p { margin: 0 0 0.5rem; }
.results-empty p:last-child { margin-bottom: 0; }

.results-empty-sub {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.5;
}

.results-empty a,
.results-empty .link {
  color: var(--bubblegum);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

/* ----- recommendation card ----- */

.rec {
  background: white;
  border: 1px solid rgba(31, 25, 22, 0.06);
  border-radius: 20px;
  padding: 1.6rem 1.75rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  align-items: center;
  transition: transform 150ms var(--ease), box-shadow 150ms var(--ease);
  cursor: pointer;
}

.rec:hover,
.rec:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(31, 25, 22, 0.06);
  outline: none;
}

.rec-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}

.rec[data-i='0'] .rec-icon { background: var(--bubblegum); }
.rec[data-i='1'] .rec-icon { background: var(--mint); color: var(--ink); }
.rec[data-i='2'] .rec-icon { background: var(--sky); }
.rec[data-i='3'] .rec-icon,
.rec[data-i='4'] .rec-icon,
.rec[data-i='5'] .rec-icon { background: var(--ink-faint, #d9d2cb); color: var(--ink); }

.rec-name {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}

.rec-why {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-bottom: 0.55rem;
}

.rec-meta {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0;
}

/* Trust badges — derived from install probe metadata. Three slots:
   sign-in (oauth / api-key), and verification (verified /
   needs-personalization / unverified). Transport used to live here
   but moved out — the rec-meta compat chip ("WORKS IN ANY LLM" /
   "DESKTOP ONLY") says the same thing in friendlier copy, and two
   green pills back-to-back were competing for attention.
   Sits above the rec-meta line so it's the first thing a user reads
   below the "why" sentence. */
.rec-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
  margin-bottom: 0.4rem;  /* breathing room before .rec-meta below */
}
.rec-badge {
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.55rem;
  border-radius: 100px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.rec-badge-remote     { background: var(--mint);          color: var(--ink); }
.rec-badge-desktop    { background: var(--cream-deep);    color: var(--ink-soft); border-color: rgba(31, 25, 22, 0.08); }
.rec-badge-auth-oauth { background: var(--sky);           color: var(--ink); }
.rec-badge-auth-oauth-verified {
  background: var(--sky);
  color: var(--ink);
  border-color: rgba(31, 25, 22, 0.16);
  font-weight: 600;
}
.rec-badge-auth-oauth-verified::before {
  content: "✓ ";
  font-weight: 700;
}
.rec-badge-auth-key   { background: var(--butter);        color: var(--ink); }
.rec-badge-verify-ok      { background: rgba(93, 219, 159, 0.35); color: var(--ink); }
.rec-badge-verify-personal{ background: var(--sherbet);   color: var(--ink); }
.rec-badge-verify-bad     { background: rgba(255, 23, 68, 0.12); color: var(--hot); border-color: rgba(255, 23, 68, 0.3); }

/* Detail page uses the same badges, with a slightly tighter top margin
   so they nest cleanly above the existing trust-meta text line. */
.detail-badges { margin-top: 0.75rem; margin-bottom: 0.35rem; }
.detail-trust-text {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.rec-meta .dot {
  margin: 0 0.4rem;
  color: var(--bubblegum);
}

/* Compact compat chip on rec cards. Two flavors: remote (works
   anywhere, including phone) and local (desktop only). The chip is the
   first item in the trust-meta line so users see at-a-glance whether
   this server fits their setup. */
.rec-compat-chip {
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 100px;
  margin-right: 0.1rem;
  white-space: nowrap;
}

.rec-compat-remote {
  background: rgba(93, 219, 159, 0.18);
  color: #1f6e47;
}

.rec-compat-local {
  background: rgba(255, 155, 92, 0.18);
  color: #8a4515;
}

.rec-cta {
  background: var(--ink);
  color: var(--cream);
  border-radius: 100px;
  padding: 0.7rem 1.3rem;
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: background 150ms var(--ease);
}

.rec-cta:hover {
  background: #2c2521;
}

/* First card is the action. The other four stay on the page as
   smaller rows with a text link, so they don't compete with it. */
.rec-primary {
  box-shadow: 0 10px 28px rgba(31, 25, 22, 0.05);
}

.rec-quiet {
  padding: 0.9rem 1.15rem;
  gap: 0.9rem;
}

.rec-quiet:hover,
.rec-quiet:focus-visible {
  transform: none;
  box-shadow: none;
}

.rec-quiet .rec-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 1rem;
}

.rec-quiet .rec-name {
  font-size: 1rem;
  margin-bottom: 0.15rem;
}

.rec-quiet .rec-why {
  font-size: 0.88rem;
  margin-bottom: 0.35rem;
}

.rec-quiet .rec-cta {
  background: transparent;
  color: var(--ink-soft);
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rec-quiet .rec-cta:hover,
.rec-quiet .rec-cta-source:hover {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
}

.rec-primary .rec-cta-source {
  background: var(--ink);
  color: var(--cream);
  border-color: transparent;
}

.rec-primary .rec-cta-source:hover {
  background: #2c2521;
  color: var(--cream);
}

.rec-handoff {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
}

.rec-cta-alt {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.rec-cta-alt:hover { color: var(--ink); }

/* ============ STACK SCORE (detail page) ============ */

.detail-section-score {
  /* Stack Score lives in its own callout — soft cream background so
     the rubric reads as a "behind-the-scenes" surface rather than
     part of the marketing copy. */
  background: var(--cream-deep);
  padding: 1.5rem 1.5rem 1.25rem;
  border-radius: 16px;
  margin-bottom: 1.5rem;
}

.detail-score-display {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0.5rem 0 1.5rem;
}

.detail-score-number {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  min-width: 120px;
}

.detail-score-bar {
  flex: 1;
  height: 10px;
  background: rgba(31, 25, 22, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.detail-score-bar-fill {
  height: 100%;
  border-radius: 999px;
  width: 0%;
  transition: width 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.detail-score-bar-fill[data-tier='high'] { background: var(--mint); }
.detail-score-bar-fill[data-tier='mid']  { background: var(--butter); }
.detail-score-bar-fill[data-tier='low']  { background: var(--sherbet); }

.detail-score-components {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.detail-score-component {
  display: grid;
  grid-template-columns: 160px 72px 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px dashed rgba(31, 25, 22, 0.12);
  font-size: 0.92rem;
}
.detail-score-component:last-child {
  border-bottom: 0;
}

.detail-score-component-label {
  font-family: var(--display);
  font-weight: 500;
  color: var(--ink);
}

.detail-score-component-value {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: right;
}
.detail-score-component-full .detail-score-component-value { color: #1f6a44; }
.detail-score-component-empty .detail-score-component-value { color: var(--muted); }

.detail-score-component-reason {
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

.detail-score-fix {
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.78rem;
}

.detail-score-fix a {
  color: var(--bubblegum);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.detail-score-fix a:hover {
  color: #ff5aa9;
}

@media (max-width: 640px) {
  .detail-score-component {
    grid-template-columns: 1fr auto;
  }
  .detail-score-component-reason {
    grid-column: 1 / -1;
  }
}

/* "Also considered" heading that introduces the lower-confidence
   results section. Mono-styled to read as a system note, not a result.
   Sits between primary and source_only cards in the list. */
.results-lower-heading {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 2rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(31, 25, 22, 0.15);
}

/* "View source ↗" outbound link for source_only records — the install
   probe says the install is broken, so we render a plain anchor instead
   of the misleading install CTA. Visually softer than the install button
   so users perceive it as the "lower tier" CTA it is, but still
   tappable + readable. */
.rec-cta-source {
  background: transparent;
  color: var(--ink-soft);
  border: 1.5px solid rgba(31, 25, 22, 0.18);
}
.rec-cta-source:hover {
  background: var(--cream-deep);
  color: var(--ink);
  border-color: rgba(31, 25, 22, 0.3);
}

/* Per-tier verdict pill that sits inline next to the record name.
   Verified is the goal state and gets a clear green; broken gets a
   muted warn color (we don't want to scream); the in-between tiers
   get soft neutral chips. */
.rec-verdict {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 0.45rem;
  line-height: 1.4;
}
/* Platinum is the brand mark for install-test-verified records — stack's
   seal of approval. Slightly bolder than the other verdicts: matte silver
   gradient, deeper text, no transparency so it reads as "certified" even
   at glance distance. The other tier pills stay soft / soft-color to
   preserve the visual hierarchy. */
.rec-verdict-platinum {
  background: linear-gradient(135deg, #f4f1ec 0%, #d9dee4 100%);
  color: #2e3744;
  border: 1px solid #aeb6bf;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.62rem;
  padding: 0.18rem 0.55rem;
  box-shadow: inset 0 -1px 0 rgba(46, 55, 68, 0.08);
}
.rec-verdict-oauth {
  background: color-mix(in srgb, var(--sky) 18%, transparent);
  color: #1d4d80;
  border: 1px solid color-mix(in srgb, var(--sky) 32%, transparent);
}
.rec-verdict-personal {
  background: color-mix(in srgb, var(--butter) 22%, transparent);
  color: #6e5500;
  border: 1px solid color-mix(in srgb, var(--butter) 38%, transparent);
}
.rec-verdict-source {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--muted) 26%, transparent);
}
.rec-verdict-untested {
  background: color-mix(in srgb, var(--sherbet, #ff9b5c) 14%, transparent);
  color: #8a4a12;
  border: 1px solid color-mix(in srgb, var(--sherbet, #ff9b5c) 28%, transparent);
}

/* Tier-specific card de-emphasis. Source-only records are still in the
   list (per the "include with score, don't hide" decision) but get a
   visual signal that they're the lower-confidence tier. */
.rec-tier-source_only {
  opacity: 0.85;
}
.rec-tier-source_only .rec-name {
  color: var(--ink-soft);
}

/* ============ DETAIL ============ */

.detail {
  flex: 1;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  padding: 3rem 2rem 6rem;
}

.detail-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px dashed rgba(31, 25, 22, 0.18);
}

.detail-mark {
  display: block;
  width: 36px;
  height: 36px;
  color: var(--ink);
  text-decoration: none;
}

.detail-mark svg { width: 100%; height: 100%; }

.detail-crumb {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

.detail-crumb-link {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.detail-crumb-link:hover { color: var(--ink); }

.detail-back {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--ink-soft);
  background: var(--cream-deep);
  border-radius: 100px;
  padding: 0.45rem 0.9rem;
  text-decoration: none;
  transition: background 150ms var(--ease);
}

.detail-back:hover { background: #ffe5d4; }

.detail-loading {
  text-align: center;
  padding: 3rem 1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.15em;
  text-transform: lowercase;
}

.detail-error {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--ink-soft);
}

.detail-error .link {
  font-weight: 500;
  color: var(--bubblegum);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.detail-name {
  font-family: var(--display);
  font-size: clamp(1.85rem, 4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 0.55rem;
}

.detail-headline {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.4;
  color: var(--ink-soft);
  margin-bottom: 2rem;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* Host-type badge — small pill that sits between the name and the
   headline, declaring HOW this capability is delivered. Today: only
   shown for Zapier-hosted records, since self-hosted is the default
   and we don't want a noisy "MCP server" label on every entry.
   Bubblegum-tinted to read as on-brand metadata, not a CTA. */
.detail-host-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bubblegum) 14%, transparent);
  color: var(--bubblegum);
  border: 1px solid color-mix(in srgb, var(--bubblegum) 32%, transparent);
  margin-bottom: 0.65rem;
}

/* Stack Platinum — certification banner on the detail page, hero-style
   without overwhelming the rest. Rendered only when the install_test
   verdict is `verified`. Matte silver gradient with a single accent
   star; mono small-caps for the label so it reads as institutional. */
.detail-platinum {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 1.1rem;
  margin: 0 0 1.5rem;
  background: linear-gradient(135deg, #f4f1ec 0%, #d9dee4 100%);
  border: 1px solid #aeb6bf;
  border-radius: 14px;
  box-shadow: inset 0 -1px 0 rgba(46, 55, 68, 0.08);
}
.detail-platinum[hidden] { display: none; }
.detail-platinum-mark {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2e3744;
  color: #f4f1ec;
  border-radius: 50%;
  font-size: 1.05rem;
  font-weight: 700;
}
.detail-platinum-body { flex: 1 1 auto; min-width: 0; }
.detail-platinum-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2e3744;
  margin: 0 0 2px;
}
.detail-platinum-blurb {
  font-family: var(--display);
  font-size: 0.92rem;
  line-height: 1.4;
  color: #4a5462;
  margin: 0;
}

/* Non-verified verdict notes — share the platinum layout but with copy
   and color tuned per verdict. The point: surface the trade-off before
   the user clicks "add to claude", not in a modal three steps in. */
.detail-verdict-note {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.95rem 1.1rem;
  margin: 0 0 1.5rem;
  background: #fbf3e2;
  border: 1px solid #d8c184;
  border-radius: 14px;
}
.detail-verdict-note[hidden] { display: none; }
.detail-verdict-mark {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #8a6a1e;
  color: var(--cream);
  border-radius: 50%;
  font-size: 1.05rem;
  font-weight: 700;
}
.detail-verdict-body { flex: 1 1 auto; min-width: 0; }
.detail-verdict-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5c4711;
  margin: 0 0 2px;
}
.detail-verdict-blurb {
  font-family: var(--display);
  font-size: 0.92rem;
  line-height: 1.4;
  color: #6a5526;
  margin: 0;
}

/* needs_personalization variant — same shape, slightly cooler tint to
   distinguish from oauth. */
.detail-verdict-personal {
  background: #eef1f7;
  border-color: #adb6cc;
}
.detail-verdict-personal .detail-verdict-mark { background: #4a5a85; }
.detail-verdict-personal .detail-verdict-label { color: #2e3b5d; }
.detail-verdict-personal .detail-verdict-blurb { color: #4a5a85; }

/* source_only variant — broken-install warning. Red-orange but muted
   so it doesn't read as "DANGER" — it's a tier, not an error. */
.detail-verdict-broken {
  background: #f9ece8;
  border-color: #d5a191;
}
.detail-verdict-broken .detail-verdict-mark { background: #a14a32; }
.detail-verdict-broken .detail-verdict-label { color: #6e2f1f; }
.detail-verdict-broken .detail-verdict-blurb { color: #84412b; }

.detail-description {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.detail-cta {
  background: var(--ink);
  color: var(--cream);
  border-radius: 100px;
  padding: 0.85rem 1.6rem;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms var(--ease);
}

.detail-cta:hover { background: #2c2521; }

.detail-secondary {
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(31, 25, 22, 0.2);
  padding-bottom: 0.1rem;
  transition: border-color 150ms var(--ease), color 150ms var(--ease);
}

.detail-secondary:hover {
  color: var(--ink);
  border-color: var(--bubblegum);
}

.detail-action-hint {
  margin-top: 0.65rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: lowercase;
}

.detail-action-hint a,
.detail-action-hint button.link {
  color: var(--bubblegum);
  background: none;
  border: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
}

.detail-trust {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px dashed rgba(31, 25, 22, 0.12);
}

/* Credential hint — surfaces a deep-link to the right token-creation
   page when a record's install needs a credential we know about (e.g.,
   GITHUB_PERSONAL_ACCESS_TOKEN). Stack does not handle the token — it
   just answers "where do I make one" in one click. Visual: quiet
   neutral card with a clear CTA chip on the right. */
.detail-credhint {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 1rem 1.1rem;
  margin: 0 0 1.5rem;
  background: #f6f3ee;
  border: 1px solid rgba(31, 25, 22, 0.1);
  border-radius: 14px;
}
.detail-credhint[hidden] { display: none; }
.detail-credhint-body { flex: 1 1 auto; min-width: 0; }
.detail-credhint-label {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 2px;
}
.detail-credhint-blurb {
  font-family: var(--display);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}
.detail-credhint-cta {
  flex-shrink: 0;
  display: inline-block;
  background: var(--ink);
  color: var(--cream);
  border-radius: 100px;
  padding: 0.55rem 1.05rem;
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms var(--ease);
}
.detail-credhint-cta:hover { background: #2c2521; }

/* "Where it works" strip — surfaces per-brand compat upfront so users
   know before opening the install modal. Tier-1 brands (top-5) get a
   solid chip; tier-2 (other panel) get a softer outlined chip so the
   primary path is visually obvious. */
.detail-compat {
  margin-bottom: 2.5rem;
}

.detail-compat-h {
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  margin-bottom: 0.6rem;
}

.detail-compat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.detail-compat-chip {
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  border-radius: 100px;
  white-space: nowrap;
}

.detail-compat-tier-1 {
  background: var(--ink);
  color: var(--cream);
}

.detail-compat-tier-2 {
  background: var(--cream-deep);
  color: var(--ink-soft);
  border: 1px solid rgba(31, 25, 22, 0.05);
}

.detail-trust .dot {
  margin: 0 0.5rem;
  color: var(--bubblegum);
}

.detail-section {
  margin-bottom: 2.5rem;
}

.detail-section-anti { color: var(--ink-soft); }

.detail-h3 {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 0.85rem;
}

.detail-h4 {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1rem;
  margin-top: -0.4rem;
}

.framing-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.framing-tab {
  background: var(--cream-deep);
  color: var(--ink-soft);
  border: 1px solid rgba(31, 25, 22, 0.05);
  border-radius: 100px;
  padding: 0.5rem 1rem;
  font-family: var(--display);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 150ms var(--ease), color 150ms var(--ease);
}

.framing-tab:hover { background: #ffe5d4; }

.framing-tab.active {
  background: var(--ink);
  color: var(--cream);
  border-color: transparent;
}

.framing-body {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream-deep);
  padding: 1.25rem 1.4rem;
  border-radius: 14px;
}

.detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.detail-list li {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
  padding-left: 1.25rem;
  position: relative;
}

.detail-list li::before {
  content: '·';
  position: absolute;
  left: 0.4rem;
  top: -0.05rem;
  color: var(--bubblegum);
  font-size: 1.2em;
  line-height: 1;
}

.detail-list-anti li::before { color: var(--hot); }

.detail-evidence {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.detail-evidence li {
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--cream-deep);
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  border-left: 3px solid var(--mint);
}

#app[data-state='detail'] .hero,
#app[data-state='detail'] .results,
#app[data-state='detail'] .browse,
#app[data-state='detail'] .loading { display: none; }
#app[data-state='detail'] .detail { display: block; }

@media (max-width: 640px) {
  .detail { padding: 2rem 1.25rem 4rem; }
  .detail-head { grid-template-columns: auto 1fr; row-gap: 0.5rem; }
  .detail-back { grid-column: 1 / -1; justify-self: start; }
  .detail-actions { flex-direction: column; align-items: stretch; }
  .detail-cta { text-align: center; }
}

/* ============ BROWSE ============ */

.browse {
  flex: 1;
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  padding: 3rem 2rem 6rem;
}

.browse-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px dashed rgba(31, 25, 22, 0.18);
}

.browse-mark {
  display: block;
  width: 36px;
  height: 36px;
  color: var(--ink);
  text-decoration: none;
}

.browse-mark svg {
  width: 100%;
  height: 100%;
}

.browse-title-block {
  min-width: 0;
}

.browse-title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.05;
}

.browse-meta {
  margin-top: 0.25rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: lowercase;
}

.browse-meta .dot {
  margin: 0 0.4rem;
  color: var(--bubblegum);
}

/* Tier tag — lives in the browse-meta strip, identifies which slice of
   the corpus is being shown (deployable = default user-facing, developer
   = the install probe's filtered-out records: self-host, broken-url,
   ghost-package, mcp-unconfirmed). */
.browse-tier-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 0.15rem 0.5rem;
  border-radius: 100px;
  text-transform: uppercase;
}
.browse-tier-deployable {
  background: var(--mint);
  color: var(--ink);
}
.browse-tier-developer {
  background: rgba(255, 23, 68, 0.12);
  color: var(--hot);
}
.browse-tier-switch {
  color: var(--bubblegum);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.browse-back {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--ink-soft);
  background: var(--cream-deep);
  border-radius: 100px;
  padding: 0.45rem 0.9rem;
  text-decoration: none;
  transition: background 150ms var(--ease);
}

.browse-back:hover {
  background: #ffe5d4;
}

.browse-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.browse-row {
  background: white;
  border: 1px solid rgba(31, 25, 22, 0.06);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  align-items: center;
  transition: transform 120ms var(--ease), box-shadow 120ms var(--ease);
  text-decoration: none;
  color: inherit;
}

.browse-row:hover {
  transform: translateX(2px);
  box-shadow: 0 4px 16px rgba(31, 25, 22, 0.05);
}

/* Newly arrived (under 60s) get a candy accent — nice during the
   continuous-acquisition campaign, totally invisible the rest of the time. */
.browse-row.fresh {
  border-color: var(--bubblegum);
}

.browse-name {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 0.2rem;
}

.browse-headline {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.browse-compat {
  margin-top: 0.4rem;
}

.browse-row-meta {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.browse-when {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.browse-empty {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--ink-soft);
  font-size: 1rem;
}

#app[data-state='browse'] .hero,
#app[data-state='browse'] .results,
#app[data-state='browse'] .loading,
#app[data-state='browse'] .detail { display: none; }
#app[data-state='browse'] .browse { display: block; }

@media (max-width: 640px) {
  .browse { padding: 2rem 1.25rem 4rem; }
  .browse-head { grid-template-columns: auto 1fr; row-gap: 0.5rem; }
  .browse-back { grid-column: 1 / -1; justify-self: start; }
  .browse-row { grid-template-columns: 1fr; }
  .browse-when { font-size: 0.65rem; }
}

/* ============ INSTALL MODAL ============ */

.modal[hidden] { display: none; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: modal-in 180ms var(--ease);
}

@keyframes modal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 25, 22, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.modal-card {
  position: relative;
  background: var(--cream);
  border-radius: 24px;
  padding: 2.25rem 2rem 1.75rem;
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(31, 25, 22, 0.18), 0 6px 16px rgba(31, 25, 22, 0.08);
  animation: modal-card-in 220ms var(--ease);
}

@keyframes modal-card-in {
  from { transform: translateY(8px) scale(0.98); }
  to { transform: translateY(0) scale(1); }
}

.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  border-radius: 100px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-soft);
  transition: background 150ms var(--ease), color 150ms var(--ease);
}

.modal-close:hover {
  background: var(--cream-deep);
  color: var(--ink);
}

.modal-title {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.modal-lead {
  font-size: 1rem;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}

.modal-lead code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--cream-deep);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

.modal-snippet {
  background: var(--ink);
  color: var(--cream);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
  margin-bottom: 1rem;
  max-height: 240px;
}

.modal-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.modal-copy {
  background: var(--bubblegum);
  color: white;
  border-radius: 100px;
  padding: 0.6rem 1.3rem;
  font-family: var(--display);
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 150ms var(--ease), background 150ms var(--ease);
}

.modal-copy:hover {
  transform: translateY(-1px);
  background: #ff5aa9;
}

.modal-status {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--mint);
  text-transform: lowercase;
  opacity: 0;
  transition: opacity 200ms var(--ease);
}

.modal-status.visible {
  opacity: 1;
}

.modal-notes {
  background: var(--cream-deep);
  border-left: 3px solid var(--sherbet);
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}

/* "First, on your computer:" prep block. Only renders when an stdio
   install needs setup steps (pip install, playwright install, etc.).
   Sits above the snippet so users see the work before the paste. */
.modal-prep {
  background: var(--cream-deep);
  border-radius: 14px;
  padding: 1rem 1.15rem 1.1rem;
  margin-bottom: 1.25rem;
}

.modal-prep-h {
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 0.55rem;
}

.modal-prep-list {
  list-style: none;
  counter-reset: prep;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.modal-prep-list li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  counter-increment: prep;
}

.modal-prep-list li::before {
  content: counter(prep);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 100px;
  background: var(--bubblegum);
  color: white;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-prep-notes {
  background: white;
  border-left: 3px solid var(--sherbet);
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 0.7rem;
}

/* Setup-prerequisite block. Surfaced before the snippet when a record
   needs an upstream account (Zapier MCP, Composio, Pipedream) before
   the generic gateway URL on the card will work. Warmer color than
   .modal-warn — this is a "here's what to do" affordance, not a defect. */
.modal-prereq {
  background: var(--butter);
  border-radius: 14px;
  padding: 1rem 1.15rem 1.1rem;
  margin: 0 0 1.25rem;
}

.modal-prereq-head {
  font-family: var(--display);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 0.55rem;
}

.modal-prereq-steps {
  list-style: none;
  counter-reset: preq;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.modal-prereq-steps li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
  counter-increment: preq;
}

.modal-prereq-steps li::before {
  content: counter(preq);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 100px;
  background: var(--ink);
  color: var(--butter);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-prereq-note {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Probe-flagged data quality warnings (broken_url, ghost_packages).
   Heavier than prep-notes so users notice when an install path is
   suspect. Lives at the top of an adapter's body. */
.modal-warn {
  background: rgba(255, 23, 68, 0.06);
  border-left: 3px solid var(--hot);
  padding: 0.7rem 0.9rem;
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 0.9rem;
}
.modal-warn code {
  background: rgba(31, 25, 22, 0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 0.78rem;
}

/* Stronger variant for self-host records — these aren't installable as-is.
   Heavier visual weight so users don't try to install and end up with a
   broken Cursor/VS Code/Claude server. */
.modal-warn-strong {
  background: rgba(255, 23, 68, 0.10);
  border-left-width: 4px;
  padding: 0.95rem 1.1rem;
}
.modal-warn-strong p {
  margin: 0 0 0.5rem;
}
.modal-warn-strong p:last-child { margin-bottom: 0; }
.modal-warn-list {
  margin: 0.55rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  list-style: disc;
}
.modal-warn-list li { margin-bottom: 0.2rem; }

/* Personalization step for records the install probe flagged as
   `requires_personalization`. Replaces the brand adapter entirely until
   the user enters their tenant URL. See script.js: renderPersonalizeStep. */
.modal-personalize { display: flex; flex-direction: column; gap: 0.9rem; }
.modal-snippet-template pre {
  font-family: var(--mono);
  font-size: 0.78rem;
  background: var(--cream-deep);
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  overflow-x: auto;
  color: var(--ink-soft);
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}
.modal-placeholder {
  background: var(--butter);
  color: var(--ink);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 600;
}
.modal-personalize-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.modal-personalize-input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 0.85rem;
  padding: 0.7rem 0.95rem;
  border: 2px solid rgba(31, 25, 22, 0.18);
  border-radius: 100px;
  background: white;
  color: var(--ink);
  outline: 0;
  transition: border-color 150ms var(--ease);
}
.modal-personalize-input:focus {
  border-color: var(--bubblegum);
}
.modal-personalize-input::placeholder { color: var(--muted); }
.modal-personalize-save {
  white-space: nowrap;
}
.modal-personalize-error {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--hot);
  margin: 0;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--hot);
  background: rgba(255, 23, 68, 0.06);
  border-radius: 4px;
}

/* Tight variant used inside adapters: smaller, no card background — a
   compact 3-step list above a code block. */
.modal-prep-list-tight {
  margin-bottom: 1rem;
  gap: 0.3rem;
}
.modal-prep-list-tight li {
  font-size: 0.85rem;
}

/* ----- brand chooser ----- */

.modal-brand-q {
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  margin: 0 0 0.55rem;
}

.modal-brand-chooser {
  position: relative;
  margin-bottom: 1.5rem;
}

.modal-brand-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.brand-tab {
  background: var(--cream-deep);
  color: var(--ink-soft);
  border: 1px solid rgba(31, 25, 22, 0.05);
  border-radius: 100px;
  padding: 0.5rem 1rem;
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 150ms var(--ease), color 150ms var(--ease), transform 120ms var(--ease);
  white-space: nowrap;
}

.brand-tab:hover {
  background: #ffe5d4;
  color: var(--ink);
  transform: translateY(-1px);
}

.brand-tab.active {
  background: var(--ink);
  color: var(--cream);
  border-color: transparent;
}

.brand-tab.active:hover {
  background: #2c2521;
  color: var(--cream);
}

.brand-tab-other[aria-expanded='true'] {
  background: var(--bubblegum);
  color: white;
  border-color: transparent;
}

.modal-brand-other {
  margin-top: 0.5rem;
  padding: 0.7rem 0.8rem;
  background: white;
  border: 1px solid rgba(31, 25, 22, 0.06);
  border-radius: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  box-shadow: 0 6px 16px rgba(31, 25, 22, 0.05);
  animation: brand-other-in 160ms var(--ease);
}

@keyframes brand-other-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ----- adapter content area ----- */

.modal-adapter {
  /* Adapters emit their own structure. Container just provides spacing
     in the rare empty-state. */
  min-height: 80px;
}

.modal-adapter-unsupported,
.modal-adapter-stub {
  background: var(--cream-deep);
  border-radius: 14px;
  padding: 1.1rem 1.2rem 1.25rem;
}

.modal-adapter-unsupported .modal-lead,
.modal-adapter-stub .modal-lead {
  margin-bottom: 0.85rem;
  color: var(--ink);
}

.modal-adapter-unsupported .modal-share,
.modal-adapter-stub .modal-share {
  /* Reuses the mobile-share button style; nothing extra needed. */
}

.modal-copy-status {
  /* Same visual as .modal-status; the alias exists so adapter-emitted
     status nodes get the same fade behavior even though they're inside
     dynamically rendered HTML and don't share an ID with the global one. */
}

/* ----- deep-link adapter (Cursor, VS Code) ----- */

.modal-actions-deeplink {
  margin-bottom: 1.25rem;
}

.modal-deeplink {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}

.modal-deeplink::before {
  content: '↗';
  font-size: 0.95em;
  opacity: 0.9;
}

.modal-fallback {
  margin-top: 1rem;
  background: var(--cream-deep);
  border-radius: 12px;
  padding: 0.5rem 0.85rem;
}

.modal-fallback summary {
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  padding: 0.35rem 0;
  list-style: none;
}

.modal-fallback summary::-webkit-details-marker {
  display: none;
}

.modal-fallback summary::before {
  content: '▸ ';
  display: inline-block;
  margin-right: 0.2rem;
  transition: transform 150ms var(--ease);
}

.modal-fallback[open] summary::before {
  transform: rotate(90deg);
}

.modal-fallback .modal-snippet {
  margin-top: 0.5rem;
  margin-bottom: 0.6rem;
}

.modal-fallback .modal-lead {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.modal-where {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--muted);
}

.modal-where code {
  font-family: var(--mono);
  font-size: 0.8em;
  background: var(--cream-deep);
  padding: 0.1em 0.3em;
  border-radius: 3px;
  word-break: break-all;
}

/* ----- mobile install variant ----- */

.modal-actions-mobile {
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
}

.modal-share {
  background: var(--ink);
  color: var(--cream);
  border-radius: 100px;
  padding: 0.85rem 1.4rem;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 600;
  transition: background 150ms var(--ease), transform 150ms var(--ease);
}

.modal-share:hover {
  background: #2c2521;
  transform: translateY(-1px);
}

.modal-copy-secondary {
  background: var(--cream-deep);
  color: var(--ink-soft);
}

.modal-copy-secondary:hover {
  background: #ffe5d4;
  color: var(--ink);
}

.modal-variant-mobile .modal-notes {
  background: var(--cream-deep);
  border-left: 3px solid var(--mint);
  padding: 0.75rem 0.95rem;
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0.25rem 0 0.25rem;
}

/* ============ FOOTER ============ */

.page-footer {
  text-align: center;
  padding: 2rem 1rem 2.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: lowercase;
}

.page-footer a {
  color: inherit;
  text-decoration: none;
}

.page-footer a:hover {
  color: var(--bubblegum);
}

.page-footer .dot {
  margin: 0 0.5rem;
  color: var(--bubblegum);
}

/* ============ RESPONSIVE ============ */

@media (max-width: 640px) {
  .hero { padding: 4rem 1.25rem 3rem; }
  .ask { padding: 0.4rem 0.45rem 0.4rem 1.25rem; }
  #ask-input { font-size: 1rem; }
  .results { padding: 2rem 1.25rem 4rem; }
  .results-head { grid-template-columns: auto 1fr; row-gap: 0.75rem; }
  .results-back { grid-column: 1 / -1; justify-self: start; }
  .rec { grid-template-columns: auto 1fr; padding: 1.25rem; }
  .rec-cta {
    grid-column: 1 / -1;
    justify-content: center;
    padding: 0.85rem 1rem;
  }
  .rec-quiet .rec-cta {
    justify-content: flex-start;
    padding: 0.35rem 0 0;
    background: transparent;
    color: var(--ink-soft);
  }
  .rec-handoff {
    grid-column: 1 / -1;
    align-items: stretch;
  }
}

/* respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}