/* Luwi 官网下载页 — 组件层
 *
 * 参照 im.qq.com 的下载页骨架: 白顶栏 (左 logo, 中横排导航) + 满屏海洋背景 + 居中大标题
 * + 一颗巨大胶囊下载按钮 + 版本号小字 + "更多版本下载 ›" + 底部一排渠道 + 版权行。
 *
 * 与对照页共用 base.css (重置/排版/焦点/动效降级); 这里只补下载页自己的东西。
 * 颜色全部走 token: 海洋三层 + 光斑 + 浪花白 + 压在海面上的文字 / CTA 都是主题变量,
 * 换 data-palette 就是换一片海。 */

/* base.css 的 body 是给对照页用的 (有内边距与浅色底), 这里改回满屏 */
body {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  background-color: var(--color-surface-ocean-deep);
  background-image:
    radial-gradient(58% 42% at 50% 6%, var(--color-surface-ocean-glow) 0%, transparent 72%),
    linear-gradient(
      180deg,
      var(--color-surface-ocean-sky) 0%,
      var(--color-surface-ocean-sky) 20%,
      var(--color-surface-ocean-mid) 25%,
      var(--color-surface-ocean-deep) 56%,
      var(--color-surface-ocean-abyss) 100%
    );
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--color-text-on-ocean);
}

/* ---------- 顶栏 ---------- */

.topbar {
  position: relative;
  z-index: 1;
  background: var(--color-surface-card);
  border-block-end: 1px solid var(--color-border-default);
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 80rem;
  margin-inline: auto;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
  text-decoration: none;
}
.brand__mark {
  width: var(--size-icon-lg);
  height: var(--size-icon-lg);
  color: var(--color-action-primary);
}
.topnav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.topnav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border-radius: var(--radius-button);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition-property: color, background-color;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-out);
}
.topnav a:hover { background: var(--color-action-secondary-hover); color: var(--color-text-primary); }
.brand:hover { color: var(--color-text-primary); }
.topnav a[aria-current="page"] { color: var(--color-text-link); }
.topnav__ext { font-size: var(--text-xs); color: var(--color-text-tertiary); }

/* ---------- 海面与 hero ---------- */

.sea {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-8);
  place-items: center;
  padding-block: 24vh var(--space-16);
  padding-inline: var(--space-4);
  overflow: hidden;
}
.sea__waves {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 0;
  width: 100%;
  height: var(--space-24);
  pointer-events: none;
}
.hero {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  max-width: 44rem;
  text-align: center;
}
.hero__title {
  font-size: var(--text-5xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--color-text-on-ocean);
}
.hero__sub { color: var(--color-text-on-ocean-muted); font-size: var(--text-lg); }

.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--size-control-xl);
  padding-block: var(--space-3);
  padding-inline: var(--space-8);
  background: var(--color-hero-cta-bg);
  border: 1px solid var(--color-hero-cta-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  color: var(--color-hero-cta-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition-property: background-color, box-shadow, transform;
  transition-duration: var(--duration-base);
  transition-timing-function: var(--ease-out);
}
.cta:hover {
  background: var(--color-hero-cta-bg-hover);
  color: var(--color-hero-cta-text);
  box-shadow: var(--shadow-xl);
  transform: translateY(-1px);
}
.cta:active { transform: translateY(0); }
.cta__icon { width: var(--size-icon-lg); height: var(--size-icon-lg); }

/* 两个来源并列: 主 = 镜像胶囊, 次 = GitHub 原链的幽灵按钮。
   app 内 WakeWordDownload 就是"镜像在前、原链在后", 这里保持同一个顺序。 */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

/* 二维码弹层: 悬停(或键盘聚焦)到按钮上时, 在该按钮正下方弹出对应的二维码。
   为什么向下而不是向上: 向上正好盖住 h1 大标题与副标题 —— 弹层遮住自己的产品名很难看;
   向下只压住版本号 / 校验值那几行小字, 而且是瞬时的。
   纯 CSS, 页面依旧零 JS; 二维码是内联 SVG, 用 currentColor 取色, 不留字面量。 */
.cta-wrap { position: relative; display: inline-flex; }
.qr {
  position: absolute;
  inset-block-start: calc(100% + var(--space-3));
  inset-inline-start: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-3);          /* 这圈留白就是二维码的静默区 (>= 4 个模块宽) */
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-primary); /* 二维码的模块色 */
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition-property: opacity, visibility;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-out);
}
.qr__code { display: block; }
.qr__svg { display: block; width: var(--size-qr); height: var(--size-qr); }
.qr__cap { font-size: var(--text-xs); color: var(--color-text-secondary); }

/* 只在真有悬停能力的设备上弹: 否则触屏上第一下点按会先触发 hover, 变成"要点两次才下载" */
@media (hover: hover) {
  .cta-wrap:hover .qr,
  .cta-wrap:focus-within .qr { opacity: 1; visibility: visible; }
}

