/* =====================================================================
   考研数学一 · 公式速查 —— 页面样式
   ---------------------------------------------------------------------
   配色、字体、排版沿用原《考研数学一公式速查》工程的 src/style.css：
   米白纸张底、藏青标题、宋体+Times New Roman 混排、公式卡片描边。
   公式书就该长成一本书的样子，所以这里只把它装进玄云的外壳。

   两处结构上的调整（不改观感）：
   1. 原文件是整页布局（body/#app/.sidebar/.content），搬进控制台后这些名字会和
      app.css 正面撞车（.sidebar 和 .content 是控制台自己的骨架）。所有类名改为
      `fx-` 前缀并限定在 `#formula` 内。
   2. 原文件的目录栏 sticky 在窗口上、回到顶部按钮滚 window；控制台里真正滚动的
      是 .content，所以改成跟着它走（见 formula.js）。

   固定用浅色：原工程会跟随系统深色模式，但它嵌在深色控制台里再自己变深，
   就会和四周糊成一片、失去"一页纸"的边界感。
   ===================================================================== */

/* ---------------------------------------------------------------------
   颜色从 app.css 的全局 token 派生（v6 改版第 18 项）。
   上面注释说的"固定用浅色"这条已经作废：那时全站是深色星穹底，这一页
   自己变深会跟四周糊成一片；现在全站是 ivory 纸底，这一页反倒必须跟着
   主题走——否则深色模式下整屏就它一块白，比糊成一片更刺眼。
   排版（Times/宋体混排、pt 字号、公式卡片描边）原样保留。
   --------------------------------------------------------------------- */
#formula .fx-paper {
  --fx-bg:     var(--bg-soft);
  --fx-panel:  var(--surface);
  --fx-border: var(--line);
  --fx-text:   var(--ink);
  --fx-dim:    var(--muted);
  --fx-accent: var(--violet);   /* 原藏青 #1f4e79 -> 站点信息色，深浅两套都过 AA */
  --fx-soft:   var(--violet-wash);
  --fx-code:   var(--wash);

  background: var(--fx-bg);
  color: var(--fx-text);
  border-radius: var(--r);
  padding: 20px 22px 34px;
  border: 1px solid var(--fx-border);
  box-shadow: none;
  font-family: "Times New Roman", "SimSun", "宋体", serif;
  font-size: 12pt;
  line-height: 1.85;
}

#formula .fx-paper * { box-sizing: border-box; }

/* ---------------------------------------------------------------------
   关于"全站字号下限 12px"这条规则在本页的例外（实测记录，别当成漏改）：
   本页有 756 个元素字号小于 12px，全部来自 KaTeX 的数学排版内部：
     · 680 个是 1px —— KaTeX 给读屏软件用的隐藏 MathML 层（.katex-mathml），
       它被 clip 掉了，肉眼根本看不见；
     · 其余 8.25~11.62px 是上标、下标、分式的小号层。
   数学记号里上标本来就必须比基线小，强行抬到 12px 会让 x² 和 x 一样大，
   公式直接读错。所以这一类**有意不改**。
   页面自己的界面文字（目录、标题、提示）已全部 >= 12px。
   --------------------------------------------------------------------- */

/* ------------------------------------------------------------ 两栏骨架 */
#formula .fx-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

#formula .fx-side {
  background: var(--fx-panel);
  border: 1px solid var(--fx-border);
  border-radius: 10px;
  padding: 14px 12px 18px;
  /* 控制台里滚动的是 .content，页面本身在常规流里，所以 sticky 生效 */
  position: sticky;
  top: 0;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
}

#formula .fx-brand {
  font-size: 1.2rem; font-weight: 700; color: var(--fx-accent); letter-spacing: .02em;
}
#formula .fx-brand span {
  display: block; font-size: .75rem; font-weight: 400; color: var(--fx-dim); margin-top: .15rem;
}

#formula .fx-search { margin: 14px 0 12px; }
#formula .fx-search input {
  width: 100%; padding: .55rem .7rem; border: 1px solid var(--fx-border); border-radius: 6px;
  font: inherit; font-size: .95rem; background: var(--fx-bg); color: var(--fx-text);
}
#formula .fx-search input:focus { outline: 2px solid var(--fx-accent); outline-offset: 1px; }
#formula .fx-hint { font-size: 12px; color: var(--fx-dim); margin-top: .3rem; line-height: 1.5; }

