/* ============================================================
   Title:  Stylesheet for the LDA course site
   File:   assets/lda_course.css
   Author: HTYu (built with Claude)
   Date:   2026-09-15
   ============================================================
   刻意與《變化的分析》網頁版（lda_book_zh.css）共用同一套設計語彙：
   同樣的三組 chrome 配色（深墨藍／墨綠／赭紅）、同樣的字體堆疊、同樣
   的深色模式處理方式，讓兩個站看起來是同一個系列。差別在版面：書站是
   長篇閱讀（單欄 measure + 左側章節 TOC），課程站是索引與檔案清單
   （卡片格線 + 週次表格），因此這裡不複製書站的排版，只沿用 tokens。
   ============================================================ */

/* ---------- tokens：與書站同源 ---------- */
:root {
  --lda-blue:   #0072B2;
  --lda-green:  #1B7F5C;
  --lda-orange: #C15A00;
  --lda-purple: #7A4FA3;
  --lda-red:    #B23A48;
  --lda-gray:   #4D4D4D;

  --ink:        #1A1A1A;
  --ink-soft:   #4A4A4A;
  --ink-faint:  #767676;

  --serif: "Noto Serif TC", "Noto Serif CJK TC", "Palatino Linotype",
           "Book Antiqua", Palatino, "Songti TC", "PMingLiU", "新細明體", serif;
  --sans:  "Noto Sans TC", "Noto Sans CJK TC", "Helvetica Neue", Helvetica,
           Arial, "PingFang TC", "Microsoft JhengHei", "微軟正黑體", sans-serif;
  --mono:  "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono",
           "Noto Sans Mono CJK TC", monospace;

  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, .07);
  --topbar-h: 60px;
}

/* chrome 配色三選一，與書站的 data-theme 值一致（ink／moss／claret） */
:root,
:root[data-theme="ink"] {
  --chrome:      #16283F;
  --chrome-2:    #1F3654;
  --chrome-3:    #2B4668;
  --chrome-ink:  #EDF1F6;
  --chrome-soft: #A9B8CC;
  --chrome-rule: #2C4159;
  --accent:      #C98A46;
  --accent-ink:  #1B2A41;
  --link:        #15618F;
  --page:        #FBF9F5;
  --surface:     #F4F1EA;
  --surface-2:   #EBE7DE;
  --rule:        #E2DDD2;
  --rule-strong: #BEB6A6;
}
:root[data-theme="moss"] {
  --chrome:      #1E3A32;
  --chrome-2:    #27493F;
  --chrome-3:    #335A4D;
  --chrome-ink:  #EDF3F0;
  --chrome-soft: #A8C0B6;
  --chrome-rule: #2F4C42;
  --accent:      #C08A3E;
  --accent-ink:  #16302A;
  --link:        #15705A;
  --page:        #FAF9F5;
  --surface:     #F1F3EE;
  --surface-2:   #E7EAE2;
  --rule:        #DFE2D8;
  --rule-strong: #B7BCAA;
}
:root[data-theme="claret"] {
  --chrome:      #4A1F30;
  --chrome-2:    #5E2A3E;
  --chrome-3:    #73374D;
  --chrome-ink:  #F6EDF1;
  --chrome-soft: #CBA9B6;
  --chrome-rule: #5C2C3E;
  --accent:      #C8913F;
  --accent-ink:  #3E1826;
  --link:        #97364F;
  --page:        #FBF8F6;
  --surface:     #F5EFEC;
  --surface-2:   #ECE3DF;
  --rule:        #E4D8D3;
  --rule-strong: #C0ABA4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #E8EAED; --ink-soft: #B8BDC4; --ink-faint: #8A9099;
    --lda-blue: #4BA6E0; --lda-green: #46B78C; --lda-orange: #E08A3C;
    --lda-purple: #A98BD0; --lda-red: #DF7280; --lda-gray: #9BA1A8;
  }
  :root, :root[data-theme="ink"] {
    --page: #14171A; --surface: #1B1F23; --surface-2: #22262B;
    --rule: #2E343A; --rule-strong: #454C54;
    --chrome: #101820; --chrome-2: #182430; --chrome-3: #23323F;
    --chrome-rule: #24313C; --link: #6FB6E4;
  }
  :root[data-theme="moss"] {
    --page: #141816; --surface: #1B211E; --surface-2: #222A26;
    --rule: #2C3833; --rule-strong: #44544C;
    --chrome: #12211C; --chrome-2: #1B302A; --chrome-3: #264035;
    --chrome-rule: #22382F; --link: #63C0A2;
  }
  :root[data-theme="claret"] {
    --page: #171315; --surface: #1F191B; --surface-2: #272022;
    --rule: #362C2F; --rule-strong: #524448;
    --chrome: #2A1220; --chrome-2: #3A1B2B; --chrome-3: #4A2537;
    --chrome-rule: #3B2030; --link: #E09B7E;
  }
}

