/*
 * 全站只用一種黑體字族（與 Facebook／Threads 嵌入框一致），層級靠字級與粗細區分。
 * 主色調取自競選官網 puma.taipei 的品牌色：
 *   --brand  #db6a41  主橘色，用在分頁底線、標題線等裝飾
 *   --accent #ad4d2a  深橘色，用在按鈕與連結（白字對比度足夠閱讀）
 * 關係標籤的顏色是資訊（同學／師長／學生／朋友），不是裝飾。
 * 不使用外部字型（避免訪客連線到第三方），也不加動畫。
 */
:root {
  --paper: #fff8f4;
  --sheet: #ffffff;
  --ink: #211d1d;
  --ink-soft: #665b57;
  --rule: #efd9cb;
  --brand: #db6a41;
  --accent: #ad4d2a;
  --accent-hover: #963f24;

  --rel-classmate: #2f5d8a;
  --rel-classmate-bg: #e4ecf5;
  --rel-teacher: #8a3b3b;
  --rel-teacher-bg: #f5e6e4;
  --rel-student: #7a5a1f;
  --rel-student-bg: #f4ecdc;
  --rel-friend: #2e6b4f;
  --rel-friend-bg: #e4f0e8;
  --rel-colleague: #5b4a86;
  --rel-colleague-bg: #ebe7f4;

  --sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* 頁面頂端的主橘色色帶，呼應官網 */
  border-top: 10px solid var(--brand);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.75;
}

/* 寬螢幕最多並排三欄（3 × 380px + 間距），窄螢幕自動變兩欄或一欄 */
.site-header,
main,
.site-footer {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ==== 頁首 ==== */

.site-header {
  padding-top: 48px;
}

.site-name {
  margin: 0 0 14px;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

h1 {
  margin: 0;
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.8rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* 標語只在逗號後換行，避免手機上只剩「人。」掉到下一行 */
h1 .keep {
  display: inline-block;
}

.subtitle {
  margin: 14px 0 0;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.6;
}

.lede {
  max-width: 34em;
  margin: 18px 0 0;
  color: var(--ink-soft);
  line-height: 1.9;
}

.intro {
  max-width: 36em;
  margin: 0 0 6px;
  color: var(--ink-soft);
}

.intro a {
  color: var(--accent);
  text-underline-offset: 3px;
}

.summary {
  margin: 0 0 24px;
  font-size: 1.15rem;
  font-weight: 700;
}

.summary:empty {
  display: none;
}

/* ==== 分頁：像書頁上的目錄，不做成按鈕 ==== */

.tabs {
  display: flex;
  gap: 28px;
  margin-top: 28px;
  border-bottom: 1px solid var(--rule);
}

.tabs [role="tab"] {
  margin-bottom: -1px;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
}

.tabs [role="tab"]:hover {
  color: var(--ink);
}

.tabs [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--brand);
  color: var(--ink);
}

.tab-count {
  margin-left: 6px;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 400;
}

main > section {
  padding-top: 28px;
}

main > section[hidden] {
  display: none;
}

/* ==== 篩選 ==== */

.filter-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 8px;
}

.filter-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

/* 沒有任何貼文填關係時，整排（含標籤）一起隱藏 */
.filter-row:has(.filters[hidden]) {
  display: none;
}

.filter-label {
  flex: none;
  width: 2.5em;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filters[hidden] {
  display: none;
}

.filters button {
  padding: 5px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--sheet);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  cursor: pointer;
}

.filters button:hover {
  border-color: var(--brand);
}

.filters button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.filters button[aria-pressed="true"]:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}

.source-link:hover,
.intro a:hover,
.article-preview:hover .article-more {
  color: var(--accent-hover);
}

.status {
  margin: 16px 0 0;
  color: var(--ink-soft);
}

.status:empty {
  display: none;
}

/* ==== 貼文 ==== */

/* 格線依序由左到右、由上到下排列，保持 posts.js 的順序 */
.post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  align-items: start;
  justify-items: center;
  gap: 28px 24px;
  padding: 24px 0 48px;
}

