/* =========================================================================
   real-biz-chat · AB4「單表分類」
   A 的字與配色(襯線標題、深藍 + 磚紅、米白紙底)+ B 的密度(橫線一列一集)
   + 分類當成表上的一個欄位(3px 色帶 + 可篩的籤 + 一條分布條)。

   規格見 docs/08-status.md。這份樣式只服務這個節目,不跟其他子站共用——
   共用骨架正是前三個站排版走鐘的原因(issue #18–#27)。
   ========================================================================= */

:root {
  color-scheme: light;
  --paper:       #FAF8F4;
  --paper-2:     #F2EDE3;
  --paper-3:     #EAE3D6;
  --ink:         #14243A;
  --ink-2:       #44536A;
  --muted:       #7C7266;
  --rule:        #DFD7C9;
  --rule-strong: #C6BCA9;
  --brick:       #B0472A;
  --brick-wash:  #F3E4DC;
  --shadow:      rgba(20, 36, 58, .07);

  --cat-career:   #14243A;
  --cat-capital:  #1F5F4F;
  --cat-industry: #7A5A2E;
  --cat-founding: #B0472A;
  --cat-ai:       #2A5F7A;
  --cat-craft:    #8A3A4A;

  --serif: "Noto Serif TC", "Songti TC", Georgia, serif;
  --sans:  "Noto Sans TC", -apple-system, "Helvetica Neue", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --wide: 1020px;
  --prose: 40rem;
}

/* 深色不是把紙底反過來,是換一張紙:深藍當底、米白當墨。分類那六個色是為米白底挑的,
   直接沿用會在深底上糊成一片,所以整組另外調亮。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #101B2C; --paper-2: #17243A; --paper-3: #1F2E47;
    --ink: #EDE7DC; --ink-2: #B3BDCC; --muted: #96A0AF;
    --rule: #2A3950; --rule-strong: #3C4D68;
    --brick: #E08A66; --brick-wash: #2E2033; --shadow: rgba(0, 0, 0, .3);
    --cat-career: #7FA3D0; --cat-capital: #5FBFA3; --cat-industry: #C9A263;
    --cat-founding: #E08A66; --cat-ai: #6FB4D8; --cat-craft: #D2788B;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #101B2C; --paper-2: #17243A; --paper-3: #1F2E47;
  --ink: #EDE7DC; --ink-2: #B3BDCC; --muted: #96A0AF;
  --rule: #2A3950; --rule-strong: #3C4D68;
  --brick: #E08A66; --brick-wash: #2E2033; --shadow: rgba(0, 0, 0, .3);
  --cat-career: #7FA3D0; --cat-capital: #5FBFA3; --cat-industry: #C9A263;
  --cat-founding: #E08A66; --cat-ai: #6FB4D8; --cat-craft: #D2788B;
}

/* 分類色查表。色帶與籤共用同一個變數,改一處兩邊一起動。 */
[data-cat="career"]   { --cat: var(--cat-career); }
[data-cat="capital"]  { --cat: var(--cat-capital); }
[data-cat="industry"] { --cat: var(--cat-industry); }
[data-cat="founding"] { --cat: var(--cat-founding); }
[data-cat="ai"]       { --cat: var(--cat-ai); }
[data-cat="craft"]    { --cat: var(--cat-craft); }

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

/* hidden 的意思是「這東西現在不該存在」,任何 display 都不該蓋過它。
   瀏覽器預設的 [hidden]{display:none} 是元素選擇器等級,.row{display:grid}
   這種 class 規則會贏——結果是 JS 把 hidden 設好了、畫面一列都沒少(issue #30)。 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brick); text-underline-offset: .18em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; text-wrap: balance; line-height: 1.35; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }

/* ---------- 頁首:節目名 + 主題鈕 ---------- */
.topbar {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 10;
}
.topbar > .wrap {
  display: flex; align-items: center; gap: 1rem;
  min-height: 3.25rem;
}
.topbar a.home {
  font-family: var(--serif); font-weight: 700; font-size: .95rem;
  color: var(--ink); text-decoration: none; letter-spacing: .01em;
}
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.topbar nav a { color: var(--ink-2); text-decoration: none; font-size: .85rem; }
.topbar nav a:hover, .topbar nav a[aria-current] { color: var(--brick); }
.tgl {
  border: 1px solid var(--rule); background: none; color: var(--ink-2);
  font: inherit; font-size: .78rem; line-height: 1; cursor: pointer;
  padding: .42rem .6rem; border-radius: 2px;
}
.tgl:hover { border-color: var(--rule-strong); color: var(--ink); }

/* ---------- 報頭 ---------- */
.masthead { padding: clamp(2.5rem, 6vw, 4.5rem) 0 2rem; }
.masthead h1 {
  font-size: clamp(2rem, 5.2vw, 3.1rem);
  margin: 0 0 .6rem; letter-spacing: -.01em;
}
.masthead .lede {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1rem, 2.2vw, 1.2rem); color: var(--ink-2);
  max-width: 34rem; margin: 0 0 1.4rem;
}
.byline {
  font-size: .82rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: .35rem 1.25rem;
  padding-top: 1rem; border-top: 1px solid var(--rule);
}
.byline b { font-weight: 500; color: var(--ink-2); }

