/*
 * 下载选择器（template-parts/download-picker.php，行为见 js/download-picker.js）
 * 一个蓝色实心主按钮（每屏唯一）+ 版本行 + 提示；点击下载后切为安装指引；「其他版本」默认展开（服务端渲染 .is-open）。
 * 「其他版本」两种变体都在文档流内原位展开（grid-template-rows 0fr → 1fr 过渡），推开下面的内容；
 * hero 版列表是面板里的深色内嵌盒子。
 */

.dl-picker {
    position: relative;
    display: grid;
    gap: var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--fg);
}

.dl-picker__main,
.dl-picker__guide {
    display: grid;
    gap: var(--space-2);
}

.dl-picker p {
    margin: 0;
}

.dl-picker [hidden] {
    display: none;
}

/* ---------- 主按钮 ---------- */
.dl-picker__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: var(--hero-dl-btn-h);
    padding: 0 var(--space-5);
    border-radius: var(--radius-md);
    background: var(--brand-blue);
    color: var(--fg-on-brand);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-base) var(--ease-out);
}

.dl-picker__btn:hover,
.dl-picker__btn:focus-visible {
    background: var(--brand-blue-hover);
}

/* 推荐平台还没有包：线框灰字，不可点 */
.dl-picker__btn.is-disabled {
    border: var(--line-width) solid var(--line-strong);
    background: transparent;
    color: var(--fg-muted);
    cursor: not-allowed;
}

.dl-picker__btn.is-disabled [aria-hidden="true"] {
    display: none;
}

/* 指引视图出现时收起首页面板的「本版亮点」，面板不因此变高（不支持 :has 的浏览器只是多占一点高度） */
.hero-dl:has(.dl-picker__guide:not([hidden])) .hero-dl__notes {
    display: none;
}

.dl-picker__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-secondary);
}

.dl-picker__rec::before {
    content: "·";
    margin-right: var(--space-2);
}

.dl-picker__hint {
    font-size: var(--fs-xs);
    color: var(--fg-muted);
}

.dl-picker.is-unsupported .dl-picker__hint {
    font-size: var(--fs-sm);
    color: var(--fg-secondary);
}

/* ---------- 安装指引 ---------- */
.dl-picker__guide-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    outline: none;
}

.dl-picker__steps {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: dl-step;
    color: var(--fg-secondary);
    font-size: var(--fs-xs);
}

.dl-picker__steps li {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    counter-increment: dl-step;
}

.dl-picker__steps li::before {
    content: counter(dl-step);
    flex: none;
    display: inline-grid;
    place-items: center;
    width: var(--dl-step-size);
    height: var(--dl-step-size);
    border-radius: var(--radius-full);
    background: var(--brand-blue-soft);
    color: var(--fg);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    line-height: 1;
}

.dl-picker__guide-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}

/* ---------- 文字按钮 / 链接 ---------- */
.dl-picker__link,
.dl-picker__toggle {
    padding: 0;
    border: 0;
    background: none;
    color: var(--hero-dl-meta);
    font: inherit;
    font-size: var(--fs-xs);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--dur-base) var(--ease-out);
}

/* 「其他版本」按钮不变色：展开 / 收起只靠箭头方向区分，焦点仍有 outline */
.dl-picker__link:hover,
.dl-picker__link:focus-visible {
    color: var(--brand-blue);
}

.dl-picker__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.dl-picker__caret {
    display: inline-block;
    transition: transform var(--dur-base) var(--ease-out);
}

.dl-picker__toggle[aria-expanded="true"] .dl-picker__caret {
    transform: rotate(180deg);
}

/* ---------- 其他版本列表（原位展开） ---------- */
/* 收起时 visibility: hidden 让列表退出 Tab 顺序和读屏；延迟到高度收完再隐藏 */
.dl-picker__drawer {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition:
        grid-template-rows var(--dur-base) var(--ease-out),
        visibility 0s linear var(--dur-base);
}

.dl-picker.is-open .dl-picker__drawer {
    grid-template-rows: 1fr;
    visibility: visible;
    transition-delay: 0s;
}

/* 裁切层：0fr 时高度为 0，列表的外边距和边框都收在里面 */
.dl-picker__clip {
    min-height: 0;
    overflow: hidden;
}

.dl-picker__list {
    display: grid;
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
    border-top: var(--line-width) solid var(--news-bar-line);
}

/* hero：深色内嵌盒子（原浮层的底色、边框、圆角），但留在文档流内 */
.dl-picker--hero .dl-picker__list {
    padding: var(--space-1) var(--space-3);
    border: var(--line-width) solid var(--news-card-line-hover);
    border-radius: var(--radius-md);
    background: var(--dl-list-bg);
}

.dl-picker__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--hero-dl-col) var(--hero-dl-col) auto auto;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--hero-dl-row-h);
    border-bottom: var(--line-width) solid var(--news-bar-line);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-secondary);
}

.dl-picker--hero .dl-picker__row:last-child {
    border-bottom: 0;
}

.dl-picker__platform {
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dl-picker__row.is-soon .dl-picker__platform,
.dl-picker__soon {
    color: var(--fg-muted);
}

.dl-picker__cell {
    white-space: nowrap;
}

.dl-picker__sha {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.dl-picker__copy {
    padding: 0 var(--space-2);
    border: var(--line-width) solid var(--news-card-line);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--fg-muted);
    font: inherit;
    font-size: var(--fs-2xs);
    line-height: var(--lh-normal);
    cursor: pointer;
    transition:
        color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}

.dl-picker__copy:hover,
.dl-picker__copy:focus-visible,
.dl-picker__copy.is-copied {
    border-color: var(--news-card-line-hover);
    color: var(--fg);
}

.dl-picker__get {
    color: var(--fg);
    text-decoration: none;
}

.dl-picker__get:hover,
.dl-picker__get:focus-visible {
    color: var(--brand-blue);
}

.dl-picker__soon {
    grid-column: 2 / -1;
    justify-self: end;
}

.dl-picker a:focus-visible,
.dl-picker button:focus-visible {
    outline: var(--line-width) solid var(--brand-blue);
    outline-offset: var(--space-1);
}

@media (prefers-reduced-motion: reduce) {
    .dl-picker__btn,
    .dl-picker__link,
    .dl-picker__toggle,
    .dl-picker__caret,
    .dl-picker__copy,
    .dl-picker__drawer,
    .dl-picker.is-open .dl-picker__drawer {
        transition: none;
    }
}

/* 手机：每个平台折成两行（平台名一行，版本 / 大小 / SHA / 下载一行） */
@media (max-width: 768px) {
    .dl-picker__row {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        row-gap: var(--space-1);
        padding-block: var(--space-2);
    }

    .dl-picker__platform,
    .dl-picker__soon {
        grid-column: 1 / -1;
        justify-self: start;
    }
}