/*
 * Agent200 — base styles.
 *
 * Tailwind utilities do the layout, spacing, type and colour work in the templates.
 * This file only holds what utilities don't express well: document defaults, focus
 * treatment, code tokens, motion primitives and a few diagram details.
 */

:root {
    --paper: #FAFAF8;
    --ink-950: #0A0D0C;
    --ink-800: #1D2220;
    --ink-500: #6C746E;
    --ok-400: #36CD81;
    --ok-500: #12B368;
    --ok-700: #087344;
    --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
    --header-h: 3.5rem;
}

/* ---------------------------------------------------------------- Document */

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1.5rem);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background: var(--paper);
    color: var(--ink-950);
    font-family: Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

::selection {
    background: var(--ok-400);
    color: var(--ink-950);
}

/* Consistent page gutter. */
.shell {
    width: 100%;
    max-width: 76rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

@media (min-width: 640px) {
    .shell { padding-inline: 2rem; }
}

@media (min-width: 1024px) {
    .shell { padding-inline: 2.5rem; }
}

/* ---------------------------------------------------------------- Focus */

:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--ok-500);
    outline-offset: 3px;
    border-radius: 6px;
}

.btn:focus-visible { border-radius: 9999px; }

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: 0.625rem 1rem;
    border-radius: 9999px;
    background: var(--ink-950);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    transition: top 160ms var(--ease-settle);
}

.skip-link:focus { top: 0.75rem; }

/* ---------------------------------------------------------------- Buttons */

/* Feedback lives on the press, and it is instant. */
.btn {
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 220ms var(--ease-settle);
    -webkit-tap-highlight-color: transparent;
}

.btn:active {
    transform: scale(0.97);
    transition-duration: 80ms;
}

/* ---------------------------------------------------------------- Header */

.site-header {
    background: rgba(250, 250, 248, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    transition: box-shadow 240ms ease, background-color 240ms ease;
}

/* Scroll edge instead of a permanent divider: the hairline appears only once content passes under. */
.site-header.is-scrolled {
    box-shadow: 0 1px 0 rgba(10, 13, 12, 0.08);
}

.nav-link {
    position: relative;
    transition: color 160ms ease;
}

.nav-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.45rem;
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: var(--ok-500);
    transform: translateX(-50%);
}

/* Mobile navigation sheet: drops from the header it belongs to, and leaves the same way. */
.mobile-nav {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity 220ms ease, transform 320ms var(--ease-settle), visibility 0s linear 320ms;
}

.mobile-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

.menu-toggle .bar {
    transform-origin: center;
    transition: transform 280ms var(--ease-settle);
}

