/* ==========================================================================
   见微 AlgoLens · 页面组件层
   ---------------------------------------------------------------------------
   components.css 放的是「跨页面通用组件」，这一层放「只有某个页面才有」的东西：
   面包屑、学习地图的模块块、测验选项、知识点坑点卡、进度环、工作台 Tab。

   纪律同上一层：只用墨黑 / 朱砂 / 纸色三色，圆角 ≤3px，间距取 4px 阶，
   禁止硬编码色值 —— 全部走 tokens.css 的令牌。
   ========================================================================== */

/* ==========================================================================
   0. 顶栏微调
   ---------------------------------------------------------------------------
   六个导航项在窄屏靠横向滚动容纳。当前项加一条朱砂底线 —— 朱砂在这套设计里
   只表示「你现在在这里 / 正在发生」，用在当前导航项上正好。
   ========================================================================== */
.nav a[aria-current="page"] { border-bottom-color: var(--cinnabar); }

@media (max-width: 720px) {
  .masthead__inner { flex-wrap: wrap; gap: var(--sp-2); padding-block: 8px; min-height: 0; }
  .nav { order: 3; flex-basis: 100%; }
  .brand__en { display: none; }
}

/* ==========================================================================
   1. 面包屑
   ========================================================================== */.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--cinnabar); }
.crumbs__sep { color: var(--rule-2); }
.crumbs__cur { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   2. 专题详情页头
   ========================================================================== */
.learn__head { margin-block: var(--sp-3) var(--sp-4); }
.learn__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.learn__title h1 {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: 1.08;
  letter-spacing: var(--ls-mega);
  font-weight: 400;
}
.learn__en {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
.learn__badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 难度徽标：三档用「填充程度」区分，不靠加新色相 */
.badge-diff {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  border: var(--bw-hair) solid var(--ink);
  border-radius: var(--r-1);
}
.badge-diff--1 { background: var(--paper-raised); color: var(--ink-2); }
.badge-diff--2 { background: var(--paper-sunk); color: var(--ink); }
.badge-diff--3 { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* 收藏按钮 */
#favBtn[aria-pressed="true"] { color: var(--cinnabar); border-color: var(--cinnabar); }

/* ==========================================================================
   3. 首页的区块头
   ---------------------------------------------------------------------------
   左标题 + 右动作。刻意不做居中式区块标题 —— 居中是「模板感」最快的来源。
   ========================================================================== */
.band { padding-block: var(--sp-6); }
.band__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: var(--bw-1) solid var(--rule-hard);
}
.band__head h2 {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  letter-spacing: var(--ls-mega);
  font-weight: 400;
  line-height: 1.1;
}
.band__desc {
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin-top: 6px;
}

/* ==========================================================================
   4. 键值对行（复杂度 / 实测数据）
   ========================================================================== */
.meta-row {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.meta-row > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.meta-row b {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.meta-row span {
  font-family: var(--font-mono);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   5. 垂直堆叠间距
   ========================================================================== */
.stack { display: flex; flex-direction: column; }
.stack-1 { gap: var(--sp-1); }
.stack-2 { gap: var(--sp-2); }
.stack-3 { gap: var(--sp-3); }
.stack-4 { gap: var(--sp-4); }
.row-2 { display: flex; gap: var(--sp-2); }
.wrap { flex-wrap: wrap; }

/* ==========================================================================
   6. 数据面板与工作台画布
   ========================================================================== */
/* 舞台顶部的一行元信息（n = 8 ｜ 共 32 步 ｜ 比较 28） */
.hud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: var(--bw-hair) solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.hud b { color: var(--ink); }

#canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(300px, 48vh, 620px);
}
#canvas > svg {
  width: 100%;
  height: clamp(300px, 52vh, 620px);
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

.prediction-panel {
  margin-top: var(--sp-3);
  border: var(--bw-1) solid var(--rule-hard);
  background: var(--paper-raised);
  padding: var(--sp-3);
}
.prediction-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-bottom: 8px;
  border-bottom: var(--bw-hair) solid var(--rule);
}
.prediction-panel__q {
  margin: 10px 0;
  color: var(--ink);
  font-weight: 700;
}
.prediction-panel__opts {
  display: grid;
  gap: 6px;
}
.prediction-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 10px;
  border: var(--bw-hair) solid var(--rule-2);
  background: var(--paper);
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}
.prediction-opt span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  background: var(--paper-sunk);
  border: var(--bw-hair) solid var(--rule-2);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
}
.prediction-opt:hover:not(:disabled) { border-color: var(--cinnabar); color: var(--ink); }
.prediction-opt.is-correct { border-color: var(--ok); background: #EAF3EC; color: var(--ink); }
.prediction-opt.is-wrong { border-color: var(--fail); background: var(--cinnabar-tint); color: var(--ink); }
.prediction-panel__note {
  margin-top: 9px;
  color: var(--ink-3);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
}

.manual-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
}
.manual-controls .btn { width: 100%; }
.manual-note {
  margin-top: var(--sp-3);
  padding: 9px 10px;
  border-left: var(--bw-3) solid var(--cinnabar);
  background: var(--paper);
  color: var(--ink-2);
  font-size: var(--t-sm);
}
#bench.is-manual .transport,
#bench.is-manual .stage__narr,
#bench.is-manual .manual-hide { display: none; }

.trace-block + .trace-block {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: var(--bw-hair) solid var(--rule);
}
.trace-label {
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-wide);
  color: var(--ink-3);
}
.trace-line {
  display: flex;
  gap: 8px;
  padding: 7px 8px;
  background: var(--paper);
  border-left: var(--bw-2) solid var(--ink);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  line-height: 1.55;
  color: var(--ink-2);
}
.trace-line.is-error { border-left-color: var(--fail); color: var(--fail); }
.trace-line__no { flex: none; color: var(--ink-4); }
.trace-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.trace-chip {
  padding: 3px 7px;
  border: var(--bw-hair) solid var(--rule-2);
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--ink-2);
}
.trace-history { display: grid; gap: 4px; }
.trace-change {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--ink-2);
}
.trace-empty {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--ink-4);
}

