/*
 * 站台樣式。由 core/publish.py 原封不動複製到站台 repo 的 styles.css。
 *
 * 這裡是 tuning surface —— 想調外觀就改這個檔,不必動 Python。
 * 站台 repo 裡那份是產出,手改會在下次匯出時被蓋掉。
 *
 * 配色取自實驗室自己的圖表(Hi-C PCA / network segmentation),不是隨便挑的:
 *   teal   #0d9488  PCA 那一支
 *   olive  #84a800  network clustering 那一支
 *   navy   #0f2233  圖表的深色文字
 */

:root {
  --ink: #0f2233;          /* 深靛藍:頁首與標題 */
  --teal: #0d9488;
  --olive: #84a800;
  --rule: #e3e8ec;
  --muted: #5b6b7a;
}
/* ---------------------------------------------------------------- 頁首 */
/* logo 是淺灰(#f0f0f0),與白底對比只有 1.14:1 —— 必須配深色頁首才看得見 */
.navbar {
  background: var(--ink) !important;
  border-bottom: 3px solid var(--teal);
}
.navbar .navbar-brand img { max-height: 34px; width: auto; }
.navbar .nav-link,
.navbar .dropdown-item,
.navbar .navbar-toggler-icon { color: #dfe6ec !important; }
.navbar .nav-link:hover,
.navbar .nav-link.active { color: #fff !important; }
.navbar .nav-link.active { box-shadow: inset 0 -3px 0 var(--olive); }
.navbar .dropdown-menu {
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, .12);
}
.navbar .dropdown-item:hover { background: rgba(255, 255, 255, .08); }

/* ------------------------------------------------------------ 首頁 hero */
/* 有 hero 的頁面隱藏 Quarto 自動產生的標題區塊 —— 否則頁面上會有兩個 h1
   (Quarto 的 title: 一個、hero 裡一個),對讀螢幕軟體與搜尋引擎都是雜訊。
   title: 仍必須保留,<title> 與 Open Graph 用得到。 */
body:has(.hero) #title-block-header { display: none; }

/* description 是為搜尋引擎寫的(≤160 字、含關鍵字),不是頁面文案 ——
   Quarto 會把它顯示成副標,結果跟 h1 與開頭段落重複。
   用 description-meta 可以不顯示,但那樣 og:description 會是空的(實測),
   分享連結時就沒有摘要。所以保留 description 供 meta 與 Open Graph 使用,
   視覺上藏起來。display:none 也會從無障礙樹移除,不會被重複朗讀。 */
#title-block-header .description { display: none; }

/* 純色深底,不放圖 —— 版面靠字型層次與留白,不靠裝飾。 */
.hero {
  background: var(--ink);
  color: #fff;
  margin: -1.5rem -1rem 2.5rem;
  padding: 3.5rem 1rem 3rem;
}
.hero-inner { max-width: 54rem; margin: 0 auto; padding: 0 .5rem; }
.hero h1 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 .6rem; font-weight: 600; }
.hero p { color: #c9d6e2; max-width: 40rem; margin: 0; line-height: 1.75; }
.hero .tagline { color: var(--olive); font-weight: 600; letter-spacing: .08em;
                 text-transform: uppercase; font-size: .78rem; margin-bottom: .8rem; }

/* ---------------------------------------------------------------- 內文 */
main { max-width: 54rem; }
main h2 {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: .35rem;
  margin-top: 2.6rem;
}
main h3 { color: var(--teal); margin-top: 1.8rem; font-size: 1.05rem; }
main a { color: #0b6e66; }
main a:hover { color: var(--olive); }

/* 研究方向做成卡片,長清單讀起來才有層次 */
.card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card-grid > div {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--teal);
  border-radius: 3px;
  padding: 1rem 1.1rem;
  background: #fbfcfd;
}

/* --------------------------------------------------- PI 頁的速覽 */
/* 緊湊、低調 —— 這是給趕時間的訪客(審查委員、邀約者)三秒內看完的區塊,
   不該搶走簡介的注意力。 */
.at-a-glance {
  border-left: 3px solid var(--teal);
  background: #f6f9fa;
  padding: .8rem 1rem;
  margin: 0 0 1.4rem;
  font-size: .94rem;
  line-height: 1.85;
}
.at-a-glance p { margin: 0; }

/* 通訊作者星號的說明。放小、放淡 —— 它是註腳不是內容。 */
.pub-footnote {
  display: block;
  margin-top: .4rem;
  font-size: .82rem;
  color: var(--muted);
}

/* ---------------------------------------------------------- News */
/* 日期用等寬數字並固定寬度,多則排在一起時左緣才會對齊 —— 不對齊的日期欄
   會讓人一則一則地讀,對齊的可以整欄掃過去。 */
.news-item {
  display: grid;
  grid-template-columns: 5.6rem auto 1fr;
  gap: .1rem .7rem;
  align-items: baseline;
  padding: .55rem 0;
  border-bottom: 1px solid var(--rule);
}
/* pandoc 把 ::: 區塊裡的每一段各包成一個 <p>,所以 .news-date 與 .news-cat
   不是 grid 的直接子元素 —— 前兩欄因此永遠空著,整則消息被擠到第三欄,
   左邊多出一塊白。(與 pi 頁大頭貼被 <figure> 蓋掉浮動是同一類問題:
   Quarto 產生的包裝層會打斷你以為直接生效的版面規則。)
   display: contents 讓那層 <p> 從版面上消失,裡面的 span 直接變成 grid item。 */
.news-item > p:first-child { display: contents; }
.news-item > p { margin: 0; grid-column: 3; }
.news-date {
  grid-column: 1;
  font-variant-numeric: tabular-nums;
  font-size: .85rem;
  color: var(--muted);
}
.news-cat {
  grid-column: 2;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .1rem .45rem;
  border-radius: 2px;
  color: #fff;
  white-space: nowrap;
}
/* 每類一個顏色。同色的話 badge 就只是裝飾,分不出類別就沒有存在意義。 */
.news-cat-paper   { background: var(--teal); }
.news-cat-grant   { background: #b45309; }
.news-cat-talk    { background: #6d28d9; }
.news-cat-award   { background: #b91c1c; }
.news-cat-student { background: #0369a1; }
.news-cat-service { background: var(--olive); }

.news-more { display: inline-block; margin-top: .8rem; font-weight: 600; }

@media (max-width: 34rem) {
  /* 窄螢幕改成兩行:日期與類別一行,內文一行 */
  .news-item { grid-template-columns: 5.6rem auto; }
  .news-item > p { grid-column: 1 / -1; margin-top: .25rem; }
}

.bib-download {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: .88rem;
  padding: .25rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: #fbfcfd;
  text-decoration: none;
}

/* ------------------------------------------------------- 著作卡片 */
.pub-card {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--teal);
  border-radius: 3px;
  padding: 1rem 1.2rem .9rem;
  margin: 0 0 1rem;
  background: #fbfcfd;
}
.pub-card h4 { margin: .1rem 0 .45rem; font-size: 1.02rem; line-height: 1.45; }
.pub-card h4 a { text-decoration: none; }
.pub-card h4 a:hover { text-decoration: underline; }
.pub-card > p { margin: .3rem 0; }

/* 角色 badge。用 olive 與 teal 區隔:第一作者與通訊作者是不同的貢獻,
   同一個顏色會讓人以為是同一件事。 */
.pub-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .12rem .5rem;
  border-radius: 2px;
  background: var(--teal);
  color: #fff;
}
.pub-badge + .pub-badge { background: var(--olive); margin-left: .3rem; }

.pub-meta { font-size: .82rem; color: var(--muted); letter-spacing: .02em; }

/* why it matters —— 與作者清單區隔,讀者掃過時能一眼找到「這篇在講什麼」 */
.pub-why {
  margin: .6rem 0 0;
  padding-left: .9rem;
  border-left: 2px solid var(--rule);
  font-size: .92rem;
  color: #33414e;
}

/* PI 頁的大頭貼。
   markdown 的 ![](…) 語法會被 Quarto 包成 <div class="quarto-figure"><figure>,
   而那層的置中樣式會蓋掉浮動 —— 所以 pi.md 直接寫 <img>,Quarto 原樣輸出。 */
img.portrait {
  float: right;
  width: 190px;
  margin: .3rem 0 1.2rem 1.6rem;
  border-radius: 3px;
}
@media (max-width: 40rem) {
  img.portrait { float: none; display: block; margin: 0 auto 1.2rem; }
}

footer, .nav-footer { border-top: 1px solid var(--rule); color: var(--muted); }

/* ------------------------------------------------- code / data 按鈕 */
/* 基因體領域現在直接用「有沒有釋出 code 與 data」判斷研究嚴謹度,所以這些
   要能被掃到 —— 做成按鈕而不是內文連結,是為了讓「沒有」也一樣顯眼。 */
.pub-link {
  display: inline-block;
  margin: .2rem .35rem 0 0;
  padding: .18rem .6rem;
  border: 1px solid var(--teal);
  border-radius: 2px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: #0b6e66 !important;
  background: #fff;
}
.pub-link:hover { background: var(--teal); color: #fff !important; }
/* data 用另一個顏色:code 與 data 是兩種不同的承諾,同色就看不出少了哪一種 */
.pub-link-data { border-color: var(--olive); color: #5f7a00 !important; }
.pub-link-data:hover { background: var(--olive); }
/* web server 與文件不是研究產出本身,用灰色退到後面 */
.pub-link-web, .pub-link-docs { border-color: var(--muted); color: var(--muted) !important; }
.pub-link-web:hover, .pub-link-docs:hover { background: var(--muted); color: #fff !important; }

/* ------------------------------------- research 頁的 Data & Code 小節 */
.res-kind {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .08rem .4rem;
  border-radius: 2px;
  color: #fff;
  background: var(--teal);
  white-space: nowrap;
}
.res-kind-data { background: var(--olive); }
.res-kind-web, .res-kind-docs { background: #5b6b7a; }
.res-meta { font-size: .82rem; color: var(--muted); }