.downloads-container {
    width: 100%;
    margin: 0 auto;
    max-width: calc(1200px + var(--space12, 12px)*2);
    position: relative;
    padding: 0 var(--space12, 12px);
}

.downloads__title {
    font: var(--textHeadingXLarge);
}

.downloads__version-row {
    margin-bottom: var(--space40, 40px);
}

.downloads__version-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space12, 12px);
    margin: 0;
    padding: 0;
    list-style: disc inside;
    font: var(--textBodyRegularMedium);
}

.downloads__version-links > li:first-child {
    list-style: none;
}

.downloads__version-links > li::marker {
    font-size: 12px;
}

.install-method-options {
    display: flex;
    gap: var(--space12, 12px);
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    @media screen and (min-width: 768px) {
        flex-direction: row;
        gap: var(--space40, 40px);
    }
}

.install-method-card {
    /* reset label styles */
    font-weight: 400;
    margin: 0;
    /* styles */
    cursor: pointer;
    display: flex;
    max-width: 400px;
    width: 100%;
    flex-direction: row;
    gap: var(--space16, 16px);
    border-radius: var(--borderRadiusMedium, 6px);
    border: 1px solid var(--colorBorderPrimary, #DEE1E6);
    padding: var(--space16, 16px);
    box-shadow: var(--shadowMedium);
    background: var(--colorBackgroundPrimaryTransparent, rgba(255, 255, 255, 0.72));

    @media screen and (min-width: 768px) {
        max-width: none;
        width: auto;
        flex-grow: 1;
        flex-direction: column;
    }
}

.install-method-card__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.install-method-card__icon {
    width: 32px;
    height: 32px;
}

.install-method-card__title {
    margin: 0;
    color: var(--colorTextPrimary, #282F38);
    font: var(--textHeadingSmall);
    line-height: var(--lineHeightSmall, 24px);
}

.install-method-card__description {
    margin: 0;
    color: var(--colorTextSecondary, #515D70);
    font: var(--textBodyRegularMedium);
    line-height: var(--lineHeightXSmall, 20px); /* 142.857% */
}

.install-method-card:has(input[type="radio"]:checked)  {
    border-radius: var(--borderRadiusMedium, 6px);
    border: 1px solid var(--colorButtonBorderSecondary, #449BE1);
    background: var(--colorButtonBackgroundSecondaryHover, rgba(26, 119, 202, 0.08));
}

.install-method-tabpanel {
    display: none;
}

.install-method-container:has(input[type="radio"][value="windows"]:checked) {
    .install-method-tabpanel[data-tabpanel="windows"] {
        display: block;
    }
}

.install-method-container:has(input[type="radio"][value="docker"]:checked)  {
    .install-method-tabpanel[data-tabpanel="docker"] {
        display: block;
    }
}

.install-method-container:has(input[type="radio"][value="kubernetes"]:checked)  {
    .install-method-tabpanel[data-tabpanel="kubernetes"] {
        display: block;
    }
}

.install-method-tabpanel__callout_list {
    margin-bottom: 0;
    padding-left: var(--space24, 24px);
    line-height: var(--lineHeightXSmall, 20px); /* 142.857% */
}

.install-method-guide {
    padding: var(--space32, 32px);
    border-radius: var(--borderRadiusMedium, 6px);
    border: 1px solid var(--colorBorderPrimary, #DEE1E6);
    box-shadow: var(--shadowMedium);
    background: var(--colorBackgroundPrimaryDefault, #FFF);
    font: var(--textBodyRegularMedium);
    line-height: var(--lineHeightXSmall, 20px); /* 142.857% */
}

.install-method-header-callout {
    margin: var(--space40, 40px) var(--space0, 0px);
}

.install-method-guide__heading {
    /* reset */
    margin: 0;
    letter-spacing: 0;
}

.install-method-guide__heading--small {
    font: var(--textHeadingSmall);
    line-height: var(--lineHeightSmall, 24px); /* 150% */
}

.install-method-guide > p {
    margin: 0 0 var(--space8, 8px) 0;
}

.install-method-guide__footer-links {
    display: flex;
    gap: var(--space16, 16px);
    margin-top: var(--space24, 24px);
}

.install-method-guide__download-btn {
    --button-shadow-color: rgba(0, 0, 0, 0.35);
    --button-shadow-inner: 0px 2px 2px 0px var(--button-shadow-color) inset;
    --button-shadow-outer: 0px 4px 4px 0px var(--button-shadow-color);
    margin-bottom: var(--space24, 24px);
    &&&&& { /* override website.css */
        color: var(--white);
    }
    background: var(--purple300);
    border-color: var(--purple300);
    align-items: center;
    border-radius: .5rem;
    border-width: .0625rem;
    display: flex;
    font: var(--textBodyBoldMedium);
    justify-content: center;
    max-width: fit-content;
    padding: var(--space12) var(--space16);
    transition-duration: .25s;
    transition-property: background, box-shadow, border-color, color;
    transition-timing-function: ease-in-out;
    text-align: center;
    text-decoration: none;
    &:hover {
        color: var(--white, #FFF);
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .35);
        outline: none;
    }
    &:active {
        border-color: var(--purple400, #9747ff);
        box-shadow: var(--button-shadow-inner);
        outline: none;
    }
    &:focus {
        --ring-color: rgba(105, 80, 255, 0.5);
        border-color: var(--ring-color);
        box-shadow: none;
        outline: .25rem solid var(--ring-color);
    }
}

.install-method-guide__installer-unavailable {
    && {
        margin-bottom: var(--space24, 24px);
    }
    font: var(--textBodyRegularMedium);
    line-height: var(--lineHeightXSmall, 20px);
    color: var(--colorTextDisabled, #B2B9C5);
}

.copy-code-btn {
    background: none;
    padding: 0;
    appearance: none;
    border: none;
    position: absolute;
    right: 12px;
    top: 6px;
    color: #999;
    font-size: .833rem;
    text-transform: uppercase;
    text-decoration: none;
    &:hover {
        color: #fff;
        text-decoration: underline;
    }
    &:focus {
        outline: none;
    }
    &:focus-visible {
        outline: 5px auto -webkit-focus-ring-color;
    }
}

.install-config-accordion {
    margin: var(--space8, 8px) var(--space0, 0px) var(--space24, 24px);
}

/*
 * Docker section spacing: keep an 8px gap below the Docker Compose command (to the
 * config-files accordion) and between the Docker pull and run commands.
 *
 * Everything is scoped under .install-method-guide--docker. The selectors below
 * match on generic .install-command adjacency, so without this scope they would
 * also apply to any future install method that stacks two code blocks. Confining
 * them to the Docker guide means a new section gets its own modifier and its own
 * gap rules — nothing here can reach it.
 *
 * The copy button is injected as a zero-height .copy-code-container *before* each
 * .js-install-command at runtime, so the pull/run pres are adjacent before the
 * script runs and container-separated after it. Both cases are handled so the gap
 * stays 8px either way (margins collapse across the empty container).
 */
.install-method-guide--docker .install-command:has(+ .install-config-accordion),
.install-method-guide--docker .install-command:has(+ .install-command),
.install-method-guide--docker .install-command:has(+ .copy-code-container) {
    margin-bottom: var(--space8, 8px);
}

.install-method-guide--docker .install-command + .install-command,
.install-method-guide--docker .install-command + .copy-code-container + .install-command {
    margin-top: var(--space0, 0px);
}

.install-config-accordion__summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space8, 8px);
    cursor: pointer;
    color: var(--colorTextLinkDefault, #1A77CA);
    font: var(--textBodyRegularMedium);
    line-height: var(--lineHeightXSmall, 20px);
    /* hide the default disclosure triangle */
    list-style: none;
}

.install-config-accordion__summary::-webkit-details-marker {
    display: none;
}

.install-config-accordion__summary:hover {
    color: var(--colorTextLinkHover, #155EA0);
}

.install-config-accordion__chevron {
    font-size: 0.75em;
    transition: transform 0.2s ease;
}

.install-config-accordion[open] .install-config-accordion__chevron {
    transform: rotate(180deg);
}

.install-config-accordion__filename {
    margin: var(--space16, 16px) var(--space0, 0px) var(--space8, 8px);
    color: var(--colorTextPrimary, #282F38);
    font: var(--textBodyBoldMedium);
}