/* page-api-docs.css - API reference page styles. */

        @keyframes gwbDrift {

            0%,
            100% {
                transform: translate3d(0, 0, 0) scale(1)
            }

            33% {
                transform: translate3d(6%, -4%, 0) scale(1.12)
            }

            66% {
                transform: translate3d(-5%, 5%, 0) scale(.94)
            }
        }

        .gwb-blob {
            animation: gwbDrift 20s ease-in-out infinite;
            will-change: transform;
        }

        /* compact horizontal workflow wire */
        .mini-wire {
            background-image: repeating-linear-gradient(90deg, rgba(6, 182, 212, .8) 0 6px, transparent 6px 12px);
            background-size: 48px 2px;
            background-position-x: 0;
            background-repeat: no-repeat;
        }

        .mini-wire.run {
            animation: miniDash 1s linear infinite;
        }

        @keyframes miniDash {
            to {
                background-position-x: 48px;
            }
        }

        /* Inline-SVG variant of the workflow wire. Some connectors are drawn as
           real <svg> elements instead of the dashed-div .mini-wire, and their
           .gw-wire-anim / .gw-wire-dot hooks previously had no CSS at all, so
           those wires sat completely static next to animated ones. Animate the
           path dash offset and sweep the dot along the 48-unit viewBox. */
        .gw-wire-anim path {
            stroke-dasharray: 6 6;
            animation: gwWireDash 1s linear infinite;
        }

        @keyframes gwWireDash {
            to {
                stroke-dashoffset: -24;
            }
        }

        .gw-wire-dot {
            animation: gwWireDot 1s linear infinite;
        }

        @keyframes gwWireDot {
            0% {
                transform: translateX(0);
                opacity: 0;
            }

            12% {
                opacity: 1;
            }

            88% {
                opacity: 1;
            }

            100% {
                transform: translateX(48px);
                opacity: 0;
            }
        }

        .eng-bar {
            background: linear-gradient(90deg, #06B6D4, #8B5CF6);
            animation: engFill 7s ease-in-out infinite alternate;
        }

        @keyframes engFill {
            from { width: 12%; }
            to { width: 100%; }
        }

        /* GSMWhale signature glow system */
        .whale-glow {
            box-shadow: 0 0 20px rgba(6, 182, 212, 0.18), 0 0 50px rgba(6, 182, 212, 0.08);
        }
        .ai-glow {
            box-shadow: 0 0 25px rgba(99, 102, 241, 0.18), 0 0 60px rgba(99, 102, 241, 0.08);
        }
        .whale-button {
            background: linear-gradient(135deg, #0284C7, #06B6D4);
            box-shadow: 0 8px 30px rgba(6, 182, 212, 0.20);
        }

        /* ── section water texture background + readability veil + faint grid ── */
        .gw-sec-water { position: relative; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
        .gw-sec-water::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -10;
            background-image:
                linear-gradient(180deg, rgba(248,250,252,.90) 0%, rgba(248,250,252,.55) 45%, rgba(248,250,252,.88) 100%),
                repeating-linear-gradient(0deg, rgba(148,163,184,.05) 0, rgba(148,163,184,.05) 1px, transparent 1px, transparent 56px),
                repeating-linear-gradient(90deg, rgba(148,163,184,.05) 0, rgba(148,163,184,.05) 1px, transparent 1px, transparent 56px),
                url('../images/bg.png');
            background-size: cover, auto, auto, cover;
            background-position: center;
            background-attachment: scroll, scroll, scroll, fixed;
            filter: saturate(1.15) hue-rotate(-6deg);
            pointer-events: none;
        }
        .dark .gw-sec-water::before {
            background-image:
                linear-gradient(180deg, rgba(5,9,20,.90) 0%, rgba(5,9,20,.58) 45%, rgba(5,9,20,.85) 100%),
                repeating-linear-gradient(0deg, rgba(148,163,184,.04) 0, rgba(148,163,184,.04) 1px, transparent 1px, transparent 56px),
                repeating-linear-gradient(90deg, rgba(148,163,184,.04) 0, rgba(148,163,184,.04) 1px, transparent 1px, transparent 56px),
                url('../images/darkbg.png');
            background-size: cover, auto, auto, cover;
            background-position: center;
            background-attachment: scroll, scroll, scroll, fixed;
            filter: saturate(1.15) hue-rotate(-6deg);
        }

        /* ── whale corner deco — light / dark, masked fade ── */
        .gw-whale::after {
            content: "";
            position: absolute;
            top: 50%;
            z-index: -10;
            width: min(30vw, 420px);
            aspect-ratio: 3 / 2;
            background-image: url('../images/whalelight.webp');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: .32;
            pointer-events: none;
            transform: translateY(-50%);
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%);
                    mask-image: linear-gradient(90deg, transparent, #000 32%);
        }
        .dark .gw-whale::after {
            background-image: url('../images/whaledark.webp');
        }
        .gw-whale-right::after {
            right: 0;
        }
        .gw-whale-left::after {
            left: 0;
            transform: translateY(-50%) scaleX(-1);
            -webkit-mask-image: linear-gradient(270deg, transparent, #000 32%);
                    mask-image: linear-gradient(270deg, transparent, #000 32%);
        }

        @media (prefers-reduced-motion: reduce) {
            .gwb-blob,
            .mini-wire.run,
            .eng-bar {
                animation: none !important;
            }
            .gw-sec-water::before {
                background-attachment: scroll;
            }
        }

        /* ── Minimum readable size for prose and data labels ──
           This page leans on 9px/10px utility classes for badges, wire-step
           captions, fact chips and supplier stat labels. At 9-10px the text is
           below every common accessibility floor (WCAG has no absolute px
           minimum, but 12px is the practical limit before x-height and
           letter-spacing collapse) and it is genuinely hard to read on a
           phone — the supplier stats in particular are real data, not
           decoration.

           NOTE: this rule does NOT live here. Tailwind is loaded from the CDN,
           which injects its stylesheet at runtime *after* these files, so an
           equal-specificity rule in this file loses. The override lives in the
           <style> block near the end of api-docs.html instead, where it comes
           later in the cascade. See the "readable floor" block there. */

        /* The mono code blocks describe payload shapes and are meant to read
           as dense terminal output; 11.5-12.5px is already the intended look,
           so only the sub-11px cases are lifted. */