/* data_pm.css — the product pages under /data/<product>/ (Polymarket first, 2026-11-03).

   Loaded by data/_layout.html ONLY on a page with product tabs (data_catalog.PRODUCT_TABS), on top of
   data_api.css. Ported from the approved mocks (tmp/data-pages-mocks/hub/static/pmh.css + pages.css, the latter
   being the inline <style> blocks of /data/schemas and /data/api, which stay where they are). Every colour is a
   --vd-* token, so the site's light/dark presets hold. The macros in data/_macros.html (ask_strip, toc,
   code_tabs, steps, schema_card, matrix) are written against these classes. */

.vd { --vd-warn: var(--color-warning, var(--vd-brand)); }

/* ── the product tabs in the sticky top bar, in place of the breadcrumb ── */
.pmh-topnav { display: flex; align-items: center; gap: .3rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.pmh-topnav::-webkit-scrollbar { display: none; }
.pmh-topnav a { flex: 0 0 auto; font-size: 12px; padding: .22rem .62rem; border: 1px solid var(--vd-border); border-radius: 999px; color: var(--vd-text-2); text-decoration: none; white-space: nowrap; }
.pmh-topnav a:hover { border-color: var(--vd-border-strong); color: var(--vd-text); text-decoration: none; }
.pmh-topnav a.is-on { border-color: var(--vd-brand); color: var(--vd-text); background: var(--vd-brand-dim); }
.pmh-topnav .pmh-topnav-t { border: 0; padding-left: 0; font-weight: 700; color: var(--vd-text); }

/* ── one-column header: the lead runs the full width, the actions sit under it ── */
.vd-pg-head { display: block; }
.vd-pg-head .vd-lead { max-width: 75rem; }
.vd-pg-head .vd-ctas { margin-top: .9rem; }

/* ── cards and links ── */
.vd-grid > a.vd-card { display: flex; flex-direction: column; }
.pmh-go { margin-top: auto; padding-top: .8rem; color: var(--vd-brand); font-size: 12.5px; font-weight: 600; }
.pmh-list { margin: .55rem 0 0; padding-left: 1.1rem; color: var(--vd-text-2); font-size: 13px; display: grid; gap: .35rem; }
.pmh-list b { color: var(--vd-text); font-weight: 600; }
.vd-panel-tools .vd-btn--xs { margin-right: .5rem; }

/* ── endpoint reference: one <details> per route ── */
.pmh-eps { display: grid; gap: .5rem; }
.pmh-ep { border: 1px solid var(--vd-border); border-radius: var(--vd-r-lg); background: var(--vd-surface); }
.pmh-ep[open] { border-color: var(--vd-border-strong); }
.pmh-ep > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .7rem 1rem; }
.pmh-ep > summary::-webkit-details-marker { display: none; }
.pmh-ep > summary::after { content: "▸"; color: var(--vd-text-3); transition: transform .15s; }
.pmh-ep[open] > summary::after { transform: rotate(90deg); }
.pmh-ep > summary code { font-size: 13px; color: var(--vd-text); overflow-wrap: anywhere; }
.pmh-ep > summary .pmh-sum { display: block; font-size: 12px; color: var(--vd-text-3); margin-top: .1rem; }
.pmh-ep-b { padding: 0 1rem 1rem; display: grid; gap: .8rem; min-width: 0; }
.pmh-ep-b p { margin: 0; color: var(--vd-text-2); font-size: 13px; line-height: 1.6; }
.pmh-ep-b .vd-tblwrap { margin: 0; }
.pmh-ep-b .vd-faq { margin: 0; }
.pmh-req { font-size: 11px; color: var(--vd-brand); margin-left: .35rem; }

.pmh-q { font-size: 14px; font-weight: 600; color: var(--vd-text); }
.pmh-ask { border-left: 3px solid var(--vd-brand); background: var(--vd-surface-2); padding: .6rem .9rem; border-radius: var(--vd-r-md); }
.pmh-ask p { color: var(--vd-text); margin-top: .25rem; }
.pmh-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.4rem 0 1rem; }
.pmh-alert { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .8rem; }
.pmh-input { flex: 1 1 16rem; min-width: 0; font: inherit; font-size: 13px; padding: .45rem .7rem; color: var(--vd-text); background: var(--vd-sunken); border: 1px solid var(--vd-border); border-radius: var(--vd-r-md); }
.pmh-input:focus { outline: 2px solid var(--vd-brand); outline-offset: 1px; border-color: var(--vd-brand); }
.pmh-prompt { display: flex; flex-direction: column; gap: .6rem; }
.pmh-prompt p { color: var(--vd-text); font-size: 13.5px; margin: 0; }
.pmh-prompt .vd-btn { align-self: flex-start; margin-top: auto; }
.pmh-url { margin-bottom: .5rem; }
.pmh-urlc { font-size: 15px; color: var(--vd-text); background: var(--vd-sunken); padding: .4rem .7rem; border-radius: var(--vd-r-md); }
.pmh-grp th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--vd-brand); background: var(--vd-surface-2); }
.pmh-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin: .5rem 0; }
.pmh-code { margin-top: .8rem; min-width: 0; }
.pmh-code .vd-pre { margin: 0; }

