/* ==========================================================================
   Agent Evaluation Stack — shared design system
   Used by the framework landing page and every layer deep-dive page.
   ========================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* ---- Hero backgrounds -------------------------------------------------- */
.hero {
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(34,211,238,0.18), transparent 55%),
        radial-gradient(1000px 500px at 90% 0%, rgba(168,85,247,0.18), transparent 55%),
        linear-gradient(135deg, #0b1120 0%, #111827 100%);
}
.grid-overlay {
    background-image:
        linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ---- Cards ------------------------------------------------------------- */
.card { transition: transform .35s cubic-bezier(.4,0,.2,1), border-color .35s, box-shadow .35s; }
.card:hover { transform: translateY(-6px); border-color: rgba(34,211,238,.5); box-shadow: 0 20px 40px -20px rgba(34,211,238,.25); }

/* ---- Section headers --------------------------------------------------- */
.section-header { position: relative; }
.section-header:after {
    content: '';
    position: absolute;
    width: 64px; height: 4px;
    background: linear-gradient(to right, #22d3ee, #a855f7);
    bottom: -12px; left: 0; border-radius: 9999px;
}

.gradient-text { background: linear-gradient(120deg, #22d3ee, #a855f7); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Code blocks ------------------------------------------------------- */
pre { background-color: #020617 !important; border: 1px solid #1e293b; padding: 1.75rem 1.75rem; border-radius: .9rem; }
.code-title + pre { padding-top: 1.5rem; border-radius: 0 0 .9rem .9rem; margin-top: 0; }
pre code.hljs { background: transparent; padding: 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .82rem; line-height: 1.7; }
.code-title {
    display: flex; align-items: center; gap: .5rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .72rem;
    color: #64748b; background: #0b1220; border: 1px solid #1e293b; border-bottom: none;
    padding: .55rem 1rem; border-radius: .9rem .9rem 0 0;
}
.dot { width: .6rem; height: .6rem; border-radius: 9999px; display: inline-block; }

/* ---- Reading progress bar --------------------------------------------- */
#progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60;
    background: linear-gradient(to right, #22d3ee, #a855f7); transition: width .1s linear;
}

/* ---- Navigation ------------------------------------------------------- */
.nav-link.active { color: #22d3ee; }
.nav-pill { transition: background .2s, color .2s, border-color .2s; }
.nav-pill.active { background: #22d3ee; color: #000; border-color: #22d3ee; }

/* ---- Mermaid ---------------------------------------------------------- */
.mermaid { display: flex; justify-content: center; }

/* ---- Tables ----------------------------------------------------------- */
table.pro { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 1rem; }
table.pro th, table.pro td { text-align: left; padding: .9rem 1.1rem; border-bottom: 1px solid #1e293b; vertical-align: top; }
table.pro thead th { background: #0b1220; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; }
table.pro tbody tr:hover { background: rgba(34,211,238,.04); }

/* ---- FAQ accordion ---------------------------------------------------- */
details.faq { transition: background .2s; }
details.faq[open] { background: rgba(34,211,238,.03); }
details.faq summary { cursor: pointer; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary .chev { transition: transform .2s; }
details.faq[open] summary .chev { transform: rotate(90deg); }

/* ---- Misc ------------------------------------------------------------- */
.anchor-offset { scroll-margin-top: 100px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }