/* ====================================================================
   塔羅牌義大全(2026-10-24):/tarot-cards 長文牌義頁、牌組總覽頁、總覽頁長文區的元件樣式。
   靜態檔(免 build),由 library/_tarot-assets 載入,?v= 跟檔案修改時間走(Cloudflare 快取靜態檔一年)。
   顏色一律用 Tailwind 色票變數(--color-*):classic 是宣紙金棕,cosmic(水墨夜空,html.theme-tarot)
   在 tarot-cosmic.css 重新定義了同名變數,所以大部分自動換色;深色底才需要的再用 html.theme-tarot 覆寫。
   ==================================================================== */

/* ── 頁內目錄(手機可收合;寬螢幕另有 wide-toc.js 在左側放目錄) ── */
.tl-toc { border: 1px solid color-mix(in srgb, var(--color-brand-200) 70%, transparent); border-radius: 1rem; padding: .85rem 1.15rem; }
.tl-toc > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .8125rem; letter-spacing: .14em; color: var(--color-brand-700); }
.tl-toc > summary::-webkit-details-marker { display: none; }
.tl-toc > summary::after { content: ""; width: .5rem; height: .5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s; flex-shrink: 0; }
.tl-toc[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.tl-toc ol { margin: .75rem 0 .15rem; padding-left: 1.4rem; list-style: decimal; font-size: .9rem; line-height: 1.85; color: var(--color-ink-700); }
.tl-toc a { color: inherit; text-decoration: none; }
.tl-toc a:hover { color: var(--color-brand-700); text-decoration: underline; }
.tl-toc ol li::marker { color: var(--color-brand-600); font-size: .8em; }

/* 長文 h2 錨點不要被固定導覽列蓋住 */
.tl-long [data-toc] { scroll-margin-top: 6.5rem; }

/* ── 區塊標題(非 prose 區) ── */
.tl-h2 { font-size: 1.375rem; line-height: 1.4; color: var(--color-ink-900); margin: 0 0 1.1rem; }
@media (min-width: 768px) { .tl-h2 { font-size: 1.6rem; } }
.tl-lead { margin: -.35rem 0 1.25rem; font-size: .9375rem; line-height: 1.8; color: var(--color-ink-500); }

/* ── 牌面解析:本站水墨牌面 / 偉特牌原版 ── */
.tl-face { display: grid; gap: 1rem; }
@media (min-width: 768px) { .tl-face.tl-face-2 { grid-template-columns: 1fr 1fr; } }
.tl-face-box { border-radius: 1rem; border: 1px solid color-mix(in srgb, var(--color-brand-200) 70%, transparent); padding: 1.1rem 1.25rem; }
.tl-face-box h3 { margin: 0 0 .5rem; font-size: .8125rem; letter-spacing: .16em; color: var(--color-brand-700); display: flex; align-items: center; gap: .45rem; }
.tl-face-box h3::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; opacity: .75; }
.tl-face-box p { margin: 0; font-size: .9875rem; line-height: 1.95; color: var(--color-ink-800); }
.tl-face-box p + p { margin-top: .75rem; }

/* ── 是非與時間 ── */
.tl-yn { display: grid; gap: 1rem; }
@media (min-width: 768px) { .tl-yn { grid-template-columns: 1fr 1fr; } }
.tl-yn-box { border-radius: 1rem; border: 1px solid color-mix(in srgb, var(--color-brand-200) 70%, transparent); padding: 1.1rem 1.25rem; }
.tl-yn-box h3 { margin: 0 0 .6rem; font-size: 1rem; color: var(--color-ink-900); }
.tl-yn-box p { margin: 0; font-size: .9375rem; line-height: 1.9; color: var(--color-ink-700); }
.tl-yn-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .7rem; }
.tl-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .65rem; border-radius: 999px; font-size: .8125rem; line-height: 1.5;
  border: 1px solid color-mix(in srgb, var(--color-brand-300) 70%, transparent); color: var(--color-ink-700); background: color-mix(in srgb, var(--color-paper-50) 70%, transparent); }
.tl-chip-up { border-color: color-mix(in srgb, var(--color-brand-500) 75%, transparent); color: var(--color-brand-800); background: color-mix(in srgb, var(--color-brand-100) 55%, transparent); }
.tl-chip-rev { border-color: color-mix(in srgb, var(--color-cinnabar-400) 55%, transparent); color: var(--color-cinnabar-700); background: color-mix(in srgb, var(--color-cinnabar-50) 70%, transparent); }