#formula .fx-nav-subject { margin-bottom: .9rem; }
#formula .fx-nav-title {
  font-weight: 700; color: var(--fx-text); font-size: .98rem;
  padding: .3rem .4rem; border-radius: 6px;
}
#formula .fx-nav-chapters {
  list-style: none; margin: .2rem 0 0; padding-left: .6rem; border-left: 2px solid var(--fx-border);
}
#formula .fx-nav-chapters a {
  display: block; padding: .28rem .5rem; font-size: .86rem; color: var(--fx-dim);
  text-decoration: none; border-radius: 5px; cursor: pointer;
}
#formula .fx-nav-chapters a:hover { background: var(--fx-soft); color: var(--fx-accent); }
#formula .fx-nav-chapters a.active { background: var(--fx-soft); color: var(--fx-accent); font-weight: 700; }

/* -------------------------------------------------------------- 正文 */
#formula .fx-main { min-width: 0; }

#formula .fx-header {
  margin-bottom: 1.6rem; border-bottom: 1px solid var(--fx-border); padding-bottom: 1.2rem;
}
#formula .fx-header h2 { margin: 0 0 .35rem; font-size: 1.6rem; color: var(--fx-accent); }
#formula .fx-header p { margin: 0; color: var(--fx-dim); font-size: .92rem; }

#formula .fx-subject { margin-bottom: 3rem; }
#formula .fx-subject-title {
  font-size: 1.5rem; color: var(--fx-accent); border-bottom: 3px solid var(--fx-accent);
  display: inline-block; padding-bottom: .2rem; margin: 0 0 1.4rem;
}
#formula .fx-chapter { margin-bottom: 2.2rem; scroll-margin-top: 12px; }
#formula .fx-chapter > h4 {
  font-size: 1.18rem; color: var(--fx-text); background: var(--fx-soft);
  padding: .45rem .8rem; border-radius: 6px; margin: 0 0 1rem;
}
#formula .fx-group { margin-bottom: 1.3rem; }
#formula .fx-group > h5 {
  font-size: 1rem; color: var(--fx-accent); margin: 0 0 .6rem;
  padding-left: .5rem; border-left: 4px solid var(--fx-accent);
}

#formula .fx-formula {
  background: var(--fx-panel); border: 1px solid var(--fx-border); border-radius: 8px;
  padding: .7rem 1rem .85rem; margin-bottom: .65rem;
}
#formula .fx-formula-name { font-size: .88rem; font-weight: 700; color: var(--fx-dim); margin-bottom: .3rem; }
#formula .fx-katex { overflow-x: auto; padding: .15rem 0; }
#formula .fx-note {
  margin-top: .4rem; font-size: .82rem; color: var(--fx-dim);
  background: var(--fx-code); border-radius: 5px; padding: .4rem .6rem;
}

#formula .fx-formula.hidden,
#formula .fx-group.hidden,
#formula .fx-chapter.hidden,
#formula .fx-subject.hidden,
#formula .fx-empty.hidden { display: none !important; }

#formula .fx-empty { text-align: center; color: var(--fx-dim); padding: 3rem 1rem; font-size: .95rem; }
#formula .fx-loading { text-align: center; color: var(--fx-dim); padding: 3rem 1rem; }

/* ---------------------------------------------------------- 回到顶部 */
#formula .fx-top {
  position: sticky; bottom: 12px; float: right; margin-right: 4px;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--fx-border); background: var(--fx-panel); color: var(--fx-accent);
  font-size: 1.1rem; cursor: pointer; box-shadow: none;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
#formula .fx-top.visible { opacity: 1; pointer-events: auto; }

/* -------------------------------------------------------------- 窄屏 */
#formula .fx-menu { display: none; }

@media (max-width: 900px) {
  #formula .fx-paper { padding: 14px 12px 24px; }
  #formula .fx-layout { grid-template-columns: minmax(0, 1fr); }
  #formula .fx-menu {
    display: block; width: 100%; margin-bottom: 12px;
    padding: .7rem 1rem; border: 1px solid var(--fx-border); border-radius: 8px;
    background: var(--fx-panel); font: inherit; font-weight: 700;
    color: var(--fx-accent); text-align: left; cursor: pointer;
  }
  #formula .fx-side { position: static; max-height: none; display: none; }
  #formula .fx-side.open { display: block; }
}