/**
 * MythosX Anvil BIOS 下载页的页面样式（令牌、按钮、页面首屏都来自 mx/mx.css，这里只写本页特有的版式）。
 *
 * 业务定位：客户按完整主板型号找 BIOS。版式只服务三件事：
 *   找得快：大号搜索框是首屏主角，筛选片一排点选，结果边输边出、按品牌分组、组标题吸顶；
 *   下得快：每行右侧就是下载按钮，一次点击；展开面板里是原始文件名、大小、SHA-256 与包内文件；
 *   下得对：同系列只差后缀时，状态行提醒、后缀用强调色标出——强调色在这一页只表达「这里不一样」。
 * 对齐：结果行是一张固定四列的网格（型号 | 芯片组 | 下载 | 折角），多文件面板里每个文件的下载按钮
 * 落在同一列；搜索框与「型号在哪里看」同 64px 高；筛选片两排的标签列同宽，片的左边线是同一条。
 * 一个视图只有一枚实心按钮：最近展开或唯一精确命中的那一行，其余下载按钮都是描边款。
 * 依赖的 ID 与类名由 anvil-bios.js 生成或读取，改名要两边一起改。
 */

.bios-main {
  --find-h: 64px;
  --row-gap: 24px;
  --dl-w: 184px;
  --chev-w: 20px;
  --chip-col: 96px;
  --group-h: 52px;
  /* 一行的高度（含底线）：content-visibility 占位按它乘行数估，估准了深链落点和滚动都不偏 */
  --row-h: 61px;
}

/* 页头 ------------------------------------------------------------------ */
/* 这一页的正事在搜索框：首屏收紧，1440×900 下搜索框、筛选片和第一组结果都在一屏里 */
.bios-main .page-head { padding: calc(var(--bar-h) + clamp(44px, 5.4vw, 96px)) 0 clamp(28px, 3vw, 44px); }
.bios-main .page-title { margin: 18px 0 18px; font-size: clamp(40px, 4.4vw, 72px); text-wrap: balance; }
/* 导语放宽到 56em：英文版那句比中文长一倍，38em 下会多折一行，把下面整块推下去 */
.bios-main .lead { max-width: 56em; }
.bios-eyebrow a { color: var(--text-2); transition: color .2s var(--ease); }
.bios-eyebrow a:hover { color: var(--text); }
/* 目录是异步加载的：正文先占满一屏，结果出来时页脚不会在视口里被推下去（CLS） */
.bios-body { min-height: 100vh; padding-bottom: clamp(80px, 8vw, 128px); }

/* 搜索 ------------------------------------------------------------------ */
.bios-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.bios-input { position: relative; min-width: 0; }
.bios-input input { display: block; width: 100%; height: var(--find-h); margin: 0; padding: 0 104px 0 56px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); color: var(--text); font: 400 clamp(17px, 1.25vw, 19px)/1.2 var(--sans); letter-spacing: .005em; -webkit-appearance: none; appearance: none; transition: border-color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease); }
.bios-input input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.bios-input input::placeholder { color: var(--text-3); opacity: 1; }
.bios-input input:hover { border-color: rgba(var(--ink-rgb), .28); }
/* 聚焦用中性的亮边和一圈淡光，不用强调色：强调色留给「后缀不同」 */
.bios-input input:focus-visible { outline: none; border-color: rgba(var(--ink-rgb), .46); background: var(--surface-2); box-shadow: 0 0 0 4px rgba(var(--ink-rgb), .06); }
.bios-input-icon { position: absolute; left: 20px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-linecap: round; pointer-events: none; transition: stroke .2s var(--ease); }
.bios-input:focus-within .bios-input-icon { stroke: var(--text-2); }
.bios-x { position: absolute; right: 12px; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; border-radius: 8px; color: var(--text-3); transition: color .2s var(--ease), background-color .2s var(--ease); }
.bios-x:hover { color: var(--text); background: rgba(var(--ink-rgb), .06); }
.bios-x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
/* 「/」快捷键提示：有值或聚焦时淡出，把位置让给清空按钮 */
.bios-kbd { position: absolute; right: 20px; top: 50%; display: grid; place-items: center; min-width: 24px; height: 24px; margin-top: -12px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 6px; font: 500 12px/1 var(--mono); color: var(--text-3); pointer-events: none; transition: opacity .2s var(--ease); }
.bios-input:focus-within .bios-kbd, .bios-input.has-value .bios-kbd { opacity: 0; }

.bios-hint-btn { display: inline-flex; align-items: center; gap: 10px; height: var(--find-h); padding: 0 22px; border: 1px solid var(--line-2); border-radius: 10px; font-size: 15px; color: var(--text-2); white-space: nowrap; transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease); }
.bios-hint-btn:hover, .bios-hint-btn[aria-expanded="true"] { color: var(--text); border-color: rgba(var(--ink-rgb), .3); background: rgba(var(--ink-rgb), .035); }
.bios-hint-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* 提示面板：只动高度和透明度，减速曲线，不回弹 */
.bios-hint { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .32s var(--ease), opacity .2s var(--ease); }
.bios-hint.is-open { grid-template-rows: 1fr; opacity: 1; }
.bios-hint-in { min-height: 0; overflow: hidden; }
.bios-hint-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--row-gap); padding-top: 28px; }
.bios-hint-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-content: start; column-gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.bios-hint-no { grid-row: span 2; font: 500 12px/24px var(--mono); color: var(--text-3); }
.bios-hint-list b { font: 500 15px/24px var(--sans); color: var(--text); }
.bios-hint-body { margin-top: 4px; font-size: 14px; line-height: 1.7; color: var(--text-2); }
.bios-hint-body kbd, .bios-hint-body code { padding: 1px 6px; border: 1px solid var(--line-2); border-radius: 5px; background: var(--surface-2); font: 500 12.5px/1.6 var(--mono); color: var(--text); }
.bios-hint-note { margin: 20px 0 4px 40px; font-size: 14px; color: var(--text); }

/* 筛选片 ---------------------------------------------------------------- */
/* 两排共用同宽的标签列，片的左边线是同一条；计数等宽且有最小宽度，数字变了片也不变宽 */
.bios-facets { display: grid; gap: 10px; margin-top: 24px; }
.bios-facet { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; }
.bios-facet-label { font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.bios-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bios-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--text-2); white-space: nowrap; transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease), opacity .2s var(--ease); }
.bios-chip:hover:not(:disabled) { color: var(--text); border-color: var(--line-2); }
.bios-chip[aria-pressed="true"] { color: var(--text); border-color: rgba(var(--ink-rgb), .38); background: rgba(var(--ink-rgb), .09); }
.bios-chip:disabled { opacity: .32; cursor: default; }
.bios-chip-n { min-width: 3ch; font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text-3); }
.bios-chip-n:empty { display: none; }
.bios-chip[aria-pressed="true"] .bios-chip-n { color: var(--text-2); }

/* 状态行 ---------------------------------------------------------------- */
/* 左边播报数量和后缀提醒，右边清空；行高固定，提醒出现或清空隐身都不推动下面的列表 */
.bios-status { display: flex; justify-content: space-between; align-items: center; gap: 12px 32px; min-height: 76px; margin-top: 20px; padding: 20px 0 16px; border-bottom: 1px solid var(--line); }
#result-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; font-size: 14px; color: var(--text-2); }
.bios-count { color: var(--text); }
/* 后缀提醒：强调色的短竖线 + 正文色文字，和行里标出的后缀是同一个颜色、同一个意思 */
.bios-warn { position: relative; padding-left: 14px; color: var(--text); }
.bios-warn::before { content: ""; position: absolute; left: 0; top: .3em; width: 2px; height: 1em; border-radius: 1px; background: var(--accent); }
/* 没有结果：数量这一段放大成空状态的标题；新增中文用正文字体，标题字子集里没有这些字 */
#result-status.is-empty .bios-count { font: 500 clamp(18px, 1.6vw, 22px)/1.5 var(--sans); }
.bios-clear { flex: none; height: 36px; padding: 0 16px; font-size: 13px; }
.bios-clear:disabled { visibility: hidden; }
.bios-notice { margin-top: 16px; font-size: 14px; color: var(--text-2); }
.bios-notice:empty { display: none; }
#retry { margin-top: 20px; }
.bios-noscript { padding: 28px 0; color: var(--text-2); }

