/* ============================================================================
 * modcheck 官网 · .appwin —— GUI 演示窗口（SPEC §4「演示组件」）
 * ----------------------------------------------------------------------------
 * 依赖：tokens.css + base.css
 * 用途：首页首屏 + /check.html 的静态/交互 GUI 预览。
 *       两个页面共用本文件 —— 演示数据与外观都只有一份，不存在"局部脱离主题"。
 *
 * 归属说明（设计经理 2026-xx 裁决 · 方案 C）：
 *   .appwin\* 是「演示组件」这一独立关注点，独立成文件放在 assets/css/ 根下，
 *   既不属于页面 CSS（§11），也不塞进 components.css。
 *
 * 硬性约束：
 *   - 只用 var(--...)，本文件不出现任何颜色字面量
 *   - 不用 emoji；状态色只出现在 .dot 与 .appwin__verdict 的竖色条上
 *   - <900px 时表格横向滚动的是 .appwin__tablewrap，页面本身绝不横向滚动
 *
 * 目录
 *   1. 窗口外壳 .appwin / 标题栏 .appwin__bar
 *   2. 工具区 .appwin__toolbar / .appwin__field / .appwin__label
 *   3. 结论横幅 .appwin__verdict
 *   4. 分页签 .appwin__tabs / .tab / .tab__count
 *   5. 结果表 .appwin__table / .trow / .tcell--*
 *   6. 详情与进度 .appwin__detail / .appwin__progress
 *   7. 底部区 .appwin__foot
 * ==========================================================================*/

/* ==========================================================================
 * 1. 窗口外壳
 * ========================================================================*/

.appwin {
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  overflow: hidden;
  background-color: var(--c-surface);
  border: var(--bd-1) solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.appwin__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--sp-10);
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--c-surface-2);
  border-bottom: var(--bd-1) solid var(--c-line);
}

.appwin__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-5);
  height: var(--sp-5);
  flex: none;
  border: var(--bd-1) solid var(--c-line);
  border-radius: var(--r-xs);
  background-color: var(--c-surface);
  color: var(--c-accent-hi);
}

.appwin__mark .icon { font-size: 0.75rem; }

.appwin__title {
  color: var(--c-text);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-none);
  white-space: nowrap;
}

.appwin__status {
  margin-inline-start: auto;
  color: var(--c-text-3);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
 * 2. 工具区（清单 / 目标版本 / 加载器 + 主按钮）
 * ========================================================================*/

.appwin__toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4);
  border-bottom: var(--bd-1) solid var(--c-line-soft);
}

.appwin__fieldgroup {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.appwin__label {
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-none);
  line-height: 1.4;
}

.appwin__field {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  min-height: var(--sp-10);
  padding: var(--sp-2) var(--sp-3);
  border: var(--bd-1) solid var(--c-line);
  border-radius: var(--r-sm);
  background-color: var(--c-surface-2);
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.4;
}

/* 下拉箭头：CSS 画的三角形，尺寸用 em 以便随字号缩放（不用 emoji，不用位图） */
.appwin__field::after {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  margin-inline-start: auto;
  border-left: 0.32em solid transparent;
  border-right: 0.32em solid transparent;
  border-top: 0.36em solid var(--c-text-3);
}

.appwin__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.appwin__toolbar > .btn { align-self: end; }

@media (min-width: 640px) {
  .appwin__toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .appwin__toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
  }
}

/* ==========================================================================
 * 3. 结论横幅
 * ========================================================================*/

.appwin__verdict {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-left: var(--bd-3) solid var(--c-text-3);
  border-radius: var(--r-sm);
  background-color: var(--c-surface-2);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.appwin__verdict .dot { margin-top: 0.45em; }

.appwin__verdict-text {
  min-width: 0;
  margin: 0;
}

.appwin__verdict-text strong {
  color: var(--c-text);
  font-weight: var(--fw-semi);
}

.appwin__verdict.is-blocked {
  border-left-color: var(--s-blocked);
  background-color: color-mix(in srgb, var(--s-blocked) 10%, transparent);
}

.appwin__verdict.is-clear {
  border-left-color: var(--s-ready);
  background-color: color-mix(in srgb, var(--s-ready) 10%, transparent);
}

.appwin__verdict.is-unknown {
  border-left-color: var(--s-unknown);
  background-color: color-mix(in srgb, var(--s-unknown) 10%, transparent);
}

/* ==========================================================================
 * 4. 分页签
 * ========================================================================*/

.appwin__tabs {
  display: flex;
  align-items: stretch;
  gap: var(--sp-1);
  padding-inline: var(--sp-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  background-color: var(--c-surface);
  border-bottom: var(--bd-1) solid var(--c-line);
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--sp-10);
  padding: var(--sp-2) var(--sp-3);
  border: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background-color: transparent;
  color: var(--c-text-2);
  font-family: var(--f-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-none);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--t-fast), background-color var(--t-fast);
}