.menu-toggle[aria-expanded="true"] .bar-top { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar-bottom { transform: translateY(-4px) rotate(-45deg); }

/* ---------------------------------------------------------------- Code */

.code-block {
    font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.75;
    tab-size: 2;
    font-variant-ligatures: none;
}

@media (min-width: 640px) {
    .code-block { font-size: 0.84375rem; }
}

.code-block { color: #D5DAD6; }
.tok-comment { color: #6C746E; font-style: italic; }
.tok-string { color: #8FE3B4; }
.tok-keyword { color: #F0B775; }
.tok-number { color: #F0B775; }
.tok-property { color: #A9C7F5; }
.tok-function { color: #F4F5F3; font-weight: 500; }
.tok-punct { color: #7E8781; }

/* Thin, quiet scrollbars for scrollable code. */
.code-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.code-scroll::-webkit-scrollbar { height: 6px; }
.code-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 9999px; }

/* ---------------------------------------------------------------- Surfaces */

/* Blueprint dot grid used behind diagrams. */
.dot-grid {
    background-image: radial-gradient(circle at 1px 1px, rgba(10, 13, 12, 0.10) 1px, transparent 0);
    background-size: 22px 22px;
}

.dot-grid-dark {
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.09) 1px, transparent 0);
    background-size: 22px 22px;
}

/* Soft green light source for ink sections. Static — no moving backgrounds. */
.glow-ok {
    background: radial-gradient(60% 55% at 50% 0%, rgba(54, 205, 129, 0.16), transparent 70%);
}

.fade-edges-x {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

/* Connector lines in diagrams. */
.wire { stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; }
.wire-dash { stroke-dasharray: 3 6; }

/* ---------------------------------------------------------------- Accordion */

.accordion summary { list-style: none; cursor: pointer; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion .accordion-icon { transition: transform 320ms var(--ease-settle); }
.accordion details[open] .accordion-icon { transform: rotate(45deg); }

/* ---------------------------------------------------------------- Motion */

/*
 * Reveal on scroll. Content is only hidden when JavaScript is running (html.js) and the
 * visitor has not asked for reduced motion, so nothing depends on animation to be readable.
 */
@media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {
        opacity: 0;
        transform: translateY(1.25rem);
        transition: opacity 700ms ease, transform 900ms var(--ease-settle);
        transition-delay: calc(var(--reveal-order, 0) * 80ms);
        will-change: opacity, transform;
    }

    .js [data-reveal="fade"] { transform: none; }
    .js [data-reveal="scale"] { transform: scale(0.97); }

    .js [data-reveal].is-visible {
        opacity: 1;
        transform: none;
        will-change: auto;
    }

    /* A request travelling along a wire. */
    .pulse-dot {
        offset-rotate: 0deg;
        animation: travel 2.8s var(--ease-settle) infinite;
        animation-play-state: paused;
    }

    .is-visible .pulse-dot,
    .is-playing .pulse-dot { animation-play-state: running; }

    @keyframes travel {
        0% { offset-distance: 0%; opacity: 0; }
        12% { opacity: 1; }
        80% { opacity: 1; }
        100% { offset-distance: 100%; opacity: 0; }
    }

    .caret::after {
        content: "";
        display: inline-block;
        width: 0.55em;
        height: 1.1em;
        margin-left: 2px;
        vertical-align: text-bottom;
        background: var(--ok-400);
        animation: blink 1.1s steps(1) infinite;
    }

    @keyframes blink { 50% { opacity: 0; } }

    .spin-slow { animation: spin 1.1s linear infinite; }

    @keyframes spin { to { transform: rotate(360deg); } }
}

/*
 * Stepper-driven demos (execution trace, OAuth flow, workflow builder).
 * Without JS every step is shown in its completed state; with JS, steps
 * that have not been reached yet are dimmed rather than removed.
 */
.js [data-stepper] [data-step] {
    transition: opacity 420ms ease, transform 600ms var(--ease-settle), filter 420ms ease;
}

.js [data-stepper] [data-step].is-upcoming {
    opacity: 0.28;
    filter: saturate(0.4);
}

.js [data-stepper] [data-step].is-current {
    opacity: 1;
}

.js [data-stepper] [data-step-only] { display: none; }
.js [data-stepper] [data-step-only].is-current { display: revert; }

.step-tab {
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .pulse-dot { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
    .site-header {
        background: var(--paper);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-contrast: more) {
    .site-header { background: var(--paper); box-shadow: 0 1px 0 var(--ink-950); }
}

/* ---------------------------------------------------------------- Forms */

.field {
    width: 100%;
    border-radius: 0.875rem;
    border: 1px solid #DFE2DE;
    background: #fff;
    padding: 0.8125rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink-950);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field::placeholder { color: #959C96; }
.field:hover { border-color: #C3C8C3; }

.field:focus-visible {
    outline: none;
    border-radius: 0.875rem;
    border-color: var(--ok-500);
    box-shadow: 0 0 0 4px rgba(18, 179, 104, 0.16);
}

.field[aria-invalid="true"] {
    border-color: #DC2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10);
}

select.field {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C746E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 1.125rem;
    padding-right: 2.75rem;
}

/* ---------------------------------------------------------------- Long-form (legal) */

.prose-legal { color: #333A36; font-size: 1.0625rem; line-height: 1.7; }
.prose-legal h2 { margin-top: 3rem; margin-bottom: 0.75rem; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; color: var(--ink-950); scroll-margin-top: 6rem; }
.prose-legal h3 { margin-top: 2rem; margin-bottom: 0.5rem; font-size: 1.125rem; font-weight: 600; color: var(--ink-950); }
.prose-legal p { margin-bottom: 1.125rem; }
.prose-legal ul { margin: 0 0 1.25rem; padding-left: 1.25rem; list-style: disc; }
.prose-legal li { margin-bottom: 0.5rem; padding-left: 0.25rem; }
.prose-legal li::marker { color: #959C96; }
.prose-legal a { color: var(--ok-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose-legal a:hover { color: #079153; }
.prose-legal strong { color: var(--ink-950); font-weight: 600; }
.prose-legal table { width: 100%; margin: 0 0 1.5rem; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.6; }
.prose-legal th { padding: 0 0 0.75rem; text-align: left; vertical-align: bottom; font-size: 0.8125rem; font-weight: 600; color: var(--ink-950); }
.prose-legal td { padding: 1.125rem 0; vertical-align: top; border-top: 1px solid #DFE2DE; }
.prose-legal th:first-child, .prose-legal td:first-child { width: 46%; padding-right: 1.75rem; }
.prose-legal td > p:last-child { margin-bottom: 0; }
@media (max-width: 639px) {
    .prose-legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .prose-legal tr, .prose-legal td { display: block; }
    .prose-legal td:first-child { width: auto; padding: 1.125rem 0 0.5rem; }
    .prose-legal td + td { padding-top: 0; border-top: 0; }
}

@media print {
    .site-header, .site-footer, .skip-link { display: none !important; }
}