.cta--ghost {
  background: transparent;
  border-color: var(--color-surface-ocean-foam-soft);
  box-shadow: none;
  color: var(--color-text-on-ocean);
  font-weight: var(--weight-medium);
}
/* 悬停必须显式写 color: base.css 里 `a:hover`(0,1,1) 比 `.cta--ghost`(0,1,0) 特指度高,
   不写就会被改成 --color-text-link-hover —— 上一轮实测过前景=背景 1.00:1 那一次 */
.cta--ghost:hover {
  background: var(--color-surface-ocean-hover);
  color: var(--color-text-on-ocean);
  box-shadow: none;
}

/* 校验值: 数据不是样式, 所以除了字号以外都用中性色, 且允许折行 */
.hero__sha {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  max-width: 100%;
  color: var(--color-text-on-ocean-muted);
  font-size: var(--text-xs);
}
.hero__sha code {
  font-family: var(--font-mono);
  color: var(--color-text-on-ocean);
  word-break: break-all;   /* 64 位十六进制在窄屏上必须能断, 否则把布局顶宽 */
}

.hero__meta {
  color: var(--color-text-on-ocean-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.hero__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border-radius: var(--radius-button);
  color: var(--color-text-on-ocean);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.hero__more:hover { background: var(--color-surface-ocean-hover); color: var(--color-text-on-ocean); }

/* ---------- 渠道横排 ---------- */

.channels {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  max-width: 60rem;
}
.channels a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
  padding-inline: var(--space-3);
  border-radius: var(--radius-button);
  color: var(--color-text-on-ocean-muted);
  font-size: var(--text-sm);
  text-decoration: none;
  transition-property: color, background-color;
  transition-duration: var(--duration-fast);
  transition-timing-function: var(--ease-out);
}
.channels a:hover { background: var(--color-surface-ocean-hover); color: var(--color-text-on-ocean); }
.channels__icon { width: var(--size-icon-md); height: var(--size-icon-md); }

.notice {
  position: relative;
  max-width: 46ch;
  color: var(--color-text-on-ocean-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.sea__foot {
  position: relative;
  z-index: 1;
  padding-block: var(--space-6);
  padding-inline: var(--space-4);
  color: var(--color-text-on-ocean-muted);
  font-size: var(--text-sm);
}
.sea__foot__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  max-width: 80rem;
  margin-inline: auto;
}
.sea__foot a { color: var(--color-text-on-ocean); }

/* ---------- 样张索引页 ---------- */

.picker {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-8);
  max-width: 68rem;
  margin-inline: auto;
  padding-block: 24vh var(--space-16);   /* 同样压到海面以下: 白字压在天光带上对比度不够, 而 axe 在渐变背景上看不出来 */
  padding-inline: var(--space-4);
}
.picker__head { display: grid; gap: var(--space-3); }
.picker__lead { max-width: 60ch; color: var(--color-text-on-ocean-muted); }
/* 正文里的链接落在海面上, 全局的 --color-text-link (品牌 700) 在这里只有 1.34:1,
   必须换成 on-ocean; hover 也要显式写, 否则被 base.css 的 a:hover 抢回去 */
.picker__lead a { color: var(--color-text-on-ocean); text-decoration: underline; }
.picker__lead a:hover { color: var(--color-text-on-ocean); }
.picker__grid { display: grid; gap: var(--space-5); }
.pick {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
}
.pick__sea {
  display: grid;
  place-items: center;
  min-height: var(--space-24);
  border-radius: var(--radius-card);
  background-color: var(--color-surface-ocean-deep);
  background-image:
    radial-gradient(58% 46% at 50% 8%, var(--color-surface-ocean-glow) 0%, transparent 72%),
    linear-gradient(180deg, var(--color-surface-ocean-sky) 0%, var(--color-surface-ocean-sky) 26%, var(--color-surface-ocean-mid) 32%, var(--color-surface-ocean-deep) 62%, var(--color-surface-ocean-abyss) 100%);
  color: var(--color-text-on-ocean);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.pick__meta { display: grid; gap: var(--space-2); }
.pick__chosen {
  justify-self: start;
  padding-block: var(--space-1);
  padding-inline: var(--space-3);
  background: var(--color-badge-primary-bg);
  color: var(--color-badge-primary-text);
  border-radius: var(--radius-badge);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}
.pick__name { font-size: var(--text-xl); color: var(--color-text-primary); }
.pick__note { color: var(--color-text-secondary); }
.pick__go {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--size-control-md);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  background: var(--color-action-primary);
  border: 1px solid var(--color-action-primary);
  border-radius: var(--radius-button);
  color: var(--color-text-on-action);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.pick__go:hover { background: var(--color-action-primary-hover); color: var(--color-text-on-action); }

@media (min-width: 768px) {
  .hero { gap: var(--space-5); }
  .hero__title { font-size: var(--text-7xl); }
  .sea { padding-block: 26vh var(--space-24); }
  .topbar__inner { padding-inline: var(--space-8); }
  .sea__waves { height: var(--space-24); }
  .picker__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .picker { padding-block: 26vh var(--space-24); }
}