/* ============================================================
   AI 应用集 · 页面样式（白色系）
   依赖 css/styles.css 的结构，但在此覆盖为浅色 token
   设计母题：刻度索引表 —— 1px 共享细线 + 左侧 2px 强调竖线
   ============================================================ */

/* ── 浅色 token 覆盖（apps.css 后加载，覆盖 styles.css 的深色值） ── */
:root {
  color-scheme: light;

  /* 墨色层级 → 纸面层级：900 最亮，950 用于页脚（略压深） */
  --c-ink-950: #EFEFEA;
  --c-ink-900: #FCFCFA;
  --c-ink-850: #F4F4F0;
  --c-ink-800: #EBEBE4;
  --c-ink-700: #DEDCD4;

  /* 强调色：浅底上需用加深的橙，保证文字与焦点环对比度 */
  --c-ember:      #C2410C;  /* 5.07:1 于 #FCFCFA —— AA 正文 / ≥3:1 焦点环 */
  --c-ember-dim:  #9A3412;
  --c-ember-ink:  #FFFFFF;
  --c-glacier:    #0F766E;

  --c-text-1: #14171A;  /* 17.9:1  AAA */
  --c-text-2: #4A5158;  /*  7.9:1  AAA */
  --c-text-3: #636C79;  /*  5.2:1  AA —— 备案号与元信息专用 */

  --c-line:        rgba(20, 23, 26, 0.11);
  --c-line-strong: rgba(20, 23, 26, 0.20);

  --shadow-raise: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-float: 0 1px 0 rgba(255, 255, 255, 0.9) inset,
                  0 18px 40px -28px rgba(20, 23, 26, 0.35);
}

/* 扫描线：深底用白线，浅底改用极淡的暗线 */
.scanlines {
  opacity: 0.5;
  background: repeating-linear-gradient(0deg,
    rgba(20, 23, 26, 0.024) 0 1px, transparent 1px 3px);
}
/* 噪点在浅底上保留一层纸感 */
.grain { opacity: 0.04; mix-blend-mode: multiply; }

/* ── 页脚：只保留备案行 ─────────────────────────────────── */
.site-footer .footer-bottom { padding-block: 28px; border-top: 1px solid var(--c-line); }

/* ── 页头 ───────────────────────────────────────────────── */
.apps-hero {
  position: relative;
  overflow: hidden;
  background: var(--c-ink-900);
  border-bottom: 1px solid var(--c-line);
  padding-block: calc(var(--nav-h) + clamp(48px, 3rem + 5vw, 112px)) clamp(48px, 2rem + 4vw, 88px);
}

/* A1 透视网格地平线（程序化，纯 CSS） */
.apps-hero-grid {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  perspective: 520px;
  pointer-events: none;
  opacity: 0.6;
}
.apps-hero-grid::before {
  content: "";
  position: absolute;
  inset: -40% -60% -60% -60%;
  transform: rotateX(72deg) scale(2.4);
  transform-origin: 50% 100%;
  background-image:
    repeating-linear-gradient(90deg, var(--c-line) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg, var(--c-line) 0 1px, transparent 1px 80px);
  mask-image: radial-gradient(120% 80% at 50% 100%, #000 20%, transparent 72%);
}

/* 单点亮斑（全屏辉光 ≤ 2 处的其中一处） */
.apps-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(38% 42% at 78% 12%, var(--c-ember-16), transparent 70%);
  opacity: 0.14;
}

.apps-hero-inner { position: relative; z-index: 1; }

.apps-hero-lat {
  color: var(--c-text-3);
  margin-bottom: var(--s-2);
}

.apps-hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-h);
  color: var(--c-text-1);
  margin-bottom: var(--s-3);
}

.apps-hero-desc {
  max-width: var(--w-prose-cjk);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-cjk);
  color: var(--c-text-2);
  letter-spacing: var(--ls-body);
}

