/* 搬來的電子報、互動圖：把庫的「線裝紙」換成網站色票。
   寫死的色碼在 build 時由 builder/skin.py 的 RECOLOR 換掉；這裡只管變數換不到的：
   半透明的朱線、紙紋與框線、版心與史印、外框貼齊視窗。 */

:root {
  color-scheme: light;
  --zhu-line: color-mix(in oklab, #C4A15A 75%, transparent);   /* 朱色細線改燙金細線 */
  --zhuline: color-mix(in oklab, #C4A15A 75%, transparent);    /* 電子報的寫法 */
}
html { scrollbar-color: #C4A15A #F4F4F2; }

/* ── 外框貼齊視窗：正文有 padding 的範本，統一成同一組留白，外框用負邊距抵掉 ── */
body.skin { --skin-pt: 0px; --skin-px: 0px; --skin-pb: 0px; }
body.skin-pad { --skin-pt: 2rem; --skin-px: 1.25rem; --skin-pb: 3rem;
  padding: var(--skin-pt) var(--skin-px) var(--skin-pb) !important; }
@media (max-width: 40rem) {
  body.skin-pad { --skin-pt: 1rem; --skin-px: .75rem; --skin-pb: 2rem; }
}
.skin-chrome { margin: calc(-1 * var(--skin-pt, 0px)) calc(-1 * var(--skin-px, 0px)) var(--skin-pt, 0px); }
.skin-foot { margin: var(--skin-pb, 0px) calc(-1 * var(--skin-px, 0px)) calc(-1 * var(--skin-pb, 0px)); }
body.skin:not(.skin-pad) .skin-chrome { margin-bottom: 0; }
body.skin:not(.skin-pad) .skin-foot { margin-top: 0; }

/* 整頁是一個應用的（3D 史料對照）：外框占掉的高度從舞台扣 */
body:has(> .skin-chrome + .app) { display: flex; flex-direction: column; }
body:has(> .skin-chrome + .app) > .app { flex: 1; min-height: 0; height: auto; }

/* ── 互動圖：版心與史印是線裝書的記號，網站已有麵包屑帶，收掉 ── */
body.xian .sheet > .banxin:not(.bx-foot),
body.xian .frame > .seal { display: none; }
body.xian .sheet::before { border-color: color-mix(in oklab, #C4A15A 60%, transparent); }

/* ── 電子報：報頭、雙線留著；紙紋與桌面陰影拿掉 ── */
body.skin:not(.xian) .sheet::before { background: none; mix-blend-mode: normal; }
body.skin:not(.xian) .sheet { background-image: none; }   /* 紙本身也鋪了一層雜訊紋 */
/* 標題後面的墨漬：原本靠紙的米黃襯底，白紙上顯得退色，不透明度提高兩成五 */
body.skin:not(.xian) .ez::after { opacity: min(1, calc(var(--o) * 1.25)); }
body.skin:not(.xian) .sheet { box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 12px 32px -18px rgb(0 0 0 / .18); }

/* ── 互動圖入口頁（body.skin-hero）：上方換成展品頁同一條牆色標題帶，圖自己的標題與說明拿掉；
   分頁列最右邊放回到展品頁的連結，各分頁的內容照圖自己的版面 ── */
/* 標題帶的寬度、留白跟展品頁一樣（跟頂列切齊），點進來不會變寬；只有下面的書葉照圖自己的寬度 */
/* 圖自己的 .xian.bold h1 把字型改成宋體粗體、右邊留給史印，標題帶的 h1 蓋回毛筆字 */
body.skin-hero .hall-band .page-title.brush { font-family: "TitleBrush", "Xingkai TC", "Kaiti TC", "Noto Serif TC", serif;
  font-weight: 400; line-height: 1.25; letter-spacing: .04em; margin: 0; }
/* 標題帶取代了麵包屑帶，跟下面的書葉之間留一段地面 */
body.skin-hero .xian .frame, body.skin-hero.xian .frame { padding-top: 28px; }

/* 回到展品頁：放在分頁列最右邊，跟著分頁列黏在視窗頂端；分頁多到放不下時自己換到下一行、仍靠右 */
nav.tabs .skin-tab-back { margin-left: auto; align-self: center; padding: .35rem 0 .35rem 1.2rem;
  font-family: "Noto Sans TC", "PingFang TC", sans-serif; font-size: .92rem; font-weight: 700; line-height: 1.5;
  color: var(--wall); text-decoration: none; white-space: nowrap; }
nav.tabs .skin-tab-back:hover { text-decoration: underline; text-decoration-color: #C4A15A; text-underline-offset: .22em; }
/* 著作圖的分頁列本來不黏頂（另外三類會）：比照另外三類，黏在視窗頂端、白底、上下留一點空 */
html.js nav.tabs.skin-tabs-stick { position: sticky; top: 0; z-index: 6; background: #FFFFFF; padding-top: .5rem; }
/* 事件圖分頁多，連結放在分頁下一行：分頁列排成每個分頁一欄的網格（欄數由 build 寫在 --skin-tabs），
   連結橫跨全部欄、靠右，右緣就對齊最後一個分頁；640px 以下分頁列改成左右滑動，照下面的窄螢幕規則 */
@media (min-width: 641px) {
  body.skin-hero nav.tabs.skin-tabs-below { display: grid; grid-template-columns: repeat(var(--skin-tabs), auto); justify-content: start; }
  nav.tabs.skin-tabs-below .skin-tab-back { grid-column: 1 / -1; justify-self: end; margin-left: 0; padding: .45rem 0 .1rem; }
}
/* 窄螢幕：只留「← 人物頁」；事件圖的分頁列在這個寬度改成左右滑動，連結釘在右緣，滑到哪都看得到 */
@media (max-width: 640px) {
  nav.tabs .skin-tab-back { position: sticky; right: 0; padding-left: .9rem; background: #FFFFFF; }
  .skin-tb-long { display: none; }
}

/* ── 互動圖的表頭（人物泳道圖）：原本是墨黑，放在白書葉上太重、跟網站不搭，改成這一朝的深牆色。
   --zhu-deep 由 build 依牆色換過（skin.wall_table），所以會跟著朝代走 ── */
body.xian .lanes thead th { background: var(--zhu-deep); }

/* ── 頂列的「展廳」選單：互動圖把所有 summary 前面加「＋」方框（.xian summary::before），頂列的選單也被套到，
   深色頂列上只剩一塊白方框。選擇器寫到 (0,2,3)，蓋過圖裡展開時的 .xian details[open]>summary::before ── */
.skin-chrome details.nav-halls > summary::before { display: none; }