/* ---------- 基礎 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 12px); }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--page);
  padding-top: var(--topbar-h);
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.35; margin: 0 0 .5em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.3rem; margin-top: 2.2rem; padding-bottom: .35rem; border-bottom: 2px solid var(--rule-strong); }
h3 { font-size: 1.08rem; margin-top: 1.6rem; color: var(--chrome-2); }
@media (prefers-color-scheme: dark) { h3 { color: var(--accent); } }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.5em; }
li { margin-bottom: .35em; }

code, kbd { font-family: var(--mono); font-size: .875em;
  background: var(--surface-2); padding: .1em .35em; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- 頂列 ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 clamp(.75rem, 3vw, 1.5rem);
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--chrome);
  border-bottom: 1px solid var(--chrome-rule);
  color: var(--chrome-ink);
}
.brand { display: flex; flex-direction: column; line-height: 1.2; color: var(--chrome-ink); flex: none; }
.brand:hover { text-decoration: none; }
.brand-title { font-family: var(--serif); font-size: 1.12rem; font-weight: 700; letter-spacing: .02em; }
.brand-sub { font-size: .76rem; color: var(--chrome-soft); }

.topbar-links { display: flex; gap: .15rem; margin-left: auto; flex-wrap: wrap; }
.topbar-links a {
  color: var(--chrome-soft); font-size: .88rem;
  padding: .35rem .6rem; border-radius: 6px; white-space: nowrap;
}
.topbar-links a:hover { color: var(--chrome-ink); background: var(--chrome-2); text-decoration: none; }
.topbar-links a[aria-current="page"] { color: var(--accent); background: var(--chrome-2); }

.theme-picker { display: flex; gap: .3rem; flex: none; }
.theme-picker .swatch {
  width: 18px; height: 18px; padding: 0; border-radius: 50%;
  border: 1px solid var(--chrome-rule); cursor: pointer; background: none;
}
.theme-picker .swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; }
.theme-picker .swatch[data-set-theme="ink"]    span { background: #16283F; }
.theme-picker .swatch[data-set-theme="moss"]   span { background: #1E3A32; }
.theme-picker .swatch[data-set-theme="claret"] span { background: #4A1F30; }
.theme-picker .swatch[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 720px) {
  .brand-sub { display: none; }
  .topbar-links a { padding: .3rem .4rem; font-size: .82rem; }
}

/* ---------- 版面 ---------- */
.wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 2rem) 4rem;
  padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
}
.lede { font-size: 1.04rem; color: var(--ink-soft); max-width: 46rem; }

.page-head { margin-bottom: 1.5rem; }
.page-head h1 { margin-bottom: .3rem; }
.eyebrow {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); font-family: var(--sans); margin: 0 0 .4rem;
}