/* 指标组：共享 1px 顶线，左端 32px 实色强调 */
.apps-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--s-6);
  border-top: 1px solid var(--c-line);
  background-image: linear-gradient(90deg, var(--c-ember) 0 32px, transparent 32px 100%);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 -1px;
}
.apps-metric {
  padding: var(--s-3) var(--s-3) var(--s-2) var(--s-3);
  border-left: 1px solid var(--c-line);
}
.apps-metric:first-child { border-left: 0; padding-left: 0; }
.apps-metric dt {
  color: var(--c-text-3);
  margin-bottom: 6px;
}
.apps-metric-num {
  font-family: var(--font-mono);
  font-weight: var(--fw-mono);
  font-size: clamp(1.5rem, 0.9rem + 2vw, 2.25rem);
  font-variant-numeric: tabular-nums;
  color: var(--c-text-1);
  line-height: 1.1;
}
.apps-unit {
  font-size: 0.5em;
  color: var(--c-text-3);
  vertical-align: 0.35em;
  margin-left: 2px;
}

.apps-note {
  margin-top: var(--s-5);
  color: var(--c-text-3);
  line-height: 1.7;
}

/* 导航右侧的轻量元信息 */
.nav-meta {
  flex: none;
  color: var(--c-text-3);
  white-space: nowrap;
}

/* ── 应用集区块头 ───────────────────────────────────────── */
.apps-section {
  position: relative;
  background: var(--c-ink-850);
}

.apps-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-line-strong);
}
.apps-head-lat { color: var(--c-text-3); margin-bottom: 8px; }
.apps-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-h);
  color: var(--c-text-1);
  line-height: var(--lh-h);
}
.apps-count {
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.apps-count span { color: var(--c-text-1); }

/* ── 筛选与搜索 ─────────────────────────────────────────── */
.apps-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding-block: var(--s-3);
}

.apps-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-xs);
  background: var(--c-ink-900);
  color: var(--c-text-2);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  cursor: pointer;
  transition: color var(--t-fast) var(--e-out),
              border-color var(--t-fast) var(--e-out),
              background-color var(--t-fast) var(--e-out);
}
.chip:hover { color: var(--c-text-1); border-color: var(--c-ember-40); background: var(--c-ember-08); }
.chip[aria-pressed="true"] {
  color: var(--c-ember);
  border-color: var(--c-ember-40);
  background: var(--c-ember-08);
}

.apps-search { flex: 0 1 260px; min-width: 200px; }
.apps-search-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--c-ink-900);
  border: 0;
  border-bottom: 1px solid var(--c-line-strong);
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  color: var(--c-text-1);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  transition: border-color var(--t-base) var(--e-out);
}
.apps-search-input::placeholder { color: var(--c-text-3); }
.apps-search-input:hover { border-bottom-color: rgba(20, 23, 26, 0.34); }
.apps-search-input:focus-visible {
  outline: 2px solid var(--c-ember);
  outline-offset: 3px;
}

/* ── 刻度索引表 ─────────────────────────────────────────── */
.apps-table {
  margin-top: var(--s-2);
  --apps-cols: 3.5ch minmax(140px, 1fr) minmax(0, 1.7fr) 5.5em minmax(150px, 0.9fr) 6.5em;
}

.apps-thead {
  display: grid;
  grid-template-columns: var(--apps-cols);
  gap: var(--grid-gap);
  padding: 0 44px 10px 0;
  color: var(--c-text-3);
  border-bottom: 1px solid var(--c-line);
}

.apps-thead span { white-space: nowrap; }

.app-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--apps-cols);
  grid-template-areas: "idx name desc cat site price";
  align-items: center;
  gap: var(--grid-gap);
  padding: 14px 44px 14px 0;
  border-bottom: 1px solid var(--c-line);
  text-decoration: none;
  transition: background-color var(--t-base) var(--e-out);
}