/* 空状态 ---------------------------------------------------------------- */
.bios-empty { display: grid; gap: 14px; max-width: 44em; padding: 28px 0 8px; font-size: 15px; color: var(--text-2); }
.bios-empty-ask { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }

/* 结果分组 -------------------------------------------------------------- */
/* 屏幕外的分组跳过渲染，按行数 × 行高占位（--rows 由脚本按当前结果写） */
.bios-group { content-visibility: auto; contain-intrinsic-size: auto calc(var(--group-h) + var(--rows, 1) * var(--row-h)); }
.bios-group + .bios-group { margin-top: 32px; }
.bios-group-head { position: sticky; top: var(--bar-h); z-index: 3; display: flex; align-items: center; gap: 12px; height: var(--group-h); margin: 0; border-bottom: 1px solid var(--line-2); background: var(--bg); font: 600 15px/1 var(--sans); letter-spacing: .01em; color: var(--text); }
.bios-group-n { font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text-3); }

/* 结果行 ---------------------------------------------------------------- */
.bios-row { position: relative; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--bar-h) + var(--group-h) + 8px); }
.bios-line { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--chip-col) var(--dl-w) var(--chev-w); align-items: center; gap: var(--row-gap); min-height: calc(var(--row-h) - 1px); padding: 12px 0; }
/* 悬停与展开：整行垫一层浅底，左右各出血 16px，文字不动 */
.bios-line::before { content: ""; position: absolute; inset: 0 -16px; border-radius: 8px; background: rgba(var(--ink-rgb), .04); opacity: 0; transition: opacity .2s var(--ease); pointer-events: none; }
.bios-line:hover::before, .bios-row.is-open .bios-line::before { opacity: 1; }
/* 深链落点：一层中性亮底 1.6 秒内淡出，不闪、不弹 */
.bios-row::after { content: ""; position: absolute; inset: 0 -16px; border-radius: 8px; background: rgba(var(--ink-rgb), .1); opacity: 0; pointer-events: none; }
.bios-row.is-flash::after { animation: bios-flash 1.6s var(--ease) both; }
@keyframes bios-flash { 0%, 30% { opacity: 1; } 100% { opacity: 0; } }

/* 型号名就是展开按钮，点击区用伪元素铺满整行；下载按钮叠在它上面 */
.bios-model { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; text-align: left; font: 500 15px/1.5 var(--mono); color: var(--text); }
.bios-model::after { content: ""; position: absolute; inset: 0 -16px; z-index: 1; border-radius: 8px; }
.bios-model:focus-visible { outline: none; }
.bios-model:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
.bios-name { overflow-wrap: anywhere; }
/* 命中的词只加粗、不垫底色：B650M 这类查询下每行都命中，一整列色块会比型号本身还吵 */
.bios-name mark { background: none; color: inherit; font-weight: 700; }
/* 后缀差异：强调色 + 细下划线；同系列只有这一段不同 */
.bios-suffix { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .45); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.bios-plain { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid rgba(var(--accent-rgb), .4); border-radius: 999px; font: 500 11.5px/1 var(--sans); color: var(--accent); white-space: nowrap; }
.bios-chipset { justify-self: start; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 999px; font: 500 12px/1 var(--mono); color: var(--text-2); }