/* 工作台三栏。
   注意：这里的响应式由 site.js 接管（窄屏把面板收进 Tab），
   所以 composition.css 里那两条「直接隐藏左右栏」的规则不适用于本站点，
   本站点用的是 .bench__col（不带 --left / --right 后缀）。 */
.bench {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 288px;
  gap: var(--sp-3);
  align-items: start;
}
@media (max-width: 1240px) {
  .bench { grid-template-columns: 288px minmax(0, 1fr) 264px; }
}
/* 与 site.js 的 window.innerWidth < 1024 保持同一个断点 */
@media (max-width: 1024px) {
  .bench { grid-template-columns: 1fr; }
}

/* ==========================================================================
   7. 移动端 Tab 组
   ========================================================================== */
.tabs {
  display: flex;
  gap: 0;
  border: var(--bw-1) solid var(--rule-hard);
  background: var(--paper-sunk);
  overflow-x: auto;
}
.tabs__item {
  flex: 1 0 auto;
  min-height: 46px;
  padding: 0 var(--sp-3);
  background: transparent;
  border: none;
  border-right: var(--bw-hair) solid var(--rule);
  border-bottom: var(--bw-2) solid transparent;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.tabs__item:last-child { border-right: none; }
.tabs__item:hover { color: var(--ink); background: var(--paper-raised); }
.tabs__item[aria-selected="true"] {
  color: var(--ink);
  font-weight: 700;
  background: var(--paper-raised);
  border-bottom-color: var(--cinnabar);
}

/* ==========================================================================
   8. 学习地图
   ========================================================================== */
.map-module {
  border-top: var(--bw-1) solid var(--rule-hard);
  padding-block: var(--sp-4);
}
.map-module__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.map-module__letter {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1;
}
.map-module__head h3 {
  font-size: var(--t-md);
  letter-spacing: var(--ls-tight);
}
.map-module__count {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.05em;
  color: var(--ink-3);
  margin-top: 3px;
}
.map-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px;
  background: var(--rule);
  border: var(--bw-hair) solid var(--rule);
}
.map-node {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  background: var(--paper-raised);
  color: inherit;
  transition: background var(--dur-fast);
}
.map-node:hover { background: var(--cinnabar-tint); color: inherit; }
/* 状态点：靠填充方式区分，不靠色相 */
.map-node__dot {
  flex: none;
  width: 11px; height: 11px;
  background: var(--paper-sunk);
  border: var(--bw-hair) solid var(--rule-2);
}
.map-node__dot[data-state="learning"] { background: var(--cinnabar); border-color: var(--ink); }
.map-node__dot[data-state="done"] { background: var(--ink); border-color: var(--ink); }
.map-node__name {
  flex: 1;
  min-width: 0;
  font-size: var(--t-sm);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-node__star {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* ==========================================================================
   9. 闯关测验
   ========================================================================== */
.quiz-item {
  border: var(--bw-1) solid var(--rule-hard);
  background: var(--paper-raised);
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.quiz-item__q {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--ink);
  margin-bottom: var(--sp-3);
}
.quiz-item__no {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--paper);
  background: var(--ink);
  padding: 2px 7px;
  border-radius: var(--r-1);
}

.opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px var(--sp-3);
  border: var(--bw-hair) solid var(--rule-2);
  border-radius: var(--r-2);
  background: var(--paper);
  font-size: var(--t-sm);
  color: var(--ink-2);
  cursor: pointer;
  margin-bottom: 6px;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.opt:hover { border-color: var(--rule-hard); background: var(--paper-raised); }
.opt:active { transform: translateY(1px); }
.opt__key {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  background: var(--paper-sunk);
  border: var(--bw-hair) solid var(--rule-2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--ink-2);
  border-radius: var(--r-1);
}
/* 锁定后：正确是墨黑实心 + 反白，错误用朱砂描边 + 斜纹。
   两者在灰度下也分得清（实心 vs 空心斜纹）。 */
.opt.is-locked { cursor: default; }
.opt.is-locked:hover { transform: none; }
.opt.is-correct {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.opt.is-correct .opt__key { background: var(--cinnabar); border-color: var(--cinnabar); color: var(--paper); }
.opt.is-wrong {
  border-color: var(--cinnabar);
  border-width: var(--bw-1);
  background-color: var(--cinnabar-tint);
  background-image: var(--hatch-cin);
  color: var(--ink);
}
.opt.is-wrong .opt__key { background: var(--cinnabar); border-color: var(--ink); color: var(--paper); }

.quiz-explain {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  padding: 11px var(--sp-3);
  border: var(--bw-hair) solid var(--rule-2);
  border-left: var(--bw-3) solid var(--cinnabar);
  background: var(--paper);
  font-size: var(--t-sm);
  line-height: var(--lh-snug);
  color: var(--ink-2);
}
.quiz-explain b { color: var(--ink); flex: none; }

.scorecard {
  border: var(--bw-1) solid var(--rule-hard);
  background: var(--paper-raised);
  box-shadow: var(--sh-1);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  margin-top: var(--sp-4);
}
.scorecard__num {
  font-family: var(--font-display);
  font-size: var(--t-mega);
  line-height: 0.9;
  letter-spacing: var(--ls-mega);
  color: var(--cinnabar);
}
.scorecard__num::after { content: " 分"; font-size: 0.28em; color: var(--ink-3); letter-spacing: 0; }
.scorecard__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: var(--sp-2);
}

/* ==========================================================================
   10. 竞赛坑点卡
   ========================================================================== */
.pitfall {
  border: var(--bw-hair) solid var(--rule-2);
  border-left: var(--bw-3) solid var(--cinnabar);
  background: var(--paper-raised);
  padding: var(--sp-3);
}
.pitfall__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cinnabar-text);
  margin-bottom: 8px;
}
.pitfall p {
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

/* ==========================================================================
   11. 继续学习（首页）
   ========================================================================== */
.progress-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--paper-raised);
  border: var(--bw-hair) solid var(--rule-2);
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.progress-item:hover {
  color: inherit;
  transform: translate(-2px, -2px);
  box-shadow: var(--sh-1);
}
.progress-item__body { min-width: 0; }
.progress-item__name {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: var(--ls-tight);
}
.progress-item__meta {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  margin-top: 4px;
}
.ring { flex: none; }

