/* =============================================================================
 * lucent-doc.css — 讓 Eliza 文件站套上 Lucent 品牌（淺色 + 紅色 + Noto Sans TC）
 * 載入順序在 Eliza 的 style.css 之後，覆寫其深色主題變數與外觀。
 * ========================================================================== */

/* 覆寫 Eliza 主題變數 → 淺色 Lucent */
:root {
  --bg: #f5f5f7;
  --text: #2b2b2b;
  --muted: #5b5b5b;
  --link: #d32f2f;
  --sidebar-bg: #ffffff;
  --menu: #ffffff;
  --shadow: rgba(0, 0, 0, 0.06);
}

body {
  font-family: 'Noto Sans TC', -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Noto Sans TC', sans-serif; color: var(--text); }
h2 { border-bottom: 1px solid var(--lct-border); }
a { color: var(--lct-primary); }

/* 側欄（淺色） */
.sidebar_box { background: var(--sidebar-bg); border-right: 1px solid var(--lct-border); box-shadow: none; }
#sidebar { color: var(--text); }
#sidebar a { color: var(--text) !important; padding: 6px 10px; border-radius: 6px; }
#sidebar a:hover { background: var(--lct-primary-tint); color: var(--lct-primary) !important; text-decoration: none; }
.capsule { color: var(--text); background: #fff; border-color: var(--lct-border); }
.capsule.current, .current .capsule { background: var(--lct-primary) !important; color: #fff !important; border-color: var(--lct-primary); }

/* 表格（淺色、左對齊） */
table { border-color: var(--lct-border); }
th, td { border-color: var(--lct-border); color: var(--text); }
th { background: var(--lct-bg); }
td { text-align: left; }

/* 頁內目錄 TOC */
.page-toc { background: #fff; border: 1px solid var(--lct-border); }
.page-toc a, .page-toc > a { color: var(--lct-primary); }

/* 行內程式碼 */
:not(pre) > code { background: var(--lct-primary-tint); color: #b0006a; padding: 2px 6px; border-radius: 4px; font-size: .9em; }

/* 引言 */
blockquote { background: #fff; border-left: 6px solid var(--lct-primary); color: var(--text); }
blockquote > p { font-family: inherit; }

/* 提示框（淺色版，對應 Lucent 語意色） */
.tips-tip     { background: var(--lct-success-bg); border-left-color: var(--lct-success); color: #1b5e20; }
.tips-info    { background: var(--lct-info-bg);    border-left-color: var(--lct-info);    color: #01579b; }
.tips-warning { background: var(--lct-warning-bg); border-left-color: var(--lct-warning); color: #8a4b00; }

/* ---------------------------------------------------------------------------
 * 活範例容器 .lct-demo（由 lucent-preview.js 自動注入）
 * ------------------------------------------------------------------------ */
.lct-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  padding: 20px;
  margin: 0 0 -0.5em 2em;          /* 與下方 pre 對齊（Eliza pre 有 margin-left:2em） */
  background: var(--lct-surface);
  border: 1px solid var(--lct-border);
  border-radius: 12px 12px 0 0;
  position: relative;
  transform: translateZ(0);         /* 使內部 position:fixed 的遮罩限制在框內預覽 */
  overflow: hidden;
}
.lct-demo::before {
  content: "預覽";
  position: absolute; top: 8px; right: 12px;
  font-size: 11px; color: var(--lct-muted); letter-spacing: .1em;
}
/* 內含開啟中的遮罩（Modal/Dialog）時，給預覽框高度 */
.lct-demo:has(.lct-scrim.is-open) { min-height: 320px; }
/* 中和文件正文對通用標籤的樣式，避免污染元件 */
.lct-demo :where(p, ul, ol, li, h1, h2, h3, table) { margin: 0; }
.lct-demo :where(p) { font-weight: inherit; line-height: normal; }
.lct-demo img { width: auto; border-radius: inherit; }

@media (max-width: 600px) {
  .lct-demo { margin-left: 0; }
}