/* ============================================================
   公式速查页（SHEET NO.2）专属样式
   版式对齐 mm802-review deploy/formulas.html
   —— 单列 .fgrid / .fitem(.fn + .ff) · sheetno 章 · back 按钮
   ============================================================ */

.sheetpage .wrap { max-width: 1040px; padding: 40px 34px 72px; }

/* ---------- header 右侧 SHEET 编号章 ---------- */
.sheetno {
  text-align: center; min-width: 120px;
  border: 1.5px solid var(--ink); background: var(--paper2);
  box-shadow: 3px 3px 0 rgba(29,38,55,.22);
  padding: 9px 16px;
}
.sheetno .l { font: 600 9px var(--mono); letter-spacing: .22em; color: var(--faint); }
.sheetno .v { font: 700 20px var(--mono); color: var(--verm); }

/* ---------- 工具条 ---------- */
.sheetbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 22px 0 8px;
}
a.back {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 11px/1 var(--mono); letter-spacing: .1em; color: var(--ink);
  border: 1.5px solid var(--ink); background: var(--paper2);
  padding: 8px 13px; cursor: pointer;
  box-shadow: 2px 2px 0 rgba(29,38,55,.22);
  transition: background .15s ease, color .15s ease;
}
a.back:hover { background: var(--ink); color: var(--paper2); }

.scopebtns { display: flex; border: 1.5px solid var(--ink); background: var(--paper2); }
.scopebtns button {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: 700 11px var(--mono); letter-spacing: .12em; color: var(--ink2);
  padding: 8px 14px; transition: background .15s ease, color .15s ease;
}
.scopebtns button + button { border-left: 1.5px solid var(--ink); }
.scopebtns button.on { background: var(--ink); color: var(--paper2); }
.scopebtns button:hover:not(.on) { background: rgba(29,38,55,.06); color: var(--ink); }

#kp-search { width: 200px; }
#star-only.on { background: var(--verm); color: var(--paper2); border-color: var(--verm); }

/* ---------- 章节标题 ---------- */
h2.chsheet {
  font-size: 14px; border-bottom: 2px solid var(--ink);
  padding-bottom: 7px; margin: 30px 0 12px; letter-spacing: .04em;
  display: flex; align-items: baseline; gap: 10px;
}
h2.chsheet .no { font: 700 12px var(--mono); color: var(--verm); letter-spacing: .1em; }
h2.chsheet small { margin-left: auto; font: 600 10px var(--mono); color: var(--faint); letter-spacing: .12em; }

/* ---------- 公式网格：单列 ---------- */
.fgrid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.fitem {
  display: flex; gap: 14px; align-items: center;
  background: var(--paper2); border: 1px solid var(--rule2);
  padding: 10px 14px;
  transition: border-color .15s ease, background .15s ease;
}
.fitem:hover { border-color: var(--rule); background: #fffefa; }
.fitem.hide { display: none; }

.fn {
  flex: none; width: 138px;
  font: 700 11px var(--mono); color: var(--verm); letter-spacing: .06em;
  line-height: 1.5;
}
.fn em { font-style: normal; color: var(--orange); margin-right: 3px; }
.ff {
  font-size: 15px; line-height: 1.9; color: var(--ink); min-width: 0;
  overflow-x: auto; overflow-y: hidden;
}
.ff .fr { vertical-align: -.5em; }

/* 高亮命中 */
.fitem.hit { border-color: var(--verm); background: rgba(194,64,47,.05); }
.fitem.hit .fn { color: var(--verm); }

/* 数一专属标记 */
.fitem.only1::after {
  content: "数一"; flex: none; margin-left: auto;
  font: 700 9px var(--mono); letter-spacing: .12em; color: var(--gray);
  border: 1px dashed var(--gray); padding: 1px 5px;
}

/* 空态 */
.empty { text-align: center; padding: 70px 20px; color: var(--ink2); }
.empty .big { font-family: var(--serif); font-size: 22px; color: var(--ink); margin-bottom: 8px; }

/* ---------- 移动端 ---------- */
@media (max-width: 720px) {
  .sheetpage .wrap { padding: 26px 15px 48px; }
  .sheetno { min-width: 0; padding: 6px 12px; }
  .sheetno .v { font-size: 16px; }
  .sheetbar { gap: 8px; }
  #kp-search { width: 100%; order: 9; }
  .fitem { flex-direction: column; align-items: stretch; gap: 6px; padding: 11px 13px; }
  .fn { width: auto; }
  .ff { font-size: 14.5px; }
  h2.chsheet { font-size: 13px; }
  h2.chsheet small { display: none; }
}

/* 极窄屏：公式行允许自身横向滚动，但滚动容器不能把整页撑宽 */
@media (max-width: 560px) {
  .fitem { flex-direction: column; align-items: stretch; }
  .fn { width: auto; }
  .ff { display: block; width: 100%; overflow-x: auto; overflow-y: hidden; }
  .fitem.only1 { position: relative; padding-right: 46px; }
  .fitem.only1::after { position: absolute; right: 10px; top: 10px; margin-left: 0; }
}