/* ── 範例解牌(老闆特別要的區塊:一題一張卡,問題當標題) ── */
.tl-readings { display: grid; gap: 1.1rem; }
.tl-reading { position: relative; border-radius: 1.1rem; padding: 1.25rem 1.25rem 1.15rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--color-brand-200) 75%, transparent);
  background: color-mix(in srgb, var(--color-paper-50) 80%, transparent); overflow: hidden; }
.tl-reading::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--color-brand-500); }
.tl-reading.is-rev::before { background: var(--color-cinnabar-400); }
@media (min-width: 768px) { .tl-reading { padding: 1.5rem 1.75rem 1.35rem 1.9rem; } }
.tl-reading-no { display: block; font-size: .75rem; letter-spacing: .2em; color: var(--color-brand-600); margin-bottom: .3rem; }
.tl-reading h3 { margin: 0; font-size: 1.1875rem; line-height: 1.5; color: var(--color-ink-900); }
@media (min-width: 768px) { .tl-reading h3 { font-size: 1.3rem; } }
.tl-reading-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: .7rem 0 0; }
.tl-reading-ctx { margin: .85rem 0 0; padding-left: .8rem; border-left: 2px solid color-mix(in srgb, var(--color-brand-300) 60%, transparent);
  font-size: .9375rem; line-height: 1.75; color: var(--color-ink-500); font-style: italic; }
.tl-reading-text { margin: .9rem 0 0; font-size: 1rem; line-height: 1.95; color: var(--color-ink-800); }
.tl-reading-go { display: inline-flex; align-items: center; gap: .3rem; margin-top: .9rem; font-size: .875rem; font-weight: 600; color: var(--color-brand-700); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent); padding-bottom: 1px; }
.tl-reading-go:hover { color: var(--color-cinnabar); }
.tl-reading-go svg, .tl-reading-go i { width: .95rem; height: .95rem; }

/* ── 常見組合 ── */
.tl-pairs { display: grid; gap: .9rem; }
@media (min-width: 768px) { .tl-pairs { grid-template-columns: 1fr 1fr; } }
.tl-pair { display: flex; gap: .9rem; align-items: flex-start; border-radius: 1rem; padding: .9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--color-brand-200) 70%, transparent); }
.tl-pair img { width: 3.5rem; height: auto; flex-shrink: 0; border-radius: .45rem; border: 1px solid color-mix(in srgb, var(--color-brand-200) 70%, transparent); }
.tl-pair-body { flex: 1 1 0%; min-width: 0; }
.tl-pair-name { display: inline-block; font-weight: 700; color: var(--color-ink-900); text-decoration: none; margin-bottom: .2rem; }
.tl-pair-name:hover { color: var(--color-brand-700); text-decoration: underline; }
.tl-pair-name .tl-plus { color: var(--color-brand-600); font-weight: 400; margin: 0 .2rem; }
.tl-pair p { margin: 0; font-size: .9375rem; line-height: 1.8; color: var(--color-ink-700); }

/* ── 抽到這張牌可以這樣做 ── */
.tl-advice { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; counter-reset: tl-a; }
.tl-advice li { counter-increment: tl-a; position: relative; padding: .15rem 0 .15rem 2.6rem; font-size: 1rem; line-height: 1.85; color: var(--color-ink-800); }
.tl-advice li::before { content: counter(tl-a); position: absolute; left: 0; top: .2rem; width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  border-radius: 50%; font-size: .85rem; font-weight: 700; color: var(--color-brand-800); border: 1px solid color-mix(in srgb, var(--color-brand-500) 70%, transparent);
  background: color-mix(in srgb, var(--color-brand-100) 55%, transparent); }

