/* 变量只定义在 .fold，自身可覆盖，不会污染全局 */
.fold{
  --acc-500:#8B5CF6;  /* 主紫 */
  --acc-600:#7C3AED;  /* 深紫 */
  --acc-50:#F5F3FF;   /* 浅紫背景 */

  --fold-bg:#fff;
  --fold-border:#E5E7EB;
  --fold-text:#111827;
  --fold-muted:#6B7280;
  --fold-radius:14px;
  --fold-shadow:0 10px 24px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
  --fold-title-size:1.125rem; /* ≈ h3 */
}

/* 容器 */
.fold{
  position:relative;
  background:var(--fold-bg);
  border:1px solid var(--fold-border);
  border-radius:var(--fold-radius);
  box-shadow:var(--fold-shadow);
  color:var(--fold-text);
  margin:16px 0;
  overflow:hidden;
}

/* 左侧紫条（默认隐藏；只在 hover 或 open 时显示） */
.fold::before{
  content:"";
  position:absolute; inset:-1px auto -1px 0; /* 上下各延1px，避免缝隙 */
  width:4px;
  background:var(--acc-500);
  border-radius:inherit;
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .25s ease, background .2s ease, opacity .2s ease;
  opacity:0;
}
.fold:hover::before{
  transform:scaleY(1);
  opacity:1;
}
.fold.open::before{
  background:var(--acc-600);
  transform:scaleY(1);
  opacity:1;
}
/* 收起状态即使获得焦点也不显示；展开 + 焦点时保持显示 */
.fold:not(.open):focus-within::before{ transform:scaleY(0); opacity:0; }
.fold.open:focus-within::before{ transform:scaleY(1); opacity:1; }

/* 头部 */
.fold .fold-header{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:transparent;
  border:0; cursor:pointer; text-align:left;
  transition:background .2s ease;
}
.fold .fold-header:hover{ background:var(--acc-50); }

/* 标题 */
.fold .fold-title{
  font-weight:700;
  font-size:var(--fold-title-size);
  line-height:1.3;
  display:flex; align-items:center; gap:.5em;
}
.fold .fold-hashes{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:var(--fold-muted);
  opacity:.75;
}

/* 右侧箭头 */
.fold .fold-arrow{
  width:22px; height:22px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; margin-left:12px;
  transition:background .2s ease, box-shadow .2s ease;
}
.fold .fold-arrow::before{
  content:"";
  width:10px; height:10px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg); /* 收起：">" */
  transition:transform .25s ease;
  color:#374151; opacity:.9;
}
.fold.open .fold-arrow::before{ transform:rotate(45deg); } /* 展开："v" */

/* 面板动画与内容，仅限 .fold 内部 */
.fold .fold-panel{
  height:0; overflow:hidden;
  transition:height .28s cubic-bezier(.4,0,.2,1);
  will-change:height;
  background:var(--fold-bg);
}
.fold.open .fold-panel{
  background:linear-gradient(0deg, var(--acc-50) 0, transparent 24px);
}
.fold .fold-content{ padding:0 16px 16px 16px; color:var(--fold-text); }
.fold .fold-content p{ margin:12px 0; }
.fold .fold-content ul, .fold .fold-content ol{ margin:12px 0 12px 1.25rem; }

/* 收起但 hover 时也要显示紫条（覆盖 focus-within 的隐藏） */
.fold:not(.open):focus-within:hover::before{
  transform: scaleY(1);
  opacity: 1;
}

/* 兜底：hover 优先级最高（放在末尾） */
.fold:hover::before{
  transform: scaleY(1);
  opacity: 1;
}
/* 底部上箭头按钮 */
.fold .fold-bottom-arrow {
  display: none;
  text-align: center;
  padding: 8px;
  cursor: pointer;
  color: var(--acc-600);
  font-size: 14px;
  user-select: none;
  transition: color .2s ease;
}
.fold .fold-bottom-arrow:hover {
  color: var(--acc-500);
}
.fold.open .fold-bottom-arrow {
  display: block;
}
.fold .fold-bottom-arrow::before {
  content: "▲";
  font-size: 16px;
  display: inline-block;
  margin-bottom: 2px;
}

/* 关闭折叠区域内的 scroll anchoring，避免浏览器跟随底部箭头自动滚动 */
.fold,
.fold .fold-panel,
.fold .fold-bottom-arrow {
  overflow-anchor: none;
}