/* ==========================================================================
   12.1 算法卡片动图
   ---------------------------------------------------------------------------
   卡片缩略图直接复用工作台的 SVG 渲染器，循环播放该算法的关键帧。
   背景仍只使用纸张色与方格线，朱砂只落在状态变化上，保证和全站风格统一。
   ========================================================================== */
.acard__preview {
  position: relative;
  height: clamp(172px, 14vw, 200px);
  flex: none;
  overflow: hidden;
  background-color: var(--paper-deep);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: center;
  border-bottom: var(--bw-hair) solid var(--rule-2);
}
.acard__preview::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: var(--bw-hair) solid var(--rule);
  pointer-events: none;
}
.acard__preview::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: var(--bw-2);
  background: var(--cinnabar);
  pointer-events: none;
}
.acard__preview-stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 10px 8px;
}
.acard__preview svg {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: auto;
}
.acard:hover .acard__preview {
  background-color: var(--paper-raised);
}

/* ==========================================================================
   13. 统计条（首页首屏）
   ========================================================================== */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0;
  border: var(--bw-1) solid var(--rule-hard);
  margin-top: var(--sp-5);
}
.stats-bar > div {
  padding: var(--sp-3);
  border-right: var(--bw-hair) solid var(--rule);
  background: var(--paper-raised);
}
.stats-bar > div:last-child { border-right: none; }
.stats-bar b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  line-height: 1;
  letter-spacing: var(--ls-mega);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stats-bar span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ==========================================================================
   14. 筛选条（算法库 / 对比实验室共用）
   ========================================================================== */
