/* ==========================================================================
   Shadowrocket 官方下载站 · 功能与设置页(zh-CN/features.html)
   只在本页使用:首屏章节条 / 左文右卡分栏 / 界面路径卡 / 可横滑对照表 / 设置索引面板
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 首屏内的章节跳转条
   -------------------------------------------------------------------------- */

.hero-toc{margin-top:30px;}

/* --------------------------------------------------------------------------
   2. 左正文 + 右辅助卡的分栏
   -------------------------------------------------------------------------- */

.fn-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,320px);
  gap:36px;
  align-items:start;
  margin-top:36px;
}
.fn-split > *{min-width:0;}
.fn-split .prose{max-width:none;}

/* --------------------------------------------------------------------------
   3. 界面路径卡
   -------------------------------------------------------------------------- */

.path-card{
  border-radius:var(--radius-panel);
  border:1px solid var(--border-light);
  background-color:var(--bg-light-panel);
  color:var(--text-on-light);
  padding-block:22px;
  padding-inline:22px;
}
.path-head{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-on-light-muted);
}
.path-line{
  display:block;
  font-family:var(--font-mono);
  font-size:12.5px;
  line-height:1.9;
  color:var(--text-on-light);
  overflow-wrap:anywhere;
}
.path-card pre{
  margin:0;
  padding-block:14px;
  padding-inline:14px;
  border-radius:12px;
  font-size:12px;
  line-height:1.85;
}
.path-note{
  margin:14px 0 0;
  padding-top:14px;
  border-top:1px solid var(--border-light);
  font-size:13px;
  line-height:1.8;
  color:var(--text-on-light-muted);
}

/* --------------------------------------------------------------------------
   4. 可横滑的对照表容器
   -------------------------------------------------------------------------- */

.table-scroll{
  margin-top:32px;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  border:1px solid var(--border-light);
  border-radius:var(--radius-panel);
  background-color:var(--bg-light);
}
.table-scroll .data-table{min-width:680px;}
.table-scroll .data-table tr:last-child td{border-bottom:0;}

/* --------------------------------------------------------------------------
   5. 设置索引面板(iOS 分组列表质感:白底 + 分隔线 + 行尾 chevron)
   -------------------------------------------------------------------------- */

.settings-panel{
  list-style:none;
  margin:0;
  padding:0;
  border-radius:18px;
  border:1px solid var(--border-light);
  background-color:var(--bg-light);
  box-shadow:var(--shadow-soft);
  overflow:clip;
}
.settings-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:58px;
  padding-block:12px;
  padding-inline:18px;
  border-top:1px solid var(--border-light);
}
.settings-row:first-child{border-top:0;}
.settings-main{display:flex;flex-direction:column;gap:3px;min-width:0;}
.settings-key{
  font-family:var(--font-mono);
  font-size:13.5px;
  font-weight:600;
  line-height:1.4;
  color:var(--text-on-light);
  overflow-wrap:anywhere;
}
.settings-val{font-size:13px;line-height:1.6;color:var(--text-on-light-muted);}
.settings-chev{
  flex:0 0 auto;
  width:13px;
  height:13px;
  fill:none;
  stroke:var(--chev);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.settings-note{
  margin:18px 0 0;
  font-size:14.5px;
  line-height:1.85;
  color:var(--text-on-light-body);
}

/* --------------------------------------------------------------------------
   6. 分区内小间距、编号与居中正文
   -------------------------------------------------------------------------- */

.sec-block{margin-top:32px;}
.trigger-num{
  margin:0 0 10px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent-dark);
}
.prose-center{margin-inline:auto;}

/* --------------------------------------------------------------------------
   7. 响应式
   -------------------------------------------------------------------------- */

@media (max-width:900px){
  .fn-split{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:28px;}
}

@media (max-width:720px){
  .hero-toc{margin-top:22px;}
  .table-scroll{margin-top:24px;}
  .table-scroll .data-table{min-width:560px;}
  .settings-row{padding-inline:16px;}
}