/* usecase-developers.css — styles used only by /use-cases/developers.
   The hub itself is sk-hub from solution-kit.css. */

/* =========================================================================
   Code hub (uc-dev-hub) — the code scanners and noise review converge on the Vornin
   mark and fan out to where findings land (build, pull request, dashboard
   and API): scattered consoles become one place. Equal columns (both sides
   are peers of the same weight). No glow on the mark; teal stays on the
   output side as the kit draws it.
   ========================================================================= */
.uc-dev-hub { grid-template-columns: minmax(0, 1fr) 256px minmax(0, 1fr); margin-top: 8px; }

/* Engine core: the hub's centre expanded from the bare mark into a small box naming
   what happens to every finding between scanners (left) and destinations (right).
   Sits on the kit's through-line; the box background masks the line behind it. */
.uc-dev-engine { height: auto; padding: 0 32px; }
.uc-dev-engine-box {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: 100%; padding: 18px 14px 16px; box-sizing: border-box;
    background: var(--surface); border: 1px solid var(--teal-25); border-radius: var(--r-sm);
    box-shadow: 0 0 0 6px var(--surface), 0 0 32px -6px var(--teal-20);
}
.uc-dev-hub .uc-dev-engine-box img { width: 22px; height: 24px; padding: 0; border: 0; background: none; box-shadow: none; }
.uc-dev-engine-name { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.uc-dev-hub .uc-dev-engine-box ul { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 10px 0 0; border-top: 1px solid var(--border-soft); }
.uc-dev-hub .uc-dev-engine-box li { font-size: 0.78rem; line-height: 1.35; color: var(--ink-2); text-align: center; }
.uc-dev-benchmark-note { margin: 40px 0 0; font-size: 0.8rem; line-height: 1.6; color: var(--ink-3); }
/* Proof cards: the page's measured results as three stat cards between the section
   head and the hub. Design-system Lattice card highlight (.ds-lattice: 60deg tile,
   pitch halved to 19px for the small card (owner call), teal 26%, teal-to-ice pool) anchored on the card's top-right corner
   (recipe default; vertical radius lowered for the ~2:1 card). Lattice rule: no other teal on the card,
   so "Up to" and the * marker are ink, not teal. 6px radius = stat card (--r-sm). */
.uc-dev-proof { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px;
    /* breaks out of the container: wider than the text column, centred on it */
    position: relative; left: 50%; width: min(1400px, calc(100vw - 64px)); transform: translateX(-50%); }
@media (max-width: 1240px) { .uc-dev-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.uc-dev-proof li {
    position: relative; isolation: isolate; overflow: hidden;
    padding: 24px 26px 26px;
    background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--r-sm);
}
.uc-dev-proof li > * { position: relative; z-index: 1; }
.uc-dev-proof li::before, .uc-dev-proof li::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; }
.uc-dev-proof li::before { background: radial-gradient(52% 110% at 102% -15%, rgba(0,191,255,0.12), rgba(77,148,255,0.035) 50%, transparent 100%); }
.uc-dev-proof li::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='21.94'%3E%3Cg stroke='%2300BFFF' stroke-opacity='0.26' stroke-width='1' fill='none'%3E%3Cpath d='M0 0V21.94M0 0L19 10.97M0 10.97L19 0M0 10.97L19 21.94M0 21.94L19 10.97'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 19px 21.94px; background-position: right top;
    -webkit-mask-image: radial-gradient(58% 120% at 102% -15%, #000 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.04) 85%, transparent 100%);
            mask-image: radial-gradient(58% 120% at 102% -15%, #000 0%, rgba(0,0,0,0.55) 30%, rgba(0,0,0,0.18) 60%, rgba(0,0,0,0.04) 85%, transparent 100%);
}
.uc-dev-proof strong {
    display: flex; align-items: baseline; gap: 7px;
    font-family: var(--font-display); font-size: clamp(2.2rem, 3.6vw, 2.9rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1;
    color: var(--ink); font-variant-numeric: tabular-nums;
}
.uc-dev-proof strong small { font-size: 0.36em; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.uc-dev-proof-label { display: block; margin-top: 10px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.uc-dev-proof p { margin: 6px 0 0; max-width: 28ch; font-size: 0.86rem; line-height: 1.5; color: var(--ink-3); }
.uc-dev-proof .uc-dev-proof-ref { color: var(--ink-3); }
.uc-dev-proof-ref { margin-left: 2px; font-weight: 600; color: var(--teal); text-decoration: none; }
.uc-dev-proof-ref:hover { text-decoration: underline; }
@media (max-width: 900px) {
    .uc-dev-hub { grid-template-columns: 1fr; }
    /* Engine box: full width of the column, centred content. Undo the kit's mobile
       mark offset (margin-left:-13px, 40px box) so the mark is not pushed off-edge. */
    .uc-dev-hub .uc-dev-engine { display: block; position: relative; width: 100%; height: auto; margin: 0; padding: 32px 0; box-sizing: border-box; }
    /* Spine elbows: the left spine steps in to the centre, drops into the box top,
       leaves the box bottom at the centre and steps back out to the left spine.
       16px = half the engine's vertical padding. */
    .uc-dev-hub .sk-hub-in::before { bottom: -16px; }
    .uc-dev-hub .sk-hub-out::before { top: -16px; height: calc(100% + 16px - 40px); }
    .uc-dev-hub .uc-dev-engine::before,
    .uc-dev-hub .uc-dev-engine::after {
        content: ""; display: block; position: absolute; left: 6px; right: 50%; height: 16px; background: none;
        border: 0 solid var(--border);
    }
    .uc-dev-hub .uc-dev-engine::before { top: 16px; border-top-width: 1px; border-right-width: 1px; }
    .uc-dev-hub .uc-dev-engine::after { bottom: 16px; border-bottom-width: 1px; border-right-width: 1px; }
    .uc-dev-hub .uc-dev-engine-box { max-width: 100%; box-shadow: none; }
    .uc-dev-hub .uc-dev-engine-box img { width: 22px; height: 24px; margin: 0; padding: 0; }
    .uc-dev-proof { grid-template-columns: 1fr; left: auto; width: auto; transform: none; }
}

/* Branches meet each item at its vertical middle (label + headline + text),
   not at the label line. Bus = lower half of each item plus the gap, then
   the upper half of the next one; each half hangs off its own item so the
   lines follow real text height. Desktop only: phones keep the kit spine. */
@media (min-width: 901px) {
    .uc-dev-hub .sk-hub-in li::before,
    .uc-dev-hub .sk-hub-out li::before { top: 50%; }
    .uc-dev-hub .sk-hub-out li::after { top: calc(50% - 6px); }

    .uc-dev-hub .sk-hub-in li:not(:last-child)::after,
    .uc-dev-hub .sk-hub-out li:not(:last-child) > .sk-chain-stage::after {
        top: 50%;
        height: calc(50% + var(--sk-gap));
    }
    .uc-dev-hub .sk-hub-in li:not(:first-child) > h3::after,
    .uc-dev-hub .sk-hub-out li:not(:first-child) > h3::after {
        content: "";
        position: absolute;
        top: 0;
        width: 1px;
        height: 50%;
        background: var(--border);
    }
    .uc-dev-hub .sk-hub-in li:not(:first-child) > h3::after { right: 0; }
    .uc-dev-hub .sk-hub-out li:not(:first-child) > h3::after { left: 0; }
}