.tab:hover {
  color: var(--c-text);
  background-color: var(--c-surface-2);
  text-decoration: none;
}

.tab.is-active {
  background-color: var(--c-surface-2);
  color: var(--c-text);
  font-weight: var(--fw-medium);
}

.tab.is-active::after {
  content: "";
  position: absolute;
  left: var(--sp-2);
  right: var(--sp-2);
  bottom: 0;
  height: var(--bd-2);
  border-radius: var(--r-full) var(--r-full) 0 0;
  background-color: var(--c-accent);
}

.tab__count {
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: inherit;
  opacity: 0.72;
}

/* ==========================================================================
 * 5. 结果表
 * ========================================================================*/

.appwin__tablewrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-bottom: var(--bd-1) solid var(--c-line-soft);
}

.appwin__table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

.appwin__table th {
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--c-surface);
  border-bottom: var(--bd-1) solid var(--c-line);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

.appwin__table td {
  padding: var(--sp-2-5) var(--sp-4);
  border-bottom: var(--bd-1) solid var(--c-line-soft);
  color: var(--c-text-2);
  text-align: left;
  vertical-align: middle;
}

.appwin__table tbody tr:last-child td { border-bottom: 0; }

/* 行悬停：只换底色，不加斑马纹 */
.trow { transition: background-color var(--t-fast); }

.trow:hover { background-color: var(--c-surface-2); }

.trow.is-selected { background-color: var(--c-accent-dim); }

.trow.is-selected > td:first-child {
  box-shadow: inset var(--bd-2) 0 0 0 var(--c-accent);
}

.tcell--name {
  color: var(--c-text);
  font-weight: var(--fw-medium);
}

.tcell--status,
.tcell--ver,
.tcell--date {
  width: 1%;
  white-space: nowrap;
}

.tcell--status .state__label { font-size: var(--fs-xs); }

.tcell__arrow {
  margin-inline: var(--sp-2);
  color: var(--c-text-4);
  font-family: var(--f-mono);
}

/* 首页的只读预览：分页签不可点，去掉 hover 的"可点"暗示 */
.appwin--preview .tab:hover {
  background-color: transparent;
  color: var(--c-text-2);
}

.appwin--preview .tab.is-active:hover {
  background-color: var(--c-surface-2);
  color: var(--c-text);
}

.tcell--date {
  color: var(--c-text-3);
  font-family: var(--f-mono);
  font-size: var(--fs-xs);
  text-align: right;
}

/* ==========================================================================
 * 6. 详情面板 / 进度条
 * ========================================================================*/

.appwin__detail {
  padding: var(--sp-4);
  background-color: var(--c-bg-soft);
  border-bottom: var(--bd-1) solid var(--c-line-soft);
  color: var(--c-text-2);
  font-size: var(--fs-sm);
}

.appwin__detail-title {
  margin: 0 0 var(--sp-2);
  color: var(--c-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-none);
}

.appwin__detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

/* 语义定死（§10.7 补充）：
   .appwin__progress        = **填充条本身**，被动画改 width 的就是它
   .appwin__progress-track  = 轨道容器（可选；页面也可以用自己的容器类） */
.appwin__progress-track {
  position: relative;
  height: var(--sp-1);
  overflow: hidden;
  border-radius: var(--r-full);
  background-color: var(--c-line);
}

.appwin__progress {
  display: block;
  height: 100%;
  min-height: var(--sp-1);
  width: 0;
  border-radius: var(--r-full);
  background-color: var(--c-accent);
  transition: width var(--t-base);
}

/* ==========================================================================
 * 7. 底部区
 * ========================================================================*/

.appwin__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: var(--bd-1) solid var(--c-line);
  background-color: var(--c-surface);
  color: var(--c-text-3);
  font-size: var(--fs-xs);
}

.appwin__foot .btn { min-height: var(--sp-8); }

.appwin__note {
  margin: 0;
  margin-inline-start: auto;
  color: var(--c-text-3);
  font-size: var(--fs-xs);
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 900px) {
  .appwin__verdict { margin: var(--sp-5) var(--sp-5) 0; }
  .appwin__foot { padding-inline: var(--sp-5); }
  .appwin__toolbar { padding: var(--sp-5); }
}

/* ==========================================================================
 * 8. 降级
 * ========================================================================*/

@media (prefers-reduced-motion: reduce) {
  .appwin__progress { transition: none; }
  .trow { transition: none; }
}