/* ============================================================================
   launcher/app.css · 启动器专属样式
   ----------------------------------------------------------------------------
   边界：这个文件**只服务启动器**。别的 app 不许引它。

   关于命名：共享层定了"选择器带 app 前缀"的规则，目的是**防碰撞**。
   这里用一组启动器独有的名字（.appcard / .dom-card / .hstat …）达到同样效果 ——
   规则的目的达到了，就没必要机械地加前缀把名字拉长。
   ========================================================================= */

/* ── 概览 ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex; flex-wrap: wrap; gap: var(--s-7);
  align-items: flex-end; justify-content: space-between;
  padding: var(--s-8) var(--s-7);
  margin-bottom: var(--s-7);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(20,52,32,.62), rgba(8,22,14,.78));
  border: 1px solid var(--line2);
  border-radius: var(--r-xl);
}
[data-theme="light"] .hero {
  background: linear-gradient(135deg, rgba(255,255,253,.94), rgba(240,247,236,.92));
}
/* 背景纹理：一层极淡的同心圆，给"平台感"，不抢内容 */
.hero::after {
  content: ""; position: absolute; right: -120px; top: -120px;
  width: 380px; height: 380px; pointer-events: none;
  border: 1px solid var(--accentSoft); border-radius: 48% 52% 63% 37%;
  box-shadow: 0 0 0 40px var(--accentSoft), 0 0 0 90px rgba(158,229,107,.03);
  transform: rotate(18deg);
}
.hero-copy { position: relative; z-index: 1; max-width: 620px; }
.hero .eyebrow {
  color: var(--accent); font-size: var(--t-xs); font-weight: 750;
  letter-spacing: .16em; margin-bottom: var(--s-3);
}
.hero h1 {
  font-size: clamp(24px, 3.4vw, var(--t-2xl));
  font-weight: 760; letter-spacing: -.045em; line-height: 1.24;
}
.hero h1 em { color: var(--accent); font-style: normal; }
.hero p {
  margin-top: var(--s-4); max-width: 56ch;
  color: var(--soft); font-size: var(--t-md); line-height: 1.78;
}
/* 正文里的应用数量（第 24 轮从标题挪进来）：
   它是个会变的数，标题里放一个会变的量意味着每次加应用都要动标题文案。
   放在正文里用强调色标出来即可 —— 数字要醒目，但不必当口号。 */
.hero p b {
  color: var(--accent); font-weight: 760;
  font-variant-numeric: tabular-nums;
}
.hero-stats {
  position: relative; z-index: 1;
  display: flex; gap: var(--s-6); flex-wrap: wrap;
}
.hstat { text-align: right; }
.hstat b {
  display: block; color: var(--ink);
  font-size: var(--t-2xl); font-weight: 780;
  letter-spacing: -.05em; font-variant-numeric: tabular-nums;
}
.hstat span { color: var(--muted); font-size: var(--t-sm); }

/* ── 区块标题 ──────────────────────────────────────────────── */
.sec { margin-bottom: var(--s-8); }
.sec-hd {
  display: flex; align-items: baseline; gap: var(--s-4);
  margin-bottom: var(--s-5); flex-wrap: wrap;
}
.sec-hd h2 { font-size: var(--t-xl); font-weight: 740; letter-spacing: -.035em; }
.sec-sub { color: var(--muted); font-size: var(--t-base); }
.sec-sub b { color: var(--accent); }

/* ── 应用卡片网格 ──────────────────────────────────────────── */
.app-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}
.appcard {
  --card-accent: var(--accent);
  --card-accent2: var(--accent2);
  position: relative;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
/* 顶部一道极细的强调线，hover 时才亮 */
.appcard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--card-accent), var(--card-accent2));
  opacity: .42; transition: opacity var(--dur) var(--ease);
}
.appcard:hover {
  transform: translateY(-3px);
  border-color: var(--card-accent);
  box-shadow: 0 14px 40px rgba(0,0,0,.26);
}
.appcard:hover::before { opacity: 1; }

.ac-top { display: flex; align-items: center; justify-content: space-between; }
.ac-icon {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  color: var(--card-accent);
  background: color-mix(in srgb, var(--card-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-accent) 28%, transparent);
  border-radius: var(--r-md);
  transition: transform var(--dur) var(--ease);
}
.ac-icon svg { width: 19px; height: 19px; }
.appcard:hover .ac-icon { transform: scale(1.06) rotate(-3deg); }
.ac-tag { color: var(--card-accent); background: transparent; border-color: var(--line2); }