.card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 550px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--sheet);
}

.card[hidden] {
  display: none;
}

/* 作者與原文連結放在嵌入框下方 */
.card-footer {
  padding: 14px 18px 16px;
  border-top: 1px solid var(--rule);
}

.author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
}

.author-name {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}

.relation-tag {
  padding: 1px 9px;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.6;
}

.relation-tag[data-relation="同學"] { color: var(--rel-classmate); background: var(--rel-classmate-bg); }
.relation-tag[data-relation="師長"] { color: var(--rel-teacher); background: var(--rel-teacher-bg); }
.relation-tag[data-relation="學生"] { color: var(--rel-student); background: var(--rel-student-bg); }
.relation-tag[data-relation="朋友"] { color: var(--rel-friend); background: var(--rel-friend-bg); }
.relation-tag[data-relation="工作夥伴"] { color: var(--rel-colleague); background: var(--rel-colleague-bg); }

.platform {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.note {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 0.93rem;
  line-height: 1.6;
}

/* 不依賴嵌入框是否成功，原始貼文連結永遠以文字連結呈現 */
.source-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--accent);
  font-size: 0.93rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.embed {
  display: flex;
  justify-content: center;
  padding: 14px 12px;
}

.embed iframe {
  display: block;
  max-width: 100%;
  border: 0;
  /* 與卡片同為白底，嵌入內容比框短時下方空白不會變成一塊色塊 */
  background: var(--sheet);
}

/* 窄螢幕上縮小顯示的 Facebook 嵌入框，見 app.js 的 renderFacebookEmbed() */
.embed-scaled {
  overflow: hidden;
}

.embed-scaled iframe {
  transform-origin: top left;
}

/* Threads 官方嵌入碼帶有自己的行內樣式，這裡只限制它不要超出卡片 */
.embed-threads {
  display: block;
  width: 100%;
}

.embed-threads > * {
  max-width: 100% !important;
}

.embed-placeholder {
  margin: 0;
  padding: 24px 16px;
  width: 100%;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  color: var(--ink-soft);
  text-align: center;
}

/* 沒有官方嵌入的文章：像一段剪報 */
.article-preview {
  display: block;
  width: 100%;
  padding: 22px 20px;
  border-radius: 6px;
  background: #fdf3ec;
  color: var(--ink);
  text-decoration: none;
}

.article-preview:hover .article-title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.article-title {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.45;
}

.article-source {
  display: block;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.article-excerpt {
  display: block;
  margin-top: 16px;
  padding-left: 14px;
  border-left: 3px solid var(--rule);
  line-height: 1.95;
}

.article-more {
  display: inline-block;
  margin-top: 16px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==== 學界後援名單：排成名冊，不切成卡片 ==== */

.search {
  margin-bottom: 18px;
}

.search label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.search input {
  width: 100%;
  max-width: 440px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--sheet);
  color: var(--ink);
  font: inherit;
}

.scholar-group {
  margin: 36px 0 48px;
}

.scholar-group h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand);
  font-size: 1.5rem;
  line-height: 1.3;
}

.group-count {
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 400;
}

.scholar-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  column-gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scholar {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
}

.scholar-name {
  display: block;
  font-size: 1.08rem;
  font-weight: 700;
}

.scholar-affiliation {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

/* ==== 頁尾 ==== */

.site-footer {
  padding-top: 24px;
  padding-bottom: 48px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.site-footer p {
  max-width: 44em;
  margin: 0;
}

.site-footer p + p {
  margin-top: 10px;
}

/* ==== 鍵盤焦點：所有可操作元素一致 ==== */

.tabs [role="tab"]:focus-visible,
.filters button:focus-visible,
.source-link:focus-visible,
.article-preview:focus-visible,
.intro a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.search input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

@media (max-width: 520px) {
  .site-header {
    padding-top: 32px;
  }

  .tabs {
    gap: 20px;
  }

  .filter-row {
    flex-direction: column;
    gap: 6px;
  }
}