/* ── hub: AI first ── */
.pmh-connect { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1rem; }
.pmh-connect .pmh-alert { margin-top: .45rem; }
.pmh-clients { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.pmh-clients a { font-size: 12.5px; padding: .3rem .75rem; border: 1px solid var(--vd-border); border-radius: 999px; color: var(--vd-text); text-decoration: none; }
.pmh-clients a:hover { border-color: var(--vd-brand); }
.pmh-asks { margin-top: 1rem; }
.pmh-asks .pmh-prompt { height: 100%; }
.pmh-more { margin: .9rem 0 0; }
.pmh-more .pmh-go { padding-top: 0; }
.pmh-prompts { display: grid; gap: .8rem; }

/* ── the data × delivery matrix ── */
.pmh-matrix th[scope="row"] { color: var(--vd-text); font-weight: 600; white-space: nowrap; }
.pmh-matrix td { white-space: nowrap; }
.pmh-y { color: var(--vd-pos); font-weight: 700; }
.pmh-p { color: var(--vd-warn); font-weight: 700; }
.pmh-n { color: var(--vd-text-3); }
.pmh-cn { font-size: 11.5px; color: var(--vd-text-3); }

/* ── studies, models, side-by-side ── */
.pmh-studies { display: grid; gap: 1rem; }
.pmh-study { display: grid; gap: .7rem; min-width: 0; }
.pmh-study h3 { font-size: 15px; margin: 0; }
.pmh-study p { margin: 0; }
.pmh-codecap { max-height: 18rem; overflow: auto; margin: 0; }
.pmh-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.pmh-model { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pmh-model .vd-card h3 { font-size: 14px; }
.pmh-model .vd-card p + p { margin-top: .5rem; }
.pmh-warn { border-left-color: var(--vd-warn); }
.pmh-docs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0 1rem; }
.pmh-docs .pmh-go { margin-top: 0; padding-top: 0; }
@media (width <= 64rem) { .pmh-two, .pmh-model { grid-template-columns: minmax(0, 1fr); } }

/* ── the "Ask your AI" strip under every page header ── */
.pmh-askstrip { margin: 0 0 1.4rem; }
.pmh-ask-h { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pmh-ask-h .pmh-go { padding-top: 0; margin-top: 0; }
.pmh-askqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: .7rem; }
.pmh-askq { display: flex; flex-direction: column; gap: .45rem; padding: .75rem .9rem; border: 1px solid var(--vd-border); border-radius: var(--vd-r-md); background: var(--vd-surface-2); min-width: 0; }
.pmh-askq p { margin: 0; color: var(--vd-text); font-size: 13.5px; }
.pmh-askq .vd-btn { align-self: flex-start; margin-top: auto; }
.pmh-tool code { font-size: 11.5px; }
@media (width <= 48rem) { .pmh-askqs { grid-template-columns: minmax(0, 1fr); } }

/* ── the sticky in-page index ── */
.pmh-toc { position: sticky; top: var(--vd-topbar-h); z-index: 20; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none;
  padding: .45rem 0; margin: 0 0 1.2rem; background: var(--vd-bg); border-bottom: 1px solid var(--vd-border); }
.pmh-toc::-webkit-scrollbar { display: none; }
.pmh-toc a { flex: 0 0 auto; font-size: 12px; color: var(--vd-text-2); padding: .22rem .62rem; border-radius: 999px; text-decoration: none; }
.pmh-toc a:hover { color: var(--vd-text); background: var(--vd-surface); }
.vd [id] { scroll-margin-top: calc(var(--vd-topbar-h) + 3rem); }
.pmh-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
.pmh-index h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--vd-text-3); margin: 0 0 .35rem; }
.pmh-index ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .25rem; font-size: 13px; }
.pmh-index a { color: var(--vd-text); text-decoration: none; }
.pmh-index a:hover { color: var(--vd-brand); }
@media (width <= 48rem) { .pmh-index { grid-template-columns: minmax(0, 1fr); } }

/* ── findings, jobs, chips ── */
.pmh-finding { border-left: 3px solid var(--vd-pos); background: var(--vd-pos-dim); padding: .7rem .95rem; border-radius: var(--vd-r-md); color: var(--vd-text); font-size: 14px; }
.pmh-finding b { color: var(--vd-pos); }
.pmh-jobs .vd-card { display: flex; flex-direction: column; gap: .55rem; }
.pmh-jobs .pmh-q { font-size: 13.5px; color: var(--vd-text); margin: 0; }
.pmh-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; }
.pmh-chips code { font-size: 11.5px; }
.pmh-chips small { color: var(--vd-text-3); margin-left: .15rem; }

