/* Agent Integration Testing - shared styles */

:root {
  --navy: #0f172a;
  --navy-soft: #1e293b;
  --bg: #fafafa;
  --surface: #ffffff;
  --text: #1a1a1a;
  --muted: #52606d;
  --border: #e5e7eb;
  --code-bg: #f3f4f6;
  --accent: #2563eb;

  --fundamentals: #7c3aed;
  --evaluation: #db2777;
  --methods: #0891b2;
  --safety: #dc2626;
  --integration: #0d9488;
  --production: #2563eb;
  --tools: #d97706;

  --radius: 12px;
  --maxw: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header {
  background: var(--navy);
  color: #f8fafc;
  border-bottom: 3px solid var(--accent);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f8fafc;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand .dot {
  width: 12px; height: 12px; border-radius: 3px;
  background: var(--accent);
  display: inline-block;
}
.site-header nav { display: flex; align-items: center; gap: 18px; }
.site-header nav a {
  color: #cbd5e1;
  font-size: 15px;
}
.site-header nav a:hover { color: #fff; text-decoration: none; }

/* Header search input (sits on the navy bar) */
.site-search {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #f8fafc;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 14px;
  font-family: inherit;
  width: 220px;
  min-width: 0;
}
.site-search::placeholder { color: #aebacb; }
.site-search:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.16);
}

/* Search results dropdown (overlays the light page body) */
.search-results {
  position: fixed;
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.18);
  overflow: hidden;
  max-height: 62vh;
  overflow-y: auto;
}
.search-results a {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  padding: 11px 15px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.search-results a:last-child { border-bottom: none; }
.search-results a:hover { background: #f5f8fc; text-decoration: none; }
.search-results .sr-t { font-size: 14px; font-weight: 500; }
.search-results .sr-s { font-size: 12px; color: var(--muted); white-space: nowrap; }
.search-results .sr-empty { padding: 12px 15px; color: var(--muted); font-size: 14px; }

@media (max-width: 560px) {
  .site-search { width: 130px; }
}

/* Hero */
.hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, #243b55 100%);
  color: #f8fafc;
  padding: 64px 0 56px;
}
.hero h1 {
  font-size: 40px;
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  max-width: 760px;
}
.hero p {
  font-size: 19px;
  color: #cbd5e1;
  max-width: 680px;
  margin: 0 0 32px;
}
.stats {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.stat .num { font-size: 30px; font-weight: 700; color: #fff; }
.stat .label { font-size: 14px; color: #94a3b8; }

/* Filter pills */
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 28px 0 8px;
}
.pill {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Card grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  padding: 24px 0 64px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.card:hover {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
  border-color: #cbd5e1;
  text-decoration: none;
}
.card h3 {
  margin: 12px 0 8px;
  font-size: 19px;
  line-height: 1.3;
  color: var(--text);
  letter-spacing: -0.01em;
}
.card p { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.card .arrow { margin-top: auto; color: var(--accent); font-weight: 600; font-size: 14px; }

/* Tags */
.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.02em;
  width: fit-content;
}
.tag.fundamentals { background: #f3ecff; color: var(--fundamentals); }
.tag.evaluation { background: #fce7f0; color: var(--evaluation); }
.tag.methods { background: #e0f5fa; color: var(--methods); }
.tag.safety { background: #fdeaea; color: var(--safety); }
.tag.integration { background: #e6f7f4; color: var(--integration); }
.tag.production { background: #e8f0fe; color: var(--production); }
.tag.tools { background: #fdf1e0; color: var(--tools); }

/* Article layout */
.article-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  padding: 40px 0 72px;
}
@media (max-width: 900px) {
  .article-shell { grid-template-columns: 1fr; }
  .hero h1 { font-size: 32px; }
}

.breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }

article h1 {
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 8px 0 20px;
}
article h2 {
  font-size: 23px;
  margin: 36px 0 12px;
  letter-spacing: -0.01em;
}
article p { margin: 0 0 18px; }
article ul, article ol { margin: 0 0 18px; padding-left: 22px; }
article li { margin-bottom: 8px; }

.answer-box {
  background: #eef4ff;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 20px 22px;
  margin: 0 0 28px;
}
.answer-box .label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 6px;
}
.answer-box p { margin: 0; font-size: 17px; }

.callout {
  background: #fdf6e9;
  border: 1px solid #f3e2c0;
  border-radius: 8px;
  padding: 16px 18px;
  margin: 0 0 22px;
  font-size: 15px;
  color: #7a5b1e;
}

code {
  background: var(--code-bg);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 14px;
}

/* Dark code blocks (sit on the light page) */
pre {
  position: relative;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 0 0 20px;
  overflow-x: auto;
}
pre .lang {
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #64748b;
}
pre code {
  display: block;
  background: none;
  padding: 0;
  border-radius: 0;
  color: #e2e8f0;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
}

/* Sidebar */
.sidebar .box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.sidebar .box h4 {
  margin: 0 0 14px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.sidebar .related a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  color: var(--text);
}
.sidebar .related a:last-child { border-bottom: none; }
.sidebar .related a:hover { color: var(--accent); }
.sidebar .cta {
  background: var(--navy);
  color: #e2e8f0;
}
.sidebar .cta h4 { color: #94a3b8; }
.sidebar .cta p { font-size: 14px; margin: 0 0 14px; }
.sidebar .cta a.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}
.sidebar .cta a.btn:hover { text-decoration: none; background: #1d4ed8; }
.sidebar .note p { font-size: 14px; color: var(--muted); margin: 0; }
.sidebar .note a { font-weight: 500; }
.sidebar .resources a {
  display: block;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  color: var(--text);
}
.sidebar .resources a:last-child { border-bottom: none; }
.sidebar .resources a:hover { color: var(--accent); }
.sidebar .resources a .src { display: block; font-size: 12px; color: var(--muted); }

/* Inline resource list inside articles */
.resource-list { list-style: none; padding-left: 0; }
.resource-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.resource-list li:last-child { border-bottom: none; }
.resource-list .r-name { font-weight: 600; }
.resource-list .r-desc { color: var(--muted); font-size: 15px; }

/* Footer */
.site-footer {
  background: var(--navy);
  color: #94a3b8;
  padding: 40px 0;
  font-size: 14px;
}
.site-footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.site-footer a { color: #cbd5e1; }