/* 设计系统层: 字体、令牌、通用组件(.btn/.card/.row/.file-list/.detail).
   页面与状态样式在 app.css. 本文件持有全站唯一的 :root, app.css 只消费变量. */

/* Inter 可变字体, 自托管(见 scripts/fetch-fonts.mjs)。
   CSP 的 font-src 回落到 default-src 'self', 外部字体加载不了。
   两个子集: latin 覆盖西欧, latin-ext 是越南语声调符号必需的。 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* 色: 品牌青绿 + 中性灰阶, 取自与官网/客户端一致的主色. */
  --bg: #f8fafc;
  --surface: #ffffff;
  /* 行 hover 底色: 比 --bg 深一档, 在白卡上才看得出来. */
  --surface-hover: #f1f5f9;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --text: #0f172a;
  --text-muted: #64748b;
  --text-faint: #94a3b8;

  --p: #0d9488;
  --p-hover: #0f766e;
  --p-soft: #f0fdfa;
  --p-ring: rgba(13, 148, 136, 0.35);

  --su: #059669;
  --su-soft: #ecfdf5;
  --wa: #d97706;
  --wa-soft: #fffbeb;
  --er: #dc2626;
  --er-soft: #fef2f2;

  --r-card: 1.5rem;
  --r-btn: 0.75rem;
  --r-input: 0.75rem;
  --r-pill: 999px;

  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  /* 主色描边 + 辉光: 用于完成态卡片与聚焦. */
  --ring-primary: 0 0 0 1px var(--p-ring), 0 10px 15px -3px var(--p-ring), 0 4px 6px -4px var(--p-ring);

  --fs-display: 1.25rem;
  --fs-title: 1.15rem;
  --fs-body: 0.95rem;
  --fs-detail: 0.875rem;
  --fs-micro: 0.8rem;

  --sp-1: 0.35rem;
  --sp-2: 0.6rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;

  --bw: 1px;
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  font-size: var(--fs-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  /* Inter 在小字号下字形偏紧, 开这两个 OpenType 特性更接近参考站的观感. */
  font-feature-settings: 'cv11', 'ss01';
}

.wrap { max-width: 46rem; margin: 0 auto; padding: var(--sp-5) 1.25rem 3rem; }
.navbar { background: var(--surface); border-bottom: var(--bw) solid var(--border); position: sticky; top: 0; z-index: 40; }
.navbar-inner {
  width: min(46rem, 100%); margin: 0 auto; padding: 0 1.25rem; min-height: 4rem;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
h1 { font-size: var(--fs-display); margin: 0; font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--fs-title); margin: 0 0 var(--sp-2); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-title); margin: 0 0 var(--sp-2); font-weight: 700; letter-spacing: -0.01em; }