/* 下载按钮：同一列等宽；默认描边，主行实心并亮出「下载」二字 */
.bios-dl { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: var(--dl-w); height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 8px; font: 500 13px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.bios-dl:hover { border-color: rgba(var(--ink-rgb), .4); background: rgba(var(--ink-rgb), .06); }
.bios-dl-icon { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bios-dl-word { display: none; font-family: var(--sans); font-size: 14px; }
.bios-dl.is-labeled .bios-dl-word { display: inline; }
.bios-row.is-primary .bios-line .bios-dl:not(.is-multi) { border-color: transparent; background: var(--text); color: #101012; }
.bios-row.is-primary .bios-line .bios-dl:not(.is-multi):hover { background: #fff; }
.bios-row.is-primary .bios-line .bios-dl-word { display: inline; }
.bios-row.is-primary .bios-line .bios-dl:not(.is-multi) .bios-dl-size { color: #46454a; }
.bios-dl.is-multi .chev { width: 10px; height: 10px; transition: transform .25s var(--ease); }
.bios-row.is-open .bios-dl.is-multi .chev { transform: rotate(180deg); }
.bios-dl.is-off { border-style: dashed; font: 400 12px/1.3 var(--sans); color: var(--text-3); white-space: normal; text-align: center; }
.bios-chev { width: 10px; height: 10px; justify-self: center; fill: none; stroke: var(--text-3); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease), stroke .2s var(--ease); }
.bios-line:hover .bios-chev { stroke: var(--text); }
.bios-row.is-open .bios-chev { transform: rotate(180deg); stroke: var(--text); }

/* 下载确认：这一行底下一句，跟型号左边线对齐 */
.bios-done { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 0 0 14px; font-size: 13px; color: var(--text-2); }
.bios-done-icon { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bios-done-link { font-size: 13px; font-weight: 500; color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; transition: text-decoration-color .2s var(--ease); }
.bios-done-link:hover { text-decoration-color: currentColor; }

/* 展开面板 -------------------------------------------------------------- */
.bios-panel { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .32s var(--ease), opacity .2s var(--ease), visibility 0s linear .32s; }
.bios-row.is-open .bios-panel { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition: grid-template-rows .32s var(--ease), opacity .24s var(--ease) .04s, visibility 0s; }
.bios-row.is-instant .bios-panel, .bios-row.is-instant .bios-chev, .bios-row.is-instant .bios-line::before { transition: none; }
.bios-panel-in { min-height: 0; overflow: hidden; }
.bios-files { padding: 4px 0 0; }
/* 一个文件一块：左边是键值表，右边（多文件时）是它自己的下载按钮，和行里的下载按钮同一列 */
.bios-file { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--row-gap); padding: 0 0 4px; }
.bios-file.has-action { grid-template-columns: minmax(0, 1fr) var(--dl-w) var(--chev-w); align-items: start; padding: 16px 0 12px; border-top: 1px solid var(--line); }
.bios-file.has-action:first-child { border-top: 0; padding-top: 0; }
.bios-file.has-action > .bios-dl { margin-top: 6px; }
.bios-kv { display: grid; grid-template-columns: 148px minmax(0, 1fr); }
.bios-kv dt, .bios-kv dd { padding: 10px 0; border-top: 1px solid var(--line); }
.bios-kv dt:first-of-type, .bios-kv dt:first-of-type + dd { border-top: 0; }
.bios-kv dt { font: 500 12px/24px var(--mono); color: var(--text-3); }
.bios-kv dd { min-width: 0; font: 400 13.5px/24px var(--mono); color: var(--text-2); overflow-wrap: anywhere; word-break: break-all; }
.bios-kv dd.is-sha { transition: background-color .3s var(--ease); }
.bios-kv dd.is-flash, .bios-file.is-flash { animation: bios-flash-bg 1.6s var(--ease) both; }
@keyframes bios-flash-bg { 0%, 30% { background: rgba(var(--ink-rgb), .1); } 100% { background: transparent; } }
.bios-sha { display: flex; align-items: flex-start; gap: 16px; }
.bios-sha code { min-width: 0; font: inherit; color: var(--text); overflow-wrap: anywhere; word-break: break-all; }
.bios-copy, .bios-share { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--text-2); transition: color .2s var(--ease), border-color .2s var(--ease); }
.bios-copy { height: 24px; padding: 0 9px; border: 1px solid var(--line-2); border-radius: 6px; font: 500 12px/1 var(--sans); }
.bios-copy:hover, .bios-share:hover { color: var(--text); border-color: rgba(var(--ink-rgb), .36); }
.bios-copy svg, .bios-share svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.bios-copy.is-done, .bios-share.is-done { color: var(--text); }
.bios-entries { display: grid; gap: 2px; }
.bios-entries li { font-size: 12.5px; color: var(--text-3); }
.bios-support-title { margin: 8px 0 0; padding: 16px 0 4px; border-top: 1px solid var(--line-2); font: 500 12px/1.4 var(--mono); letter-spacing: .04em; color: var(--text-3); }
.bios-support-title + .bios-file.has-action { border-top: 0; padding-top: 8px; }
.bios-panel-foot { display: flex; padding: 8px 0 22px; }
.bios-share { height: 36px; font-size: 14px; font-weight: 500; }

/* 窄屏 ------------------------------------------------------------------ */
@media (max-width: 960px) {
  .bios-hint-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 720px) {
  .bios-main { --find-h: 56px; --dl-w: 176px; --chev-w: 16px; --group-h: 48px; --row-h: 107px; --row-gap: 12px; }
  /* 手机上中文导语两行、英文三行；英文由 i18n.js 在首帧之后换上，先按三行占位，切换时下面不跳（实测不占位 CLS 0.054） */
  .bios-main .lead { min-height: calc(3 * 1.85em); }
  /* 「型号在哪里看」挪到搜索框下面一整行，搜索框占满宽度，placeholder 不被截断 */
  .bios-search-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .bios-hint-btn { justify-self: start; height: 40px; padding: 0; border: 0; font-size: 14px; }
  .bios-hint-btn:hover, .bios-hint-btn[aria-expanded="true"] { background: none; }
  .bios-input input { padding-right: 56px; padding-left: 48px; font-size: 16px; }
  .bios-input-icon { left: 16px; }
  .bios-x { right: 8px; }
  .bios-kbd { display: none; }
  .bios-hint-list { padding-top: 12px; }
  .bios-hint-note { margin-left: 40px; }
  /* 筛选片一排横滑，右边缘渐隐提示还有更多；标签列不跟着滑 */
  .bios-facets { margin-top: 16px; }
  .bios-facet { grid-template-columns: 64px minmax(0, 1fr); }
  .bios-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); overscroll-behavior-x: contain; }
  .bios-chips::-webkit-scrollbar { display: none; }
  /* 手机上清空按钮浮在数量那一行的右端，后缀提醒在下面占满整行，不被按钮挤成三行；
     隐身的清空按钮也不再占宽度 */
  .bios-status { position: relative; display: block; min-height: 0; padding: 16px 0 14px; }
  #result-status .bios-count { min-height: 36px; display: flex; align-items: center; margin-right: 104px; }
  #result-status .bios-warn { flex-basis: 100%; }
  .bios-clear { position: absolute; right: 0; top: 16px; }
  .bios-clear:disabled { display: none; }
  /* 行：第一排型号 + 折角，第二排芯片组靠左、下载靠右（两者共用一格）；下载按钮右边线与折角右边线齐平。
     不能让下载按钮独占第二列，否则第一列被压窄，型号会在后缀中间折行 */
  .bios-line { grid-template-columns: minmax(0, 1fr) var(--chev-w); grid-template-areas: "model chev" "meta meta"; row-gap: 12px; padding: 16px 0; }
  .bios-model { grid-area: model; }
  .bios-chev { grid-area: chev; justify-self: end; align-self: start; margin-top: 7px; }
  .bios-chipset { grid-area: meta; justify-self: start; }
  .bios-line > .bios-dl { grid-area: meta; justify-self: end; }
  .bios-line::before, .bios-model::after, .bios-row::after { inset: 0 -10px; }
  .bios-file.has-action { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .bios-file.has-action > .bios-dl { justify-self: end; margin-top: 0; }
  .bios-kv { grid-template-columns: minmax(0, 1fr); }
  .bios-kv dt { padding-bottom: 0; }
  .bios-kv dd { padding-top: 2px; border-top: 0; }
  .bios-sha { flex-direction: column; gap: 8px; }
}