.filters {
  border: var(--bw-1) solid var(--rule-hard);
  background: var(--paper-raised);
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.filters__row + .filters__row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: var(--bw-hair) solid var(--rule);
}
.filters__label {
  flex: none;
  min-width: 36px;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-3);
}
.filters__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.filters__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* 筛选行里的输入框不要撑满 */
.filters .input, .filters .select { width: auto; min-width: 96px; }
.filters .input--wide { min-width: 200px; flex: 1; }

/* ==========================================================================
   15. 对比实验室
   ========================================================================== */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  align-items: start;
}
.compare__col { display: flex; flex-direction: column; }
.compare__col .card__body { padding-top: var(--sp-2); }
/* 对比计数：三格等宽，用发丝线分隔 */
.counters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: var(--sp-3);
  border: var(--bw-hair) solid var(--rule);
}
.counters > div {
  padding: 10px var(--sp-2);
  border-right: var(--bw-hair) solid var(--rule);
  text-align: center;
}
.counters > div:last-child { border-right: none; }
.counters b {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.counters span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* 结论卡：朱砂左边条，是这一页的落点 */
.conclusion {
  border: var(--bw-hair) solid var(--rule-2);
  border-left: var(--bw-3) solid var(--cinnabar);
  background: var(--paper-raised);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.conclusion b { color: var(--ink); }

@media (max-width: 860px) {
  .compare { grid-template-columns: 1fr; }
}

/* ==========================================================================
   16. 表格容器（横向可滚）
   ========================================================================== */
.table-wrap { overflow-x: auto; }
.table-wrap .dtable { min-width: 620px; }

/* ==========================================================================
   17. 有序列表：用朱砂方块当项目符号，和整体油墨系统一致
   ========================================================================== */
.bullet-list { margin: 0; }
.bullet-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: var(--t-sm);
  line-height: 1.72;
  color: var(--ink-2);
  counter-increment: bl;
}
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px; height: 8px;
  background: var(--cinnabar);
}
.bullet-list li:last-child { margin-bottom: 0; }
.bullet-list b { color: var(--ink); }

/* ==========================================================================
   18. 变量表：标出这一步发生变化的变量
   ---------------------------------------------------------------------------
   不加这个，变量表每一步都在整体重刷，学生根本看不出哪个值变了 ——
   而「哪个值变了」恰恰是理解算法的关键线索。
   ========================================================================== */
.dtable tr.is-changed td {
  background: var(--cinnabar-tint);
  color: var(--ink);
  font-weight: 700;
}
.dtable tr.is-changed td.k { box-shadow: inset var(--bw-2) 0 0 var(--cinnabar); }

/* 空表格提示 */
.dtable td.td-empty {
  text-align: center;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  padding-block: var(--sp-3);
}

/* ==========================================================================
   19. 响应式
   ========================================================================== */