.appcard h3 { font-size: var(--t-lg); font-weight: 720; letter-spacing: -.03em; }
.ac-desc { color: var(--soft); font-size: var(--t-base); line-height: 1.68; }
.ac-paradigm {
  color: var(--faint); font-size: var(--t-sm); font-family: var(--f-mono);
  padding-top: var(--s-1);
  border-top: 1px dashed var(--line);
}
.ac-flow {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: auto; padding-top: var(--s-2);
}
.ac-count { color: var(--muted); font-size: var(--t-sm); white-space: nowrap; }
.ac-count b { color: var(--card-accent); font-weight: 740; }
.ac-bar {
  display: flex; gap: 2px; flex: 1 1 auto; height: 4px;
  border-radius: var(--r-full); overflow: hidden;
}
.ac-bar .seg { border-radius: var(--r-full); min-width: 3px; }
.mat-bg-T0 { background: #9ee56b; }
.mat-bg-T1 { background: #63b8d6; }
.mat-bg-T2 { background: #e0a75e; }
.mat-bg-T3 { background: #8a8f96; }

/* ── 成熟度图例 ────────────────────────────────────────────── */
.legend {
  display: flex; flex-wrap: wrap; gap: var(--s-5);
  margin-bottom: var(--s-5);
}
.lg { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--t-base); }
.lg b { font-weight: 680; }
.lg em { color: var(--faint); font-style: normal; font-size: var(--t-sm); }

/* ── 能力地图（第 23 轮改版）─────────────────────────────────────────
   原来是六个领域各铺一堆小胶囊 —— 117 个铺满一整面墙。
   信息是齐的，但**看不出结构**：哪块做得多、哪块还没动，得自己数。

   现在分两层：
     第一层 6 张领域卡（这一屏）—— 模块数 / 可打开比例环 / 成熟度分布
     第二层 展开才显示该领域的全部模块（`<details>`，无 JS 状态、键盘可用）

   为什么用 <details> 而不是自己做折叠：原生元素自带
   键盘可操作、屏幕阅读器可读、Ctrl+F 能找到折叠内容 ——
   自己用 div + class 做，这三样都要额外补，还容易漏。 */
.dom-grid {
  display: grid; gap: var(--s-4);
  /* ★ min(340px, 100%) 而不是写死 340px：
     手机上可用宽度只有 ~340px 时，写死 340 会被内边距挤出一行横向滚动条。
     这是网格布局最常见的溢出原因，而它只在窄屏才出现，PC 上测不出来。 */
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  align-items: start;
}
.dom-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.dom-card[open] { border-color: var(--line-strong); }

.dc-sum {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 13px var(--s-4);
  cursor: pointer; list-style: none;
  background: var(--surface-2);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease);
}
.dc-sum::-webkit-details-marker { display: none; }
.dc-sum:hover { background: var(--hover); }
.dom-card[open] .dc-sum { border-bottom-color: var(--line); }

/* 领域字徽：用该领域的主题色，和上面的应用卡、下面的模块点颜色连成一套 */
.dc-badge {
  width: 34px; height: 34px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--dc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--dc) 34%, transparent);
  color: var(--dc); font-weight: 800; font-size: var(--t-lg);
}
.dc-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.dc-titles b { color: var(--ink); font-size: var(--t-base); font-weight: 700; }
.dc-titles em {
  color: var(--faint); font-style: normal; font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}

/* 可打开比例的环：一个 conic-gradient 就够，不必引图表库。
   数字比进度条更省地方，而这一行本来就窄。 */
.dc-ring {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--dc) calc(var(--p) * 1%), var(--line) 0);
  position: relative;
}
.dc-ring::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--surface-2);
}
.dc-ring b {
  position: relative; z-index: 1;
  font-size: 11px; font-weight: 750; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dc-ring small { font-size: 8px; font-weight: 600; color: var(--faint); }

.dc-caret {
  width: 7px; height: 7px; flex: none;
  border-right: 1.6px solid var(--faint); border-bottom: 1.6px solid var(--faint);
  transform: rotate(45deg); margin-right: 3px;
  transition: transform var(--dur) var(--ease);
}
.dom-card[open] .dc-caret { transform: rotate(-135deg); }

.dc-body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }

/* 成熟度分布条 + 图例 + 去档案查 */
.dc-stats { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.dc-segbar {
  display: flex; height: 5px; flex: 1 1 110px; min-width: 90px;
  border-radius: var(--r-full); overflow: hidden; background: var(--line);
}
.dc-segbar .seg { display: block; height: 100%; }
.dc-legend { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.dc-legend i {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--faint); font-style: normal; font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.dc-legend b { width: 6px; height: 6px; border-radius: 2px; display: inline-block; }
.dc-all { margin-left: auto; color: var(--muted); font-size: var(--t-xs); white-space: nowrap; }
.dc-all:hover { color: var(--accent); }

.md-body { display: flex; flex-wrap: wrap; gap: 5px; }
.md-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--s-3) 5px var(--s-2);
  color: var(--soft); background: var(--hover);
  border: 1px solid var(--line); border-radius: var(--r-full);
  font-size: var(--t-sm); cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.md-item:hover { color: var(--ink); border-color: var(--line-strong); background: var(--accentSoft); }
.md-item .mat-dot { width: 6px; height: 6px; }

/* ── 「可打开」标记（第 22 轮）─────────────────────────────────────────
   为什么需要一个点：109 个能点、8 个不能点，长相要是一样，
   用户只能一个个试，"点亮了多少"这件事就白统计了。
   用**实心描边 + 一个小圆点**表示可点，不改字号、不加文字 ——
   加了字整面墙会变得很吵，而这里只需要"一眼扫出哪些是活的"。 */
.md-item.md-open { border-color: var(--line2); background: var(--surface); }
.md-item.md-open:hover { background: var(--accentSoft); }
.md-item .md-dot {
  width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--accent); opacity: .75;
}

/* 展开/收起全部：小节标题右侧的两个轻量按钮 */
.sec-tools { display: flex; gap: 6px; margin-left: auto; }
.mini-btn {
  padding: 4px 11px; cursor: pointer;
  border: 1px solid var(--line2); border-radius: var(--r-full);
  background: transparent; color: var(--muted);
  font: inherit; font-size: var(--t-xs); white-space: nowrap;
}
.mini-btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--hover); }

/* ── 页脚 ──────────────────────────────────────────────────── */
.foot {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: center; justify-content: space-between;
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  color: var(--faint); font-size: var(--t-sm);
}
.foot-note { color: var(--faint); opacity: .85; }
.foot a { color: var(--muted); transition: color var(--dur) var(--ease); }
.foot a:hover { color: var(--accent); }

@media (max-width: 720px) {
  .hero { padding: var(--s-6) var(--s-5); }
  .hero-stats { width: 100%; justify-content: space-between; }
  .hstat { text-align: left; }
  .hstat b { font-size: var(--t-xl); }

  /* 领域卡摘要那一行在窄屏塞不下四样东西（字徽 + 两行标题 + 环 + 箭头），
     先让"可打开 X/Y"换行，再把环缩到 34px —— 而不是让它溢出或者压扁标题。 */
  .dc-sum { padding: 11px var(--s-3); gap: var(--s-2); }
  .dc-badge { width: 30px; height: 30px; border-radius: var(--r-sm); font-size: var(--t-base); }
  .dc-ring { width: 34px; height: 34px; }
  .dc-ring b { font-size: 10px; }
  .dc-body { padding: var(--s-3); }
  .dc-all { margin-left: 0; }
  .sec-tools { margin-left: 0; }
}

/* ── 手机端：117 个模块小卡是最大的点击目标问题 ──────────────────────
   体检结果：这些 30px 高的胶囊有 100 多个，手指点下去经常点错隔壁。
   触屏上把它们撑到 40px，并允许长名字换行（不再挤压）。
   用 pointer:coarse 判据：窄窗口的桌面浏览器用鼠标点，不该被撑大。 */
@media (pointer: coarse) {
  .md-item { min-height: 40px; padding: 8px var(--s-4) 8px var(--s-3); }
  .md-body { gap: 6px; }
  .appcard { padding: var(--s-5) var(--s-4); }
  /* 页脚那条「旧版工作台 →」原本只有 18px 高，手指点不准 */
  .foot a { display: inline-flex; align-items: center; min-height: 40px; }
}