assets/scroll.css

html {
  scroll-behavior: smooth;     /* 平滑滾動 */
}

/* heading 的捲動預留空間（依你的 header 高度調整，如 80~100px） */
[id^="h-"] {
  scroll-margin-top: 90px;
}
/* 固定 AppShell Header 在頂部，並有底色與層級 */
.mantine-AppShell-header{
  position: sticky;
  top: 0;
  z-index: 2000;
  background: var(--mantine-color-body);
  border-bottom: 1px solid var(--mantine-color-default-border);
}

/* 主內容預留 Header 高度（64px） */
.mantine-AppShell-main{
  padding-top: 64px;
}

/* 圖片安全預設 */
img{ max-width: 100%; height: auto; }

html[data-mantine-color-scheme="light"] .themed-color,
#mantine-provider[data-mantine-color-scheme="light"] .themed-color { 
  --tc: var(--tc-light);
}

html[data-mantine-color-scheme="dark"] .themed-color,
#mantine-provider[data-mantine-color-scheme="dark"]  .themed-color { 
  --tc: var(--tc-dark);
}

/* 讓 --tc 指向 light 或 dark，以 data-mantine-color-scheme 為準 */
[data-mantine-color-scheme="light"] .themed-color { --tc: var(--tc-light); }
[data-mantine-color-scheme="dark"]  .themed-color { --tc: var(--tc-dark); }

/* === Math blocks center (KaTeX + MathJax) === */
.katex-display {
  text-align: center;
  overflow-x: auto;      /* 數學式太長時橫向捲動，不截斷 */
  overflow-y: hidden;
  padding-bottom: 4px;   /* 捲動條不擋到數學式 */
}
mjx-container[display="true"] {
  display: block;
  text-align: center;
  margin: 8px 0;
  overflow-x: auto;      /* MathJax 同樣加橫向捲動 */
}


.math-block { display:block; width:100%; text-align:center; }

.mantine-List-item .math-block {
  width: calc(100% + var(--li-outdent, 0px));
  margin-left: calc(-1 * var(--li-outdent, 0px));
}

/* 主題色切換：背景與前景 */
html[data-mantine-color-scheme="light"] .themed-bg { --bg: var(--bg-light); }
html[data-mantine-color-scheme="dark"]  .themed-bg { --bg: var(--bg-dark);  }
html[data-mantine-color-scheme="light"] .themed-fg { --fg: var(--fg-light); }
html[data-mantine-color-scheme="dark"]  .themed-fg { --fg: var(--fg-dark);  }

/* 讓有這兩個 class 的元素吃到背景/字色 */
.themed-bg { background: var(--bg, var(--bg-light)); }
.themed-fg { color:      var(--fg, var(--fg-light)); }

/* === 讓顏色標記（<!--c_xxx-->）真的套到文字上 === */
.themed-color { color: var(--tc, inherit); }



/* === 卡片用的背景/前景變數（若尚未加入）=== */
html[data-mantine-color-scheme="light"] .themed-bg { --bg: var(--bg-light); }
html[data-mantine-color-scheme="dark"]  .themed-bg { --bg: var(--bg-dark); }
.themed-bg { background: var(--bg, transparent); }

html[data-mantine-color-scheme="light"] .themed-fg { --fg: var(--fg-light); }
html[data-mantine-color-scheme="dark"]  .themed-fg { --fg: var(--fg-dark); }
.themed-fg { color: var(--fg, inherit); }

/* 統一卡片外殼造型 */
.card-shell {
  overflow: visible;              /* 改為 visible，避免截斷長數學式 */
  border-radius: var(--mantine-radius-md);
}

/* 亮色：維持無外框 */
html[data-mantine-color-scheme="light"] .card-shell {
  border: 0;
  box-shadow: none;
}

/* 暗色：加一圈白色外框（半透明） */
html[data-mantine-color-scheme="dark"] .card-shell {
  border: 1px solid rgba(255, 255, 255, 0.28);  /* 想更亮改 0.4、更細可用 0.22 */
  box-shadow: none;                             /* 不要陰影 */
}