/* 左侧 2px 强调竖线（hover / focus 时升起） */
.app-row::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--c-ember);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-base) var(--e-out);
}

.app-row:hover, .app-row:focus-visible { background: var(--c-ink-900); }
.app-row:hover::before, .app-row:focus-visible::before { transform: scaleY(1); }
.app-row:focus-visible { outline: 2px solid var(--c-ember); outline-offset: -2px; }
.app-row:active { background: var(--c-ink-800); }

.app-idx {
  grid-area: idx;
  color: var(--c-text-3);
  font-variant-numeric: tabular-nums;
  align-self: start;
  padding-top: 2px;
}

.app-name {
  grid-area: name;
  display: block;
  min-width: 0;
}
.app-name b {
  display: block;
  font-weight: 650;
  font-size: var(--fs-body);
  color: var(--c-text-1);
  line-height: 1.35;
}
.app-vendor {
  display: block;
  margin-top: 3px;
  color: var(--c-text-3);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono);
}

.app-desc {
  grid-area: desc;
  min-width: 0;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-text-2);
}

.app-cat { grid-area: cat; }
.app-cat .tag { white-space: nowrap; background: var(--c-ink-900); }

.app-site {
  grid-area: site;
  min-width: 0;
  color: var(--c-text-3);
  font-size: var(--fs-caption);
  overflow-wrap: anywhere;
  transition: color var(--t-fast) var(--e-out);
}
.app-row:hover .app-site { color: var(--c-text-2); }

.app-price {
  grid-area: price;
  color: var(--c-text-3);
  font-size: var(--fs-caption);
  text-align: right;
  white-space: nowrap;
}

.app-go {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translate(0, -50%);
  color: var(--c-ember);
  opacity: 0;
  transition: opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out);
}
.app-row:hover .app-go, .app-row:focus-visible .app-go { opacity: 1; }

.app-row[hidden], .apps-thead[hidden] { display: none; }

.apps-empty {
  margin-top: var(--s-5);
  padding: var(--s-5) 0;
  color: var(--c-text-3);
  text-align: left;
  border-top: 1px solid var(--c-line);
}
.apps-empty[hidden] { display: none; }

/* ── 响应式：只降级，不隐藏内容 ─────────────────────────── */

@media (max-width: 1023px) {
  .apps-table { --apps-cols: 3.5ch minmax(120px, 1fr) 5.5em minmax(140px, 0.8fr); }
  .app-row {
    grid-template-areas:
      "idx name cat price"
      "idx desc desc site";
    row-gap: 6px;
    padding-right: 44px;
  }
  .apps-thead { display: none; }
  .app-site { text-align: left; }
  .app-price { text-align: left; }
  .apps-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apps-metric:nth-child(odd) { border-left: 0; padding-left: 0; }
  .apps-metric:nth-child(n+3) { border-top: 1px solid var(--c-line); }
  .nav-meta { display: none; }
}

@media (max-width: 767px) {
  .apps-table { --apps-cols: 3ch minmax(0, 1fr) auto; }
  .app-row {
    grid-template-areas:
      "idx name cat"
      "idx desc desc"
      "idx site price";
    padding-block: 16px;
  }
  .apps-hero { padding-block: calc(var(--nav-h) + 40px) 48px; }
  .apps-head { grid-template-columns: 1fr; align-items: start; }
  .apps-count { justify-self: start; }
  .apps-search { flex: 1 1 100%; min-width: 0; }
  .app-price { text-align: right; }
  .app-desc { font-size: var(--fs-caption); }
}

/* 动效降级 */
@media (prefers-reduced-motion: reduce) {
  .app-row, .app-row::before, .app-go, .app-site, .chip, .apps-search-input {
    transition-duration: 0.01ms;
  }
  .app-go { transform: translate(0, -50%); }
  .app-row:hover .app-go, .app-row:focus-visible .app-go { opacity: 1; }
}