/* /sdks: four SDK cards on the shared header-row card (.cap--hd: icon beside the name, equal heights per row), a compatibility strip and the "write your own" card. The look comes from developers.css. */
.dv-sdks > li { min-width: 0; }
.dv-sdk h3 { overflow-wrap: anywhere; }
.dv-sdk .code { margin: 0; }
.dv-sdk .dv-links .btn { max-width: 100%; }
.dv-sdk .dv-links .btn, .dv-sdk .dv-links { min-width: 0; }
.dv-sdks .dv-sdk > .c-ico { color: var(--brand-orange); }
.dv-sdks > :nth-child(2) > .c-ico { color: var(--brand-magenta); } .dv-sdks > :nth-child(3) > .c-ico { color: var(--brand-indigo); } .dv-sdks > :nth-child(4) > .c-ico { color: var(--brand-blue); }
.dv-sdk .code__bar { flex-wrap: nowrap; }
.dv-sdk .code__bar > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-sdk > .dv-links { align-self: end; }

/* ============ SDK cards, redesigned: glass card, 44px hue tile, compact status/meta, one-line install strip with an icon Copy, quiet link pills at one baseline ============ */
.dv-sdks { align-items: stretch; gap: 20px; }
.dv-sdks > :nth-child(1) { --hue: var(--brand-orange); } .dv-sdks > :nth-child(2) { --hue: var(--brand-magenta); } .dv-sdks > :nth-child(3) { --hue: var(--brand-indigo); } .dv-sdks > :nth-child(4) { --hue: var(--brand-blue); }
.dv-sdks.dv-sdks > li.dv-sdk.dv-sdk { container-type: inline-size; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; grid-row: auto; column-gap: 14px; row-gap: 0; align-content: stretch; padding: 22px; height: auto; border-radius: var(--r-panel); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), translate var(--t-fast) var(--ease); }
.dv-sdks.dv-sdks > .dv-sdk > * { grid-column: 1 / -1; margin: 0; }
.dv-sdks.dv-sdks > .dv-sdk > .c-ico { grid-column: 1; grid-row: 1; width: 44px; height: 44px; border-radius: 12px; align-self: center; color: var(--hue); border-color: color-mix(in srgb, var(--hue) 38%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--hue) 30%, transparent), color-mix(in srgb, var(--hue) 7%, transparent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.dv-sdks.dv-sdks > .dv-sdk > .c-ico svg { width: 22px; height: 22px; }
.dv-sdks.dv-sdks > .dv-sdk > h3 { grid-column: 2; grid-row: 1; align-self: center; font-weight: 600; font-size: 17px; line-height: 1.3; }
.dv-sdks.dv-sdks > .dv-sdk > .dv-meta { grid-row: 2; margin-top: 16px; gap: 12px; align-content: start; }
.dv-sdk .badges { gap: 6px; }
.dv-sdk .dv-kv { gap: 7px; }
.dv-sdk .dv-kv > div { grid-template-columns: minmax(0, 1fr); gap: 1px; }
@container (min-width: 22rem) { .dv-sdk .dv-kv > div { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 10px; } }
.dv-sdk .dv-kv dd code { font-size: 12px; white-space: normal; overflow-wrap: anywhere; }
.dv-sdks.dv-sdks > .dv-sdk > .dv-cmd { grid-row: 3; align-self: end; margin-top: 16px; }
.dv-sdks.dv-sdks > .dv-sdk > .dv-links { grid-row: 4; margin-top: 14px; align-self: end; }
/* install strip: label above, one line of the real command (the full text stays in the page and is what Copy copies), faded at the end */
.dv-sdk .dv-cmd { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lab lab" "pre cp"; gap: 6px 4px; padding: 0; border: 0; background: none; box-shadow: none; overflow: visible; border-radius: 0; background: none !important; outline: 0 !important; }
.dv-sdk .dv-cmd::before, .dv-sdk .dv-cmd::after { content: none; display: none; }
.dv-cmd .code__bar { display: contents; }
.dv-cmd .code__bar > span:first-child { grid-area: lab; font: var(--text-small); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.dv-cmd pre { grid-area: pre; grid-row: 2; grid-column: 1; align-self: center; overflow: hidden; white-space: nowrap; padding: 0 0 0 12px; height: 38px; display: flex; align-items: center; border-radius: 10px 0 0 10px; background: rgba(0, 0, 0, .34); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); font: var(--text-code); font-size: 13px; line-height: 1; color: var(--text-dim); -webkit-mask-image: none; }
.dv-cmd pre code { display: block; overflow: hidden; white-space: nowrap; font: inherit; line-height: 1.5; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); width: 100%; }
.dv-cmd pre:focus-visible, .dv-cp:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dv-cp { grid-row: 2; grid-column: 2; position: relative; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 0 10px 10px 0; background: rgba(0, 0, 0, .34); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); color: var(--text-dim); cursor: pointer; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.dv-cp:hover { color: var(--text); background: color-mix(in srgb, var(--hue) 22%, rgba(0, 0, 0, .34)); }
.dv-cp svg { grid-area: 1 / 1; width: 16px; height: 16px; }
.dv-cp__ok { opacity: 0; } .dv-cp.is-copied { color: #7ee2a8; } .dv-cp.is-copied .dv-cp__i { opacity: 0; } .dv-cp.is-copied .dv-cp__ok { opacity: 1; }
/* quiet footer pills: the same pill height as everywhere; stacked in a narrow card, side by side in a wide one */
.dv-sdk .dv-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.dv-sdk .dv-links .btn { width: 100%; justify-content: flex-start; background: transparent; }
@container (min-width: 22rem) { .dv-sdk .dv-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* hover and focus: lift 2px, hue border, soft glow; text never moves inside the card */
@media (hover: hover) { .dv-sdks > .dv-sdk:hover { translate: 0 -2px; border-color: color-mix(in srgb, var(--hue) 55%, var(--border)); box-shadow: var(--elev), 0 10px 30px -12px color-mix(in srgb, var(--hue) 55%, transparent); } }
.dv-sdks > .dv-sdk:focus-within { border-color: color-mix(in srgb, var(--hue) 55%, var(--border)); box-shadow: var(--elev), 0 10px 30px -12px color-mix(in srgb, var(--hue) 55%, transparent); }
@media (prefers-reduced-motion: reduce) { .dv-sdks > .dv-sdk, .dv-sdks > .dv-sdk:hover { translate: none; transition: none; } .dv-cp { transition: none; } }
/* four across from 1280 px, two from 768 px, one on phones */
@media (max-width: 79.99rem) { .dv-sdks.iv-c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .dv-sdks.iv-c4 { grid-template-columns: minmax(0, 1fr); } }