/**
 * Expected Health — developer pages (/developers/ + /developers/mcp/).
 *
 * dv- components layered on book-funnel.css: the pages reuse the CAC book
 * page's bk- design system as-is (header, hero, chips, why/how/faq sections,
 * honesty card, footer) and only add what a developer page needs — code
 * card, capability grid, stats, chat mock, tool table, access form.
 * Enqueued after eh-book by includes/developers/developers.php.
 */

:root {
    --dv-code-bg: #0f172a;
    --dv-code-ink: #e2e8f0;
    --dv-code-line: #1e293b;
    --dv-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Hero ───────────────────────────────────────────────────────── */

.dv-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 18px;
    padding: 5px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bk-green-dark);
    background: var(--bk-green-tint);
    border: 1px solid #c4e9d0;
    border-radius: 999px;
}

.dv-pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bk-green);
    box-shadow: 0 0 0 3px rgba(4, 119, 39, 0.18);
}

.dv-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0 0 30px;
}

/* ── Code card: the one dark surface, the developer page's "price card" ── */

.dv-code {
    max-width: 760px;
    margin: 0 auto;
    text-align: left;
    background: var(--dv-code-bg);
    border-radius: var(--bk-radius);
    box-shadow: var(--bk-shadow-lift);
    overflow: hidden;
}

.dv-code__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--dv-code-line);
}

.dv-code__dots {
    display: flex;
    gap: 6px;
}

.dv-code__dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #334155;
}

.dv-code__tabs {
    display: flex;
    gap: 4px;
}

.dv-code__tab {
    -webkit-appearance: none;
    appearance: none;
    padding: 3px 9px;
    font: inherit;
    font-size: 0.8rem;
    color: #64748b;
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.dv-code__tab:hover {
    color: #cbd5e1;
}

.dv-code__tab[aria-selected="true"] {
    color: #e2e8f0;
    font-weight: 600;
    background: #1e293b;
}

.dv-code__tag {
    margin-left: auto;
    padding: 2px 9px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #86efac;
    border: 1px solid #166534;
    border-radius: 999px;
}

.dv-code__split {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
}

.dv-code pre {
    margin: 0;
    padding: 18px 20px 20px;
    font-family: var(--dv-mono);
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--dv-code-ink);
    white-space: pre;
    overflow-x: auto;
    background: none;
    border: 0;
}

.dv-code pre[hidden] {
    display: none;
}

.dv-code__res {
    border-left: 1px solid var(--dv-code-line);
}

.dv-code .k { color: #86efac; }
.dv-code .s { color: #fcd34d; }
.dv-code .c { color: #64748b; }
.dv-code .p { color: #93c5fd; }

.dv-code__caption {
    max-width: 760px;
    margin: 10px auto 0;
    font-size: 0.82rem;
    color: var(--bk-muted);
    text-align: center;
}

/* ── Stats strip ────────────────────────────────────────────────── */

.dv-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 26px 0 0;
}

.dv-stat {
    padding: 18px 12px;
    text-align: center;
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
}

.dv-stat b {
    display: block;
    font-family: var(--bk-font-display);
    font-size: 1.9rem;
    line-height: 1.1;
    color: var(--bk-ink);
}

.dv-stat span {
    font-size: 0.86rem;
    color: var(--bk-muted);
}

/* ── Capability grid (the why-reason card look, 2x2) ────────────── */

.dv-caps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    text-align: left;
}

.dv-cap {
    padding: 20px 22px;
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    box-shadow: var(--bk-shadow);
}

.dv-cap__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 0 12px;
    color: var(--bk-green-dark);
    background: var(--bk-green-tint);
    border-radius: 10px;
}

.dv-body .dv-cap h3 {
    margin: 0 0 6px;
    font-size: 1.05rem;
}

.dv-cap p {
    margin: 0 0 10px;
    font-size: 0.92rem;
}

.dv-cap code {
    padding: 2px 7px;
    font-family: var(--dv-mono);
    font-size: 0.74rem;
    color: var(--bk-ink);
    background: var(--bk-bg-soft);
    border: 1px solid var(--bk-border);
    border-radius: 6px;
}

/* ── Audience row ───────────────────────────────────────────────── */

.dv-aud {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    text-align: left;
}

.dv-aud > div {
    padding: 14px 16px;
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius-sm);
}

.dv-body .dv-aud h3 {
    margin: 0 0 4px;
    font-size: 0.95rem;
}

.dv-aud p {
    margin: 0;
    font-size: 0.84rem;
}

/* ── Cross-sell band (API page → MCP page) ──────────────────────── */

.dv-band {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 26px;
    align-items: center;
    margin: 38px auto 0;
    padding: 26px 28px;
    text-align: left;
    background: var(--bk-green-tint);
    border: 1px solid #c4e9d0;
    border-radius: var(--bk-radius);
}

.dv-body .dv-band h2 {
    margin: 0 0 8px;
    font-size: 1.4rem;
}

.dv-band p {
    margin: 0 0 14px;
}

.dv-link {
    font-weight: 700;
    color: var(--bk-green-dark);
    text-decoration: none;
}

.dv-link:hover {
    text-decoration: underline;
}

/* ── Chat mock (MCP hero; mini variant in the API band) ─────────── */

.dv-chat {
    display: grid;
    gap: 12px;
    max-width: 700px;
    margin: 0 auto;
    padding: 22px;
    text-align: left;
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    box-shadow: var(--bk-shadow-lift);
}

.dv-chat--mini {
    gap: 8px;
    padding: 14px;
    box-shadow: none;
}

