/* ==========================================================================
   lab.css — 「实验室」页面的全部样式
   ──────────────────────────────────────────────────────────────────────────
   这页只放**还没上线的备选方案**（已经上线的 L1 / U1 直接搬进 components.css 了），
   所以类名统一带 lab / ship / n1..n3 前缀，不复用也不覆盖线上组件。

   颜色只用 L2 语义 token（--c-*），暗色主题不用改这里一行。
   版式对齐「文档工具」那一挂：细边框、无阴影、不用虚线、不用渐变。
   ========================================================================== */

.page--lab {
  padding-bottom: var(--sp-6);
}

/* ── 目录：吸在顶栏下面，点一下滚过去（不是 hash 链接，见 pages/lab.js） ── */

.labtoc {
  position: sticky;
  top: var(--nav-height);
  z-index: 5;
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  margin-bottom: var(--sp-2);
  background-color: var(--c-surface-blur);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.labtoc::-webkit-scrollbar {
  display: none;
}

.labtoc__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
  transition: border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.labtoc__item:hover {
  border-color: var(--c-accent);
  color: var(--c-text);
}

.labtoc__no {
  color: var(--c-accent);
}

/* ── 章节 ─────────────────────────────────────────────────────────────── */

.labsec {
  margin-top: var(--sp-8);
  scroll-margin-top: calc(var(--nav-height) + var(--sp-6));
}

.labsec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--c-border);
}

.labsec__title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--fs-xl);
}

.labsec__no {
  font-size: var(--fs-sm);
  color: var(--c-accent);
  letter-spacing: var(--ls-wide);
}

.labsec__note {
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* ── 已上线：一行一条，不渲染第二遍 ───────────────────────────────────── */

.shipline {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-border);
}

.shipline:last-child {
  border-bottom: 0;
}

.shipline__id {
  font-size: var(--fs-xs);
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

.shipline__title {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0;
}

.shipline__note {
  margin-top: 0.125rem;
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
  line-height: var(--lh-snug);
}

.shipline__link {
  font-size: var(--fs-sm);
  color: var(--c-accent);
  text-decoration: none;
  white-space: nowrap;
}

.shipline__link:hover {
  color: var(--c-accent-hover);
}

/* ── 方案卡 ───────────────────────────────────────────────────────────── */

.labcard {
  margin-top: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--card-radius);
  background-color: var(--card-bg);
  overflow: hidden;
}

.labcard__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
}

.labcard__id {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--r-sm);
  background-color: var(--c-accent-soft);
  color: var(--c-accent-hover);
  font-size: var(--fs-2xs);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.labcard__idbox {
  min-width: 0;
}

.labcard__title {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0;
}

.labcard__blurb {
  margin-top: 0.125rem;
  font-size: var(--fs-sm);
  color: var(--c-text-secondary);
  line-height: var(--lh-snug);
}

.labcard__demo {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}

.labcard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--c-border);
  background-color: var(--c-bg-subtle);
  font-size: var(--fs-xs);
}

.labcard__gain {
  color: var(--c-text-secondary);
}

.labcard__cost {
  color: var(--c-text-muted);
}

.labcard__say {
  margin-left: auto;
  color: var(--c-text-muted);
  font-size: var(--fs-2xs);
  white-space: nowrap;
}

/* ==========================================================================
   N1 · 时间预算
   ========================================================================== */

.n1__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.n1__chip {
  padding: 0.1875rem 0.625rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  color: var(--c-text-secondary);
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.n1__chip:hover {
  border-color: var(--c-accent);
  color: var(--c-text);
}

.n1__chip.is-active {
  border-color: var(--c-accent);
  background-color: var(--c-accent-soft);
  color: var(--c-accent-hover);
}

.n1__sum {
  margin-left: auto;
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

.n1__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.n1__item {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: 0.3125rem 0;
  border-bottom: 1px solid var(--c-border);
}

.n1__item:last-child {
  border-bottom: 0;
}

.n1__len {
  flex: none;
  width: 3rem;
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

.n1__title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--c-text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.n1__title:hover {
  color: var(--c-accent);
}

.n1__who {
  flex: none;
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
}

.n1__empty {
  padding: var(--sp-3) 0;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* ==========================================================================
   N2 · 接着看
   ========================================================================== */

.n2 {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.n2__cover,
.n2__cover--empty {
  flex: none;
  width: 6.5rem;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-sm);
  background-color: var(--c-bg-subtle);
}

.n2__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1;
}

.n2__up {
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
}

.n2__title {
  font-size: var(--fs-sm);
  color: var(--c-text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.n2__title:hover {
  color: var(--c-accent);
}

.n2__track {
  height: 0.25rem;
  border-radius: var(--r-full);
  background-color: var(--c-bg-subtle);
  overflow: hidden;
}

.n2__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  background-color: var(--c-accent);
}

.n2__pct {
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

.n2__go {
  flex: none;
  padding: 0.375rem 0.875rem;
  font-size: var(--fs-xs);
}

/* ==========================================================================
   N3 · 本周小结
   ========================================================================== */

.n3 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}

.n3__cell {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-left: var(--sp-3);
  border-left: 1px solid var(--c-border);
}

.n3__cell:first-child {
  padding-left: 0;
  border-left: 0;
}

.n3__label {
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-muted);
}

.n3__value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  line-height: 1.2;
}

.n3__note {
  grid-column: 1 / -1;
  font-size: var(--fs-2xs);
  color: var(--c-text-muted);
}

/* ── 页尾一句口径 ─────────────────────────────────────────────────────── */

.labfoot {
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* ── 响应式 ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .n3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-5);
  }
}

@media (max-width: 640px) {
  .labcard__head {
    flex-direction: column;
    gap: var(--sp-2);
  }

  .labcard__demo {
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
  }

  .labcard__foot {
    padding-inline: var(--sp-4);
  }

  .labcard__say {
    margin-left: 0;
  }

  .shipline {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    row-gap: var(--sp-2);
  }

  .shipline__link {
    grid-column: 2;
  }

  .n2 {
    flex-wrap: wrap;
  }

  .n2__cover,
  .n2__cover--empty {
    width: 5rem;
  }

  .n2__go {
    width: 100%;
    justify-content: center;
  }

  .n1__who {
    display: none;
  }
}