@media (max-width: 900px) {
  .band__head { align-items: flex-start; }
  .map-nodes { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

@media (max-width: 720px) {
  .band { padding-block: var(--sp-5); }
  .band__head h2 { font-size: var(--t-md); }
  .learn__title h1 { font-size: var(--t-lg); }
  .map-module__letter { width: 34px; height: 34px; font-size: var(--t-md); }
  .map-node { padding: 10px; }
  .meta-row { gap: var(--sp-3); }
  .meta-row span { font-size: var(--t-base); }
  .quiz-item { padding: var(--sp-2); }
  .opt { padding: 12px; }
  .scorecard { padding: var(--sp-4) var(--sp-3); }
}

@media (max-width: 480px) {
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stats-bar > div:nth-child(2n) { border-right: none; }
  .map-nodes { grid-template-columns: 1fr; }
}

/* ==========================================================================
   数据面板的输入行
   ---------------------------------------------------------------------------
   长度 + 数组 + 按钮并排。数组框是弹性项，宽度不够时它先收缩；
   按钮组不换行、不收缩 —— 一排按钮被拆散是最难用的形态。
   ========================================================================== */
.data-row {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-end;
  flex-wrap: wrap;
}
.data-row .field--len { flex: 0 0 116px; }
.data-row .field--arr { flex: 1 1 240px; min-width: 0; }
.data-row__btns {
  display: flex;
  gap: var(--sp-2);
  flex: none;
  /* 和输入框底部对齐：输入框下方没有额外元素，所以基线对齐即可 */
  padding-bottom: 1px;
}

/* 校验反馈：解析不出足够数字时说一句人话，而不是默默不动 */
.data-hint {
  margin-top: var(--sp-2);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--ink-3);
}
.data-hint[data-bad="1"] { color: var(--fail); }

@media (max-width: 720px) {
  .data-row { gap: var(--sp-2); }
  .data-row .field--len,
  .data-row .field--arr { flex: 1 1 100%; }
  .data-row__btns { width: 100%; }
  .data-row__btns .btn { flex: 1; }
}

/* 数据分布的选项组。
   左栏在桌面端只有 288px，五个四字 chip 必然要换到第二行 ——
   所以这里的要点是「换行，而不是压缩」：容器允许 wrap，项不许收缩。 */
.data-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* ==========================================================================
   首页里的算法库区
   ---------------------------------------------------------------------------
   筛选条做成 sticky。65 张卡片的长度大约三四屏，滚到中间想换筛选时，
   让用户滚回顶部是不可接受的 —— 固定住它，代价只有一条 position 规则。

   top 用 --masthead-h：顶栏自己也是 sticky（z-index 50），
   这里必须让开它的高度，否则会叠在一起。变量由 syncMastheadHeight() 写入。
   ========================================================================== */
/* 锚点定位留出让位空间：点「浏览全部 65 个专题」跳到 #lib 时，
   标题不能被 sticky 的顶栏盖住 —— 这是合并成单页后才会出现的问题。 */
.lib { scroll-margin-top: calc(var(--masthead-h, 64px) + var(--sp-4)); }

.lib__head {
  padding-block: var(--sp-6) var(--sp-4);
}
.lib__head h2 {
  font-size: var(--t-xl);
  margin-bottom: 6px;
}

.lib__filters {
  position: sticky;
  top: var(--masthead-h, 64px);
  z-index: 40;
  background: var(--paper);
  border-top: var(--bw-hair) solid var(--rule);
  border-bottom: var(--bw-1) solid var(--rule-hard);
  padding-block: 10px;
}
.filters-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(210px, 20vw, 280px);
  gap: var(--sp-4);
  align-items: center;
}
.filters-main { min-width: 0; }
.filters-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  padding-left: var(--sp-3);
  border-left: var(--bw-hair) solid var(--rule);
}
.filters-search .input {
  min-width: 0;
  min-height: 34px;
  padding: 6px 10px;
  font-size: var(--t-xs);
}
.filters-search .filters__count { margin-left: 0; }
.lib__filters .filters__row {
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 8px;
}
.lib__filters .filters__row + .filters__row {
  margin-top: 7px;
  padding-top: 7px;
}
.lib__filters .filters__label {
  flex: 0 0 32px;
  min-width: 32px;
  padding-top: 6px;
}
.lib__filters .filters__chips {
  flex: 1;
  min-width: 0;
}
.lib__filters .chip {
  min-height: 28px;
  padding-inline: 9px;
}
.lib__body { padding-block: var(--sp-5) var(--sp-7); }

/* 分组标题：在 grid 里横跨整行 */
#grid .band__head {
  margin-top: var(--sp-5);
  padding-bottom: var(--sp-2);
  border-bottom: var(--bw-hair) solid var(--rule);
}
#grid .band__head:first-child { margin-top: 0; }
#grid .band__head h2 { font-size: var(--t-lg); }

@media (max-width: 720px) {
  .lib__filters { position: static; }   /* 窄屏上顶栏和筛选条叠起来占掉半屏，不如让它跟着滚 */
  .lib__head { padding-block: var(--sp-5) var(--sp-3); }
}

@media (max-width: 1100px) {
  .filters-shell { grid-template-columns: 1fr; gap: 8px; }
  .filters-search {
    width: min(100%, 320px);
    margin-left: auto;
    padding: 8px 0 0;
    border-top: var(--bw-hair) solid var(--rule);
    border-left: none;
  }
}

@media (max-width: 480px) {
  .filters-search { width: 100%; }
}

/* 算法库跳转页（library.html）—— 内容已并入首页，这个文件只负责带参数跳转 */
.jump {
  max-width: 60ch;
  margin: 18vh auto 0;
  text-align: center;
}
.jump h1 { font-size: var(--t-xl); margin-bottom: var(--sp-3); }
.jump p { color: var(--ink-2); line-height: var(--lh-body); margin-bottom: var(--sp-4); }