.dv-msg {
    max-width: 86%;
    padding: 11px 15px;
    font-size: 0.93rem;
    line-height: 1.5;
    border-radius: 14px;
}

.dv-chat--mini .dv-msg {
    font-size: 0.82rem;
}

.dv-msg--user {
    justify-self: end;
    color: #fff;
    background: var(--bk-ink);
    border-bottom-right-radius: 4px;
}

.dv-msg--bot {
    color: var(--bk-ink);
    background: var(--bk-bg-soft);
    border-bottom-left-radius: 4px;
}

.dv-tool {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 86%;
    padding: 8px 12px;
    font-family: var(--dv-mono);
    font-size: 0.76rem;
    color: var(--bk-green-dark);
    background: #fff;
    border: 1px dashed #b7dfc4;
    border-radius: 10px;
}

.dv-chat--mini .dv-tool {
    max-width: 100%;
}

.dv-tool b {
    font-weight: 600;
}

.dv-tool span {
    margin-left: auto;
    font-family: 'Rubik', sans-serif;
    color: var(--bk-muted);
}

/* ── Tool table (MCP page) ──────────────────────────────────────── */

.dv-tools {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    font-size: 0.92rem;
    text-align: left;
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
}

.dv-tools th,
.dv-tools td {
    padding: 13px 18px;
    vertical-align: top;
    border: 0;
    border-bottom: 1px solid var(--bk-border);
}

.dv-tools tr:last-child td {
    border-bottom: 0;
}

.dv-tools th {
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bk-muted);
    background: var(--bk-bg-soft);
}

.dv-tools code {
    font-family: var(--dv-mono);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--bk-green-dark);
    background: none;
}

/* ── How-it-works mini mocks (MCP page) ─────────────────────────── */

.dv-mockjson {
    width: 100%;
    padding: 12px 14px;
    overflow: hidden;
    font-family: var(--dv-mono);
    font-size: 0.7rem;
    line-height: 1.6;
    color: var(--bk-ink);
    white-space: pre;
    background: var(--bk-bg-soft);
    border: 1px solid var(--bk-border);
    border-radius: 10px;
}

.dv-mockjson .k {
    font-weight: 600;
    color: var(--bk-green-dark);
}

.dv-track {
    display: grid;
    gap: 10px;
    width: 100%;
}

.dv-track__row {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: 10px;
    align-items: center;
    font-size: 0.82rem;
    color: var(--bk-ink);
}

.dv-track__row i {
    width: 14px;
    height: 14px;
    background: #fff;
    border: 2px solid var(--bk-border);
    border-radius: 50%;
}

.dv-track__row.is-done i {
    background: var(--bk-green);
    border-color: var(--bk-green);
}

.dv-track__row.is-now i {
    border-color: var(--bk-green);
    box-shadow: 0 0 0 4px var(--bk-green-tint);
}

.dv-track__row span {
    font-size: 0.72rem;
    color: var(--bk-muted);
}

.dv-track__row.is-next {
    color: var(--bk-muted);
}

/* ── Access form: Gravity Form 28 inside a lifted card ──────────── */

.dv-access {
    text-align: center;
}

.dv-body .dv-access > h2 {
    font-size: 1.6rem;
    margin-bottom: 6px;
}

.dv-access__lede {
    margin: 0 0 20px;
}

.dv-form {
    max-width: 620px;
    margin: 0 auto;
    padding: 28px;
    text-align: left;
    background: var(--bk-surface);
    border: 1px solid var(--bk-border);
    border-radius: var(--bk-radius);
    box-shadow: var(--bk-shadow-lift);
}

.dv-form__note {
    margin: 12px 0 0;
    font-size: 0.8rem;
    color: var(--bk-muted);
    text-align: center;
}

/* Gravity Forms' Orbital theme prints its palette as an inline <style> on
   #gform_wrapper_{id}[data-form-index].gform-theme — an ID selector, and
   later in the document than this file — so the brand override has to
   out-specify it: one extra class on top of the same ID. Form 28 is
   EH_DEV_FORM_ID in includes/developers/developers.php. */
.dv-body .dv-form #gform_wrapper_28.gform-theme {
    --gf-color-primary: #047727;
    --gf-color-primary-rgb: 4, 119, 39;
    --gf-color-primary-darker: #035c1e;
    --gf-color-primary-lighter: #e8f8ed;
    --gf-ctrl-border-color: #e6e0d6;
    --gf-radius: 10px;
    --gf-font-family-base: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.dv-body .dv-form #gform_wrapper_28 .gform_footer {
    padding-top: 8px;
}

.dv-body .dv-form #gform_wrapper_28 .gform_button {
    width: 100%;
    padding: 13px 24px;
    font-size: 1rem;
    font-weight: 600;
}

.dv-form .gform_confirmation_message {
    padding: 8px 0;
    font-weight: 600;
    color: var(--bk-green-dark);
    text-align: center;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 760px) {
    .dv-caps,
    .dv-stats,
    .dv-band,
    .dv-code__split {
        grid-template-columns: minmax(0, 1fr);
    }

    .dv-aud {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dv-code__res {
        border-left: 0;
        border-top: 1px solid var(--dv-code-line);
    }

    .dv-tool {
        display: block;
        max-width: 100%;
    }

    .dv-tool span {
        display: none;
    }

    /* Third column ("Typical use") is flavor; drop it before the table
       squeezes the descriptions into one-word lines. */
    .dv-tools th:nth-child(3),
    .dv-tools td:nth-child(3) {
        display: none;
    }

    .dv-form {
        padding: 20px 18px;
    }
}