/* ── 縮圖格(相關的牌、牌組頁的牌卡) ── */
.tl-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
@media (min-width: 640px) { .tl-thumbs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tl-thumbs a { display: block; text-align: center; text-decoration: none; }
.tl-thumbs img { width: 100%; height: auto; border-radius: .75rem; border: 1px solid color-mix(in srgb, var(--color-brand-200) 70%, transparent); }
.tl-thumbs span { display: block; margin-top: .45rem; font-size: .875rem; color: var(--color-ink-800); }
.tl-thumbs a:hover span { color: var(--color-brand-700); }

.tl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .tl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .tl-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tl-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.tl-cardlink { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; border-radius: 1rem; padding: .75rem;
  border: 1px solid color-mix(in srgb, var(--color-brand-200) 70%, transparent); transition: border-color .2s, transform .2s; }
.tl-cardlink:hover { border-color: var(--color-brand-400); transform: translateY(-2px); }
.tl-cardlink img { width: 100%; height: auto; border-radius: .6rem; }
.tl-cardlink strong { font-size: 1rem; color: var(--color-ink-900); }
.tl-cardlink small { font-size: .8125rem; line-height: 1.6; color: var(--color-ink-500); }

/* ── 牌組入口(/tarot-cards 首屏下方、牌組頁底「其他牌組」) ── */
.tl-groups { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.tl-group { display: flex; gap: .8rem; align-items: center; text-decoration: none; border-radius: 1rem; padding: .7rem .9rem;
  border: 1px solid color-mix(in srgb, var(--color-brand-200) 75%, transparent); background: color-mix(in srgb, var(--color-paper-50) 70%, transparent);
  transition: border-color .2s, transform .2s; }
.tl-group:hover { border-color: var(--color-brand-400); transform: translateY(-2px); }
.tl-group img { width: 2.6rem; height: auto; flex-shrink: 0; border-radius: .35rem; }
.tl-group-body { flex: 1 1 0%; min-width: 0; }
.tl-group strong { display: block; font-size: 1rem; color: var(--color-ink-900); }
.tl-group small { display: block; font-size: .8125rem; line-height: 1.55; color: var(--color-ink-500); }
.tl-sec-more { display: inline-flex; align-items: center; gap: .25rem; font-size: .875rem; font-weight: 600; color: var(--color-brand-700); text-decoration: none; }
.tl-sec-more:hover { text-decoration: underline; }
.tl-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; }   /* 下邊距用 mb-4 / mb-5 寫在頁面上,跟原本標題一樣 */
.tl-sec-head h2 { margin: 0; }

/* ── 參考依據 ── */
.tl-src ul { margin: 0; padding-left: 1.25rem; list-style: disc; font-size: .9375rem; line-height: 1.9; color: var(--color-ink-700); }
.tl-src li::marker { color: var(--color-brand-500); }
.tl-note { margin-top: 1rem; font-size: .8125rem; line-height: 1.8; color: var(--color-ink-500); }

/* ── 寬螢幕(≥1280):wide-layout.css 會把參考資料頁的內容容器放寬到 1216px;長文改回好讀的行長,左邊留給 wide-toc.js 的目錄 ── */
@media (min-width: 1280px) {
  body[data-page^="library."] .w-full.min-w-0.mx-auto.tl-long { max-width: 48rem; margin-left: max(18rem, calc(50% - 16.5rem)); margin-right: auto; }
  .xd-toc-on .tl-long .tl-toc { display: none; }   /* wide-toc.js 真的在左側放了目錄(容器加 .xd-toc-on)才收掉內文那份 */
}

/* ====================================================================
   水墨夜空(cosmic):深色底的面板、文字對比
   ==================================================================== */
html.theme-tarot .tl-toc,
html.theme-tarot .tl-face-box,
html.theme-tarot .tl-yn-box,
html.theme-tarot .tl-pair,
html.theme-tarot .tl-cardlink { background: linear-gradient(160deg, rgba(36, 35, 72, .5), rgba(20, 21, 44, .45)); border-color: rgba(150, 156, 212, .17); }
html.theme-tarot .tl-reading { background: linear-gradient(160deg, rgba(40, 39, 80, .62), rgba(22, 23, 48, .55)); border-color: rgba(150, 156, 212, .2);
  box-shadow: 0 24px 48px -32px rgba(0, 0, 0, .9); }
html.theme-tarot .tl-reading::before { background: linear-gradient(180deg, #e2cf9c, #a18149); }
html.theme-tarot .tl-reading.is-rev::before { background: linear-gradient(180deg, #a9a5d8, #5c5f90); }
html.theme-tarot .tl-reading h3,
html.theme-tarot .tl-yn-box h3,
html.theme-tarot .tl-pair-name,
html.theme-tarot .tl-cardlink strong,
html.theme-tarot .tl-group strong,
html.theme-tarot .tl-h2 { color: #f1eef6; }
html.theme-tarot .tl-reading-text,
html.theme-tarot .tl-face-box p,
html.theme-tarot .tl-advice li { color: #dcd9ea; }
html.theme-tarot .tl-yn-box p,
html.theme-tarot .tl-pair p,
html.theme-tarot .tl-toc ol,
html.theme-tarot .tl-src ul { color: #cfcbe0; }
html.theme-tarot .tl-reading-ctx,
html.theme-tarot .tl-lead,
html.theme-tarot .tl-note,
html.theme-tarot .tl-cardlink small,
html.theme-tarot .tl-group small { color: #aaa6c6; }
html.theme-tarot .tl-reading-ctx { border-left-color: rgba(201, 168, 101, .35); }
html.theme-tarot .tl-chip { background: rgba(32, 33, 63, .7); border-color: rgba(150, 156, 212, .28); color: #d6d3e4; }
html.theme-tarot .tl-chip-up { background: rgba(201, 168, 101, .12); border-color: rgba(201, 168, 101, .5); color: #e9d9a8; }
html.theme-tarot .tl-chip-rev { background: rgba(120, 124, 196, .14); border-color: rgba(150, 156, 212, .45); color: #c9cbf0; }
html.theme-tarot .tl-advice li::before { background: rgba(201, 168, 101, .12); border-color: rgba(201, 168, 101, .5); color: #e9d9a8; }
html.theme-tarot .tl-group { background: linear-gradient(160deg, rgba(36, 35, 72, .55), rgba(20, 21, 44, .5)); border-color: rgba(150, 156, 212, .18); }
html.theme-tarot .tl-group:hover,
html.theme-tarot .tl-cardlink:hover { border-color: rgba(226, 207, 156, .5); }
html.theme-tarot .tl-reading-go,
html.theme-tarot .tl-sec-more,
html.theme-tarot .tl-toc > summary,
html.theme-tarot .tl-face-box h3,
html.theme-tarot .tl-reading-no { color: #e2cf9c; }
html.theme-tarot .tl-reading-go:hover { color: #fff; }
html.theme-tarot .tl-toc a:hover { color: #fff; }
html.theme-tarot .tl-pair img,
html.theme-tarot .tl-thumbs img { border-color: rgba(150, 156, 212, .2); }
html.theme-tarot .tl-thumbs span { color: #d6d3e4; }
html.theme-tarot .tl-thumbs a:hover span { color: #fff; }
/* wide-toc.js 的左側目錄:預設是宣紙配色,深色底改月白與古金 */
html.theme-tarot .xd-toc-title { color: #e2cf9c; }
html.theme-tarot .xd-toc ol { border-left-color: rgba(150, 156, 212, .25); }
html.theme-tarot .xd-toc a { color: #aaa6c6; }
html.theme-tarot .xd-toc a:hover,
html.theme-tarot .xd-toc a.is-on { color: #f1eef6; }
html.theme-tarot .xd-toc a.is-on { border-left-color: #c9a865; }

@media (prefers-reduced-motion: reduce) {
  .tl-group, .tl-cardlink { transition: none; }
  .tl-group:hover, .tl-cardlink:hover { transform: none; }
}

/* ── 長文欄寬:prose 預設 68ch 置中,這裡跟卡片區同寬、靠左對齊;牌義頁的第一節不套「導言」框(導言留給總覽頁的開場) ── */
/* 自帶 max-w-* 的 prose(總覽、牌組頁牌格以下的長文)不放寬:那些要維持 48rem 好讀行寬並置中 */
.tl-flow .prose-xuandeng:not([class*="max-w-"]) { max-width: none; margin-inline: 0; }
.tl-long .prose-xuandeng > p:first-of-type { font-size: inherit; line-height: inherit; color: inherit; padding: 0; border: 0; font-weight: inherit; margin: 0 0 1.15rem; }
html.theme-tarot .tc-lib .tl-long .prose-xuandeng > p:first-of-type { color: inherit; }
/* 區塊標題包在 prose 裡沿用章節 h2 樣式;cosmic 的 section h2 底線會跟 prose 的點線重複,拿掉 */
html.theme-tarot .tc-lib .prose-xuandeng h2::after { content: none; }