/* ---------- 首頁 hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--chrome) 0%, var(--chrome-3) 100%);
  color: var(--chrome-ink);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 5vw, 2.75rem);
  margin-bottom: 2rem;
}
.hero h1 { color: #fff; margin-bottom: .35rem; font-size: clamp(1.5rem, 4.5vw, 2.1rem); }
.hero .hero-sub { color: var(--chrome-soft); margin-bottom: .2rem; }
.hero .hero-meta { color: var(--chrome-soft); font-size: .9rem; margin-bottom: 1.25rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.btn {
  display: inline-block; padding: .55rem 1.1rem; border-radius: 6px;
  font-size: .92rem; font-weight: 500; border: 1px solid transparent;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border-color: var(--chrome-soft); color: var(--chrome-ink); }
.btn-ghost:hover { background: rgba(255,255,255,.1); }

/* ---------- 卡片格線 ---------- */
.cards {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  margin: 1.25rem 0 2rem; padding: 0; list-style: none;
}
.card {
  display: block; padding: 1.1rem 1.2rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  color: inherit;
}
a.card:hover { text-decoration: none; box-shadow: var(--shadow-md); border-left-color: var(--link); }
.card h3 { margin: 0 0 .3rem; font-family: var(--sans); font-size: 1rem; font-weight: 700; color: var(--ink); }
.card p { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.6; }

/* ---------- 公告 ---------- */
.notices { list-style: none; padding: 0; margin: 0 0 2rem; }
.notices li {
  display: flex; gap: .9rem; align-items: baseline;
  padding: .6rem .9rem; border-left: 3px solid var(--lda-orange);
  background: var(--surface); border-radius: 0 6px 6px 0; margin-bottom: .5rem;
}
.notices time { font-family: var(--mono); font-size: .8rem; color: var(--ink-faint); flex: none; }