/* ── the route builder ── */
.pmh-rb { display: grid; gap: .8rem; }
.pmh-rb-params { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.pmh-rb-params label { display: grid; gap: .2rem; font-size: 11.5px; color: var(--vd-text-3); }
.pmh-rb-url { display: flex; gap: .5rem; align-items: center; background: var(--vd-sunken); border: 1px solid var(--vd-border); border-radius: var(--vd-r-md); padding: .5rem .7rem; }
.pmh-rb-url code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px; }
.pmh-rb-resp { max-height: 22rem; overflow: auto; margin: 0; }
.pmh-side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.pmh-side .vd-pre { max-height: 32rem; overflow: auto; }
@media (width <= 64rem) { .pmh-rb-params, .pmh-side { grid-template-columns: minmax(0, 1fr); } }

/* ── lifted from /data/schemas: the dataset card and its "Load it" tabs ── */
.vd .vd-spages { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .4rem; margin: 0 0 .4rem; }
.vd .vd-spages a { display: flex; align-items: center; gap: .45rem; border: 1px solid var(--vd-border); border-radius: var(--vd-r-md); padding: .4rem .65rem; font-size: 12px; color: var(--vd-text); background: var(--vd-surface); }
.vd .vd-spages a:hover { border-color: var(--vd-border-strong); text-decoration: none; background: var(--vd-surface-hover); }
.vd .vd-goals { list-style: none; padding: 0; margin: .4rem 0 1rem; display: grid; gap: .45rem; }
.vd .vd-goals li { display: flex; gap: .55rem; align-items: flex-start; font-size: 13px; color: var(--vd-text-2); margin: 0; }
.vd .vd-goals b { color: var(--vd-text); font-weight: 600; }
.vd .vd-ck { color: var(--vd-pos); flex-shrink: 0; }
.vd .vd-schema { border: 1px solid var(--vd-border); border-radius: var(--vd-r-xl); background: var(--vd-surface); padding: 1.1rem 1.3rem 1.2rem; margin: 1.4rem 0 0; scroll-margin-top: calc(var(--vd-topbar-h) + .8rem); }
.vd .vd-schema:target { border-color: var(--vd-brand); }
.vd .vd-sp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.vd .vd-sp-head h2 { margin: .2rem 0 .35rem; font-size: 1.2rem; }
.vd .vd-sp-head p { color: var(--vd-text-2); margin: 0 0 .5rem; max-width: 46rem; }
.vd .vd-sp-src { display: flex; align-items: center; gap: .45rem; font-size: 11px; color: var(--vd-text-2); }
.vd .vd-sp-badges { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.vd .vd-facts { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: .2rem 0 0; font-size: 12px; }
.vd .vd-facts div { display: flex; gap: .4rem; align-items: baseline; }
.vd .vd-facts dt { color: var(--vd-text-3); text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; }
.vd .vd-facts dd { margin: 0; color: var(--vd-text); }
.vd .vd-schema > h3 { font-size: .92rem; margin: 1.2rem 0 .4rem; }
.vd .vd-codetabs .vd-tabs { margin: 0 0 .1rem; }
.vd .vd-codetabs .vd-code { margin-top: .4rem; }
.vd .vd-note, .vd .vd-ref { font-size: 12px; color: var(--vd-text-3); margin: .5rem 0 0; }

/* ── lifted from /data/api: the numbered steps, prose, limits table ── */
.vd .vd-steps { list-style: none; padding: 0; margin: 0 0 .4rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.vd .vd-step { position: relative; border: 1px solid var(--vd-border); border-radius: var(--vd-r-lg); background: var(--vd-surface); padding: .95rem 1rem .9rem 3rem; margin: 0; }
.vd .vd-step b { display: block; color: var(--vd-text); font-weight: 600; margin-bottom: .2rem; }
.vd .vd-step p { color: var(--vd-text-2); font-size: 12.5px; margin: 0; }
.vd .vd-n { position: absolute; left: .95rem; top: .9rem; width: 1.45rem; height: 1.45rem; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--vd-brand-dim); color: var(--vd-brand); border: 1px solid var(--vd-brand-line); }
.vd .vd-prose p { color: var(--vd-text-2); font-size: 13px; }
.vd .vd-prose b { color: var(--vd-text); font-weight: 600; }
.vd .vd-list { font-size: 13px; color: var(--vd-text-2); }
.vd .vd-list b { color: var(--vd-text); font-weight: 600; }
.vd .vd-lim-t th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--vd-text-2); width: 9.5rem; white-space: nowrap; vertical-align: top; }
.vd .vd-lim-t td b { color: var(--vd-text); }
.vd .vd-linksrow { display: flex; gap: 1.1rem; flex-wrap: wrap; margin: 1.6rem 0 0; font-size: 13px; }
.vd .vd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (width <= 48rem) { .vd .vd-steps { grid-template-columns: minmax(0, 1fr); } }