.intro { max-width: var(--prose); margin: 2rem 0 0; }
.intro p { margin: 0 0 .9rem; color: var(--ink-2); }

/* ---------- 數字 ---------- */
.stats {
  display: flex; flex-wrap: wrap; gap: 0 2.5rem;
  margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--rule);
}
.stats div { display: flex; align-items: baseline; gap: .4rem; }
.stats .v { font-family: var(--mono); font-size: 1.15rem; font-weight: 500; color: var(--ink); }
.stats .l { font-size: .78rem; color: var(--muted); }

/* ---------- 分布條 ---------- */
.dist { margin: 3rem 0 1.25rem; }
.dist h2 {
  font-size: .74rem; font-family: var(--sans); font-weight: 500;
  letter-spacing: .14em; color: var(--muted); text-transform: uppercase;
  margin: 0 0 .7rem;
}
.bar { display: flex; height: 10px; overflow: hidden; border-radius: 1px; }
.bar span { background: var(--cat); }
.bar span + span { margin-left: 2px; }

/* ---------- 分類籤(同時是篩選鈕)---------- */
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: .9rem 0 0; }
.chip {
  font: inherit; font-size: .82rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .72rem; border-radius: 2px;
  border: 1px solid var(--rule); background: none; color: var(--ink-2);
}
.chip::before {
  content: ""; width: 3px; height: .85em; background: var(--cat, var(--muted)); border-radius: 1px;
}
.chip .n { font-family: var(--mono); font-size: .76rem; color: var(--muted); }
.chip:hover { border-color: var(--rule-strong); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--paper-2); border-color: var(--rule-strong); color: var(--ink);
}
.chip[aria-pressed="true"] .n { color: var(--ink-2); }

/* ---------- 集數表 ---------- */
.list { margin: 1.6rem 0 0; border-top: 1px solid var(--rule-strong); }
.list .head {
  display: grid; grid-template-columns: 3.2rem 1fr 11rem 5.5rem 4rem;
  gap: 1rem; padding: .5rem 0 .5rem .9rem;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--rule);
}
.row {
  display: grid; grid-template-columns: 3.2rem 1fr 11rem 5.5rem 4rem;
  gap: 1rem; align-items: baseline;
  padding: .85rem 0 .85rem .9rem;
  border-bottom: 1px solid var(--rule);
  border-left: 3px solid var(--cat, var(--rule-strong));
  text-decoration: none; color: inherit;
}
.row:hover { background: var(--paper-2); }
.row .ep { font-family: var(--mono); font-size: .82rem; color: var(--muted); }
.row .ttl { font-family: var(--serif); font-weight: 500; font-size: 1.02rem; color: var(--ink); }
/* 導言鎖成最多兩行:39 集在桌機寬度剛好都是兩行,列高一致純屬規格(NOTE-SPEC 要求
   導言 40 到 60 字)的副作用。換個寬度或哪天有人寫長了,表格就會變成參差的階梯。 */
.row .sub {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--sans); font-weight: 400;
  font-size: .82rem; line-height: 1.6; color: var(--muted); margin-top: .15rem;
}
.row .who { font-size: .82rem; color: var(--ink-2); }
.row .when, .row .len { font-family: var(--mono); font-size: .78rem; color: var(--muted); }
.row:hover .ttl { color: var(--brick); }
.empty { padding: 2.5rem .9rem; color: var(--muted); font-size: .9rem; }