/* ---------- 表格 ---------- */
.table-scroll { overflow-x: auto; margin: 1rem 0 2rem; }
table.grid { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .92rem; }
table.grid th, table.grid td {
  padding: .6rem .7rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
table.grid thead th {
  border-bottom: 2px solid var(--rule-strong); border-top: 2px solid var(--rule-strong);
  font-family: var(--sans); font-size: .82rem; letter-spacing: .04em;
  color: var(--ink-soft); white-space: nowrap;
}
table.grid tbody tr:hover { background: var(--surface); }
table.grid td.wk { font-family: var(--mono); white-space: nowrap; color: var(--ink-faint); }
table.grid tr.is-current td { background: color-mix(in srgb, var(--accent) 12%, var(--page)); }
table.grid tr.is-current td.wk { color: var(--ink); font-weight: 700; }

/* ---------- 檔案清單 ---------- */
.files { list-style: none; padding: 0; margin: .4rem 0 0; }
.files li { margin: 0 0 .3rem; font-size: .9rem; }
.files a::before,
.files .pending::before {
  content: ""; display: inline-block; width: .85em; height: .85em;
  margin-right: .45em; vertical-align: -.05em;
  background: currentColor; opacity: .55;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.f-pdf  { --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M9 1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V5L9 1Zm0 1.5L11.5 5H9V2.5Z"/></svg>'); }
.f-data { --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 1c3 0 5 .9 5 2v10c0 1.1-2 2-5 2s-5-.9-5-2V3c0-1.1 2-2 5-2Zm0 1c-2.4 0-4 .6-4 1s1.6 1 4 1 4-.6 4-1-1.6-1-4-1Z"/></svg>'); }
.f-code { --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M5.5 3.5 1 8l4.5 4.5 1-1L3.5 8l3-3.5-1-1Zm5 0-1 1 3 3.5-3 3.5 1 1L15 8l-4.5-4.5Z"/></svg>'); }
.f-doc  { --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 1h7l3 3v11H3V1Zm2 5h6v1H5V6Zm0 3h6v1H5V9Zm0 3h4v1H5v-1Z"/></svg>'); }
.f-link { --icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.5 9.5a3 3 0 0 0 4.2 0l2-2a3 3 0 1 0-4.2-4.2l-1 1 1 1 1-1a1.6 1.6 0 1 1 2.2 2.2l-2 2a1.6 1.6 0 0 1-2.2 0l-1 1Zm3-3a3 3 0 0 0-4.2 0l-2 2a3 3 0 1 0 4.2 4.2l1-1-1-1-1 1a1.6 1.6 0 1 1-2.2-2.2l2-2a1.6 1.6 0 0 1 2.2 0l1-1Z"/></svg>'); }

.pending { color: var(--ink-faint); }
.pending .tag { margin-left: .3rem; }

.tag {
  display: inline-block; font-size: .72rem; line-height: 1.6;
  padding: 0 .45em; border-radius: 4px; font-family: var(--sans);
  background: var(--surface-2); color: var(--ink-faint); border: 1px solid var(--rule);
  vertical-align: .05em; white-space: nowrap;
}
.tag-soon { background: color-mix(in srgb, var(--lda-orange) 14%, var(--page)); color: var(--lda-orange); border-color: transparent; }
.tag-lms  { background: color-mix(in srgb, var(--lda-purple) 14%, var(--page)); color: var(--lda-purple); border-color: transparent; }
.tag-ch   { background: color-mix(in srgb, var(--lda-blue) 12%, var(--page)); color: var(--lda-blue); border-color: transparent; }

/* ---------- 提示方塊 ---------- */
.note {
  border: 1px solid var(--rule); border-left: 4px solid var(--lda-blue);
  background: color-mix(in srgb, var(--lda-blue) 6%, var(--page));
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.2rem; margin: 1.25rem 0;
}
.note.warn { border-left-color: var(--lda-red); background: color-mix(in srgb, var(--lda-red) 6%, var(--page)); }
.note > :last-child { margin-bottom: 0; }
.note-title { font-family: var(--sans); font-weight: 700; font-size: .92rem; margin: 0 0 .4rem; }

/* ---------- 週次詳細頁 ---------- */
.week-nav { display: flex; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 0;
  padding-top: 1rem; border-top: 1px solid var(--rule); font-size: .9rem; }
.week-block { margin-bottom: 1.75rem; }
.week-block h3 { margin-top: 0; }

/* ---------- 頁尾 ---------- */
.site-foot {
  border-top: 1px solid var(--rule); margin-top: 3rem;
  padding: 1.5rem clamp(1rem, 4vw, 2rem) 2.5rem;
  padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
  font-size: .85rem; color: var(--ink-faint);
}
.site-foot .inner { max-width: 62rem; margin: 0 auto; }
.site-foot p { margin: 0 0 .25rem; }

/* ---------- 檢查頁 ---------- */
.chk-ok   { color: var(--lda-green); font-weight: 700; }
.chk-bad  { color: var(--lda-red); font-weight: 700; }
.chk-skip { color: var(--ink-faint); }

@media print {
  .topbar, .theme-picker, .week-nav { display: none !important; }
  body { padding-top: 0; }
}

/* ---------- 三段式課堂規劃 ---------- */
ol.plan { list-style: none; counter-reset: seg; padding-left: 0; margin: .6rem 0 0; }
ol.plan li {
  counter-increment: seg;
  position: relative;
  padding: .7rem .9rem .7rem 2.6rem;
  margin-bottom: .5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .93rem; line-height: 1.7;
}
ol.plan li::before {
  content: counter(seg);
  position: absolute; left: .85rem; top: .72rem;
  width: 1.35em; height: 1.35em; line-height: 1.35em; text-align: center;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-family: var(--mono); font-size: .78rem; font-weight: 700;
}

/* 複習週在進度表中的標示 */
table.grid tr.is-review td { background: var(--surface-2); }
table.grid tr.is-review td.wk { font-weight: 700; color: var(--ink-soft); }