.btn {
  /* 默认就是描边档: 白底 + 描边, 与参考站的次级按钮一致. */
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-bd: var(--border-strong);
  appearance: none; font: inherit; font-weight: 650; font-size: var(--fs-body);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  height: 2.75rem; padding: 0 1.25rem; cursor: pointer;
  border-radius: var(--r-btn);
  border: var(--bw) solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  user-select: none;
}
.btn:hover { background: color-mix(in srgb, var(--btn-bg) 92%, var(--text)); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
.btn:disabled { cursor: not-allowed; opacity: 0.45; }

.btn-primary { --btn-bg: var(--p); --btn-fg: #fff; --btn-bd: var(--p); }
.btn-primary:hover { background: var(--p-hover); border-color: var(--p-hover); }
.btn-outline { --btn-bg: var(--surface); --btn-bd: var(--border-strong); }
.btn-ghost { --btn-bg: transparent; --btn-bd: transparent; }
.btn-ghost:hover { background: var(--bg); }

/* 全站只有两档高度: .btn 是主操作, .btn-xs 是行内/次要操作. */
.btn-xs { height: 2.25rem; padding: 0 0.8rem; font-size: var(--fs-detail); }

.progress {
  appearance: none; width: 100%; height: 0.4rem; margin: var(--sp-1) 0;
  border-radius: var(--r-pill); overflow: hidden; background: var(--border); border: 0;
}
.progress::-webkit-progress-bar { background: var(--border); }
.progress::-webkit-progress-value { background: var(--p); }
.progress::-moz-progress-bar { background: var(--p); }

.row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-top: var(--sp-3); }
.row.spread { justify-content: space-between; }
.hidden { display: none !important; }
.file-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 卡片: 白底 + 24px 圆角 + 浅描边 + 柔和投影. */
.card {
  background: var(--surface);
  border-radius: var(--r-card);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  padding: var(--sp-4);
}

/* 左右各留一圈让行的底色有呼吸: 内边距加在 ul 上, 行再用负外边距抵消.
   这样文字位置不变, 行宽也正好等于 ul 的边框宽 —— 若只给行加内边距(或负外边距没有
   对应的容器内边距), 行会比容器宽, 撑出横向滚动条, 且左侧内边距会被裁掉. */
.file-list { --row-inset: 0.6rem; list-style: none; margin: var(--sp-2) 0 0; padding: 0 var(--row-inset); }
.file-list li {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center;
  padding: 0.5rem var(--row-inset); margin: 0 calc(-1 * var(--row-inset));
  font-size: var(--fs-detail);
  transition: background .12s ease;
}
/* 分割线用伪元素而不是 border-top: border 会跟着圆角在两端变圆, 而这里要的是通长直线.
   行本身也是方的 —— hover 底色与分割线同样通长, 两端不缩进也不倒角, 这才是列表行的读法.
   绝对定位子元素的包含块是行的边框盒, 所以 left/right 给 0 就是通长, 不需要负偏移. */
.file-list li::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: var(--bw); background: var(--border);
}
.file-list li:first-child::before { content: none; }
/* 状态列是可选的第三格, 由 JS 在真有字时才插进 DOM.
   千万别拿空元素占位: 空网格项会被挤到隐式的第二行, 行间距(0.6rem)整段落在文字下方. */
.file-list li.has-state { grid-template-columns: minmax(0, 1fr) auto auto; }
/* 传输中那一行: 底色当成进度条. <progress> 放在内容后面, 用属性设值而不是 style
   (CSP 禁止内联样式, 冒烟测试也断言页面里没有 [style]). */
.file-list .row-progress {
  /* 绝对定位脱离网格, 才能铺满整行而不占一列(包含块即行的边框盒).
     <progress> 是替换元素: left+right 配 width:auto 不会拉伸, 宽度必须显式给. */
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  appearance: none; border: 0; border-radius: 0; background: transparent; overflow: hidden;
}
.file-list .row-progress::-webkit-progress-bar { background: transparent; }
.file-list .row-progress::-webkit-progress-value { background: var(--surface-hover); }
.file-list .row-progress::-moz-progress-bar { background: var(--surface-hover); }
.file-list li > span { position: relative; z-index: 1; }
/* 行很长(名字 ... 大小 ... 状态), hover 底色主要帮眼睛横向跟行, 不是暗示可点.
   没有加 @media (hover:hover) 防护: 行本身不可点, 触屏上粘住只是视觉残留;
   而那道防护会让 headless 检查(无指针设备)里这个效果完全不可见, 也就无法验证. */
.file-list li:hover { background: var(--surface-hover); }
.file-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list .size { color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 每行自己的发送状态: 待发送 / 传输中 / ✓. 进度就落在文件本行, 不另开进度条. */
.file-list .state { color: var(--text-faint); font-size: var(--fs-micro); white-space: nowrap; }
.file-list li.is-active .state { color: var(--p-hover); font-weight: 650; }
.file-list li.is-done .state { color: var(--su); font-weight: 700; }
.file-list li.is-done .name { color: var(--text-muted); }

.detail { color: var(--text-muted); font-size: var(--fs-detail); font-variant-numeric: tabular-nums; }
.hint { color: var(--text-muted); font-size: var(--fs-detail); }

footer { margin-top: var(--sp-5); }
footer p { color: var(--text-faint); font-size: var(--fs-micro); }

@media (max-width: 736px) {
  .wrap { padding: var(--sp-4) 1rem var(--sp-5); }
}
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .btn { transition: none; }
}