/* ---------- 跨集主題 ---------- */
.themes { margin: 3.5rem 0 0; }
.themes h2, .block h2 {
  font-size: 1.35rem; margin: 0 0 .3rem;
}
.themes > p, .block > p.hint {
  color: var(--muted); font-size: .85rem; margin: 0 0 1.2rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--rule-strong);
}
.theme { padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.theme h3 {
  font-size: 1.02rem; font-weight: 500; margin: 0 0 .35rem;
}
.theme p { margin: 0 0 .55rem; color: var(--ink-2); font-size: .92rem; max-width: var(--prose); }
.theme .eps { display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.theme .eps a {
  font-family: var(--mono); font-size: .76rem; text-decoration: none;
  color: var(--ink-2); border: 1px solid var(--rule); border-radius: 2px;
  padding: .2rem .4rem;
}
.theme .eps a:hover { border-color: var(--brick); color: var(--brick); }

/* ---------- 單集頁 ---------- */
.ep-wrap { max-width: 46rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
.crumb { padding: 2rem 0 0; display: flex; align-items: center; gap: .6rem; font-size: .8rem; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--brick); }
.tag {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 2px; padding: .22rem .5rem;
  text-decoration: none;
}
.tag::before { content: ""; width: 3px; height: .8em; background: var(--cat, var(--muted)); border-radius: 1px; }
.tag:hover { border-color: var(--rule-strong); color: var(--ink); }

.ep-head { padding: 1.2rem 0 1.6rem; border-bottom: 1px solid var(--rule-strong); }
.ep-head .no { font-family: var(--mono); font-size: .82rem; color: var(--muted); }
.ep-head h1 { font-size: clamp(1.6rem, 4.4vw, 2.3rem); margin: .3rem 0 .7rem; }
.ep-head .lede {
  font-family: var(--serif); font-weight: 500; font-size: 1.05rem;
  color: var(--ink-2); margin: 0 0 1.2rem;
}
.facts { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-size: .82rem; color: var(--muted); }
.facts b { font-weight: 500; color: var(--ink-2); }
.facts .num { font-size: .78rem; }

.block { margin: 2.6rem 0 0; }
.block > h2 {
  font-size: .74rem; font-family: var(--sans); font-weight: 500;
  letter-spacing: .14em; color: var(--muted); text-transform: uppercase;
  margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--rule);
}
.pt { padding: .7rem 0; border-bottom: 1px solid var(--rule); }
.pt b { font-family: var(--serif); font-weight: 700; color: var(--ink); }
.pt span { color: var(--ink-2); }

/* 時間軸是這個站的主角:時碼等寬靠左成一直行,眼睛可以直接往下掃。 */
.tl-row {
  display: grid; grid-template-columns: 4.2rem 1fr; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--rule);
}
.tl-row a.t {
  font-family: var(--mono); font-size: .82rem; color: var(--brick);
  text-decoration: none; font-variant-numeric: tabular-nums;
}
.tl-row a.t:hover { text-decoration: underline; }
.tl-row .seg { font-family: var(--serif); font-weight: 500; color: var(--ink); }
.tl-row .note { display: block; font-size: .9rem; color: var(--ink-2); margin-top: .15rem; }

.q { padding: 1rem 0 1rem 1.1rem; border-left: 3px solid var(--brick); margin: 0 0 .8rem; }
.q p { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); margin: 0 0 .35rem; }
.q a { font-family: var(--mono); font-size: .78rem; text-decoration: none; }

.term { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
.term dt { font-weight: 500; color: var(--ink); }
.term dd { margin: 0; color: var(--ink-2); font-size: .92rem; }
dl { margin: 0; }

.more li { color: var(--ink-2); margin-bottom: .5rem; }
.more { padding-left: 1.1rem; margin: 0; }

.updown { display: flex; gap: 1rem; margin: 3rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--rule-strong); }
.updown a {
  flex: 1; text-decoration: none; color: inherit;
  border: 1px solid var(--rule); border-radius: 2px; padding: .8rem 1rem;
}
.updown a:hover { border-color: var(--rule-strong); background: var(--paper-2); }
.updown .dir { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.updown .t { font-family: var(--serif); font-weight: 500; display: block; margin-top: .2rem; }
/* 第一集沒有上一集、最後一集沒有下一集,那一側放一個空的 span 佔位。
   沒有 flex: 1 的話剩下那顆會撐滿整列,「下一集」就孤零零地靠右站著。 */
.updown > span { flex: 1; }
.updown a:last-child { text-align: right; }
.updown .dir { display: block; }

/* ---------- 術語速查 ---------- */
.gl { padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.gl h3 { font-size: 1rem; font-weight: 500; margin: 0 0 .3rem; }
.gl p { margin: 0 0 .3rem; color: var(--ink-2); font-size: .9rem; }
.gl .from { font-family: var(--mono); font-size: .74rem; }

/* ---------- 頁尾 ---------- */
footer {
  margin-top: 4rem; border-top: 1px solid var(--rule-strong);
  padding: 1.6rem 0 3rem; font-size: .8rem; color: var(--muted);
}
footer .wrap { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--brick); }

/* ---------- 窄螢幕 ---------- */
@media (max-width: 860px) {
  .list .head { display: none; }
  .row { grid-template-columns: 3.2rem 1fr; gap: .2rem 1rem; }
  .row .sub { -webkit-line-clamp: 3; }
  .row .who { grid-column: 2; font-size: .8rem; }
  .row .when, .row .len { grid-column: 2; display: inline; }
  .row .when::after { content: " ·"; }
  .term { grid-template-columns: 1fr; gap: .1rem; }
  .updown { flex-direction: column; }
  .updown a:last-child { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- 術語速查的篩選框 ---------- */
.find {
  width: 100%; margin-top: 1.2rem; font: inherit; font-size: .95rem;
  padding: .6rem .8rem; border-radius: 2px;
  border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink);
}
.find::placeholder { color: var(--muted); }
.find:focus { border-color: var(--rule-strong); outline: none; }
.find:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }

/* 金句的中譯:原話下面一行,比原話小、比較淡 */
.q .trans { margin:2px 0 0; font-size:.9em; color:var(--mut,#5b5f66); }