/* kh-gaps: search results, generated covers, entry diagram, "as of" line.
   Calm: motion only on hover. Mono for labels, Urbanist for text. */

/* ---------- search results ---------- */
.dcc--search .dcg-search { max-width: 720px; }
.dcc--search .dcg-search__i { flex: none; color: #a6b0d2; margin-right: -2px; }
.dcc--search .dcg-search input { padding-left: 4px; }
.dcc--search .dcg-try { align-items: center; }
.dcc--search .dcg-try small { font-size: 13px; color: #8b97c4; margin-right: 4px; }
.dcg-res .dcc-wrap { display: flex; flex-direction: column; gap: 28px; }
.dcg-res__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.dcg-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #e3e7ef; }
.dcg-tab { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 8px; font: 600 14px var(--bd-font-mono, 'JetBrains Mono', monospace); color: #11193f; text-decoration: none; transition: background .2s, color .2s; }
.dcg-tab small { font-size: 12px; opacity: .6; }
.dcg-tab:hover { background: #eef1f6; color: #11193f; }
.dcg-tab.is-on { background: #11193f; color: #fff; }
.dcg-tab.is-on small { opacity: .75; }
.dcg-tab.is-zero:not(.is-on) { opacity: .5; }
.dcg-res__sum { font-size: 14px; color: #6b7591; }
.dcg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.dcg-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 14px; background: #fff; box-shadow: 0 18px 40px rgb(17 25 63 / .06), inset 0 0 0 1px #eceff3; color: #11193f; text-decoration: none; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.dcg-card:hover { color: #11193f; transform: translateY(-4px); }
.dcg-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.dcg-card__top small { display: flex; align-items: center; gap: 8px; font: 600 11.5px var(--bd-font-mono, 'JetBrains Mono', monospace); letter-spacing: .08em; text-transform: uppercase; color: #d63a30; white-space: nowrap; }
.dcg-card__top small i { width: 6px; height: 6px; border-radius: 50%; background: #ff5247; }
.dcg-card__top .dcg-card__path { color: #6b7591; text-transform: none; letter-spacing: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dcg-card__t { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; text-wrap: pretty; }
.dcg-card__t mark { background: rgb(255 82 71 / .16); color: inherit; border-radius: 3px; box-shadow: 0 0 0 2px rgb(255 82 71 / .16); }
.dcg-card__d { flex: 1 1 auto; font-size: 15.5px; line-height: 1.55; color: #4b5563; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dcg-card__go { font-size: 14.5px; font-weight: 600; }
.dcg-none { position: relative; max-width: 760px; width: 100%; margin: 0 auto; padding: 48px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dcg-none b { font-size: clamp(24px, 3vw, 30px); font-weight: 500; letter-spacing: -.02em; }
.dcg-none > span { font-size: 17px; line-height: 1.55; color: #4b5563; max-width: 30em; }
.dcg-none .dcg-none__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }
.dcg-none__links a { font-size: 15px; font-weight: 600; }
.dcg-none::before, .dcg-none::after { content: ""; position: absolute; width: 28px; height: 28px; border: 1.5px solid #ff5247; }
.dcg-none::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.dcg-none::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
@media (max-width: 640px) {
    .dcg-tabs { border-radius: 14px; }
    .dcg-tab { padding: 0 12px; font-size: 13px; }
    .dcg-card { padding: 20px; }
}

/* ---------- generated cover family (cards without an image) ---------- */
.dcg-cover { position: absolute; inset: 0; display: block; overflow: hidden; color: #fff;
    background: radial-gradient(ellipse 70% 80% at 85% 0, rgb(255 82 71 / .22), transparent 70%), linear-gradient(160deg, #0b1233, #000313); }
.dcg-cover--k2 { background: radial-gradient(ellipse 70% 80% at 10% 100%, rgb(255 82 71 / .18), transparent 70%), linear-gradient(200deg, #121a45, #050a24); }
.dcg-cover--k3 { background: radial-gradient(ellipse 80% 70% at 50% 0, rgb(166 176 210 / .16), transparent 70%), linear-gradient(160deg, #0f1740, #02061c); }
.dcg-cover--k4 { background: radial-gradient(ellipse 60% 80% at 90% 40%, rgb(255 82 71 / .2), transparent 70%), linear-gradient(150deg, #0a1030, #000313); }
.dcg-cover--k5 { background: radial-gradient(ellipse 80% 70% at 20% 0, rgb(255 82 71 / .14), transparent 70%), linear-gradient(170deg, #131c4a, #040922); }
.dcg-cover--k6 { background: radial-gradient(ellipse 70% 70% at 100% 100%, rgb(255 82 71 / .2), transparent 70%), linear-gradient(145deg, #0d1538, #01041a); }
.dcg-cover__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.dcg-cover__t { position: absolute; left: 18px; right: 18px; bottom: 14px; font-weight: 300; line-height: 1; letter-spacing: -.035em; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcg-cover__t--m { font-size: clamp(38px, 4.2vw, 54px); }
.dcg-cover__t--s { font-size: clamp(30px, 3.2vw, 42px); }
.dcg-cover__t--xs { font-size: clamp(22px, 2.4vw, 30px); font-family: var(--bd-font-mono, 'JetBrains Mono', monospace); letter-spacing: -.02em; font-weight: 400; }
.dcb-card__img .dcg-cover, .dcb-feature__img .dcg-cover { position: absolute; }
.dcb-feature__img { position: relative; }
.dcb-card__img .dcb-chip--dark { z-index: 2; background: rgb(255 255 255 / .1); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }

/* ---------- entry diagram ---------- */
.dcg-viz { margin: 28px 0; padding: 22px 24px 26px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #e3e7ef; color: #11193f; }
.dcg-viz__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.dcg-viz__head span { display: inline-flex; align-items: center; gap: 8px; font: 600 12px var(--bd-font-mono, 'JetBrains Mono', monospace); letter-spacing: .12em; text-transform: uppercase; }
.dcg-viz__head span::before { content: ""; width: 7px; height: 7px; background: #ff5247; }
.dcg-viz__head small { font: 500 12px var(--bd-font-mono, 'JetBrains Mono', monospace); color: #6b7591; letter-spacing: .06em; text-transform: uppercase; }
.dcg-spine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 20px 18px; position: relative; }
.dcg-spine::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: #dfe4ea; }
.dcg-node { position: relative; display: flex; flex-direction: column; gap: 4px; padding-top: 22px; min-width: 0; }
.dcg-node i { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #11193f; }
.dcg-node:first-child i { background: #ff5247; box-shadow: none; }
.dcg-node small { font: 500 11px var(--bd-font-mono, 'JetBrains Mono', monospace); letter-spacing: .1em; text-transform: uppercase; color: #6b7591; }
.dcg-node b { font: 500 clamp(22px, 2.2vw, 30px)/1.1 var(--bd-font-mono, 'JetBrains Mono', monospace); letter-spacing: -.02em; color: #11193f; overflow-wrap: anywhere; }
.dcg-node span { font-size: 13.5px; color: #4b5563; line-height: 1.4; }
.dcg-node em { font-style: normal; font-size: 13px; color: #11193f; line-height: 1.45; padding-top: 6px; border-top: 1px solid #eceff3; margin-top: 4px; }
.dcg-ladder { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; }
.dcg-ladder li { display: block; }
.dcg-ladder li span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dcg-ladder li i { display: block; height: 6px; border-radius: 3px; background: #e3e7ef; }
.dcg-ladder li.is-on i { background: #ff5247; }
.dcg-ladder__cap { margin: 0 0 24px; font: 500 12px var(--bd-font-mono, 'JetBrains Mono', monospace); letter-spacing: .04em; color: #6b7591; }
.dcg-ladder__cap b { color: #11193f; font-weight: 600; }
.dcg-ladder { margin-bottom: 12px; }
.dcg-node b.is-text { font: 600 clamp(17px, 1.5vw, 20px)/1.25 var(--bd-font-body, 'Urbanist', sans-serif); letter-spacing: -.01em; overflow-wrap: break-word; }
@media (max-width: 640px) {
    .dcg-viz { padding: 18px 18px 22px; }
    .dcg-spine { grid-template-columns: 1fr 1fr; }
}

/* ---------- "as of" line ---------- */
.dcg-asof { margin: 6px 0 0; font: 500 12px var(--bd-font-mono, 'JetBrains Mono', monospace); letter-spacing: .06em; text-transform: uppercase; color: #6b7591; }
.dc-kh .dc-more .dcg-asof, .dc-kh--hub .dc-sec .dcg-asof { margin-top: 10px; }

/* generated cover sits under real images (lazy-loaded images fade in over it) */
.dcb-card__img img, .dcb-feature__img img { position: relative; z-index: 1; }
.dc-kh .dc-research:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .dc-kh .dc-research:has(> :nth-child(6):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } }
.dc-kh--hub .dcg-asof { margin: 0 0 18px; }