/* Easy KOC 設計系統
 *
 * 兩種受眾，一套語言：
 *   KOC 側     手機優先。觸控目標大、資訊少、決策清楚。
 *   Operator 側 桌面優先。密度高、表格為主、掃視快。
 *
 * 無 build step、無第三方套件。所有顏色走 CSS 變數，深色模式跟隨系統。
 * 中文不自行載入 webfont——繁體中文字型檔動輒數 MB，會拖垮手機首屏，
 * 因此用系統字型堆疊，蘋果裝置得 PingFang TC、Windows 得微軟正黑。
 */

:root {
  color-scheme: light dark;

  /* 中性色：冷灰，避免與品牌綠打架 */
  --bg:            #ffffff;
  --bg-sunken:     #f6f7f8;
  --bg-raised:     #ffffff;
  --border:        #e2e5e8;
  --border-strong: #c8ccd1;
  --ink:           #16191c;
  --ink-muted:     #5c646c;
  /* 4.76:1 於白底。.faint 是 14px 內文級別，必須達 WCAG AA。 */
  --ink-faint:     #6b747c;

  /* 單一品牌色。暖珊瑚：招募素人要親切、有溫度，而不是後台系統的冷靜。
     整站共用一個品牌色，綠色退為「成功／已付款」的語意色。
     #CE3E17 在白底與白字兩個方向都是 4.85:1，達 WCAG AA。 */
  --accent:        #ce3e17;
  --accent-hover:  #b93611;
  --accent-soft:   #fdede8;
  --on-accent:     #ffffff;
  /* 珊瑚字疊在珊瑚淺底時要更深，否則 13px 的標籤達不到 AA。 */
  --accent-ink:    #a52f0d;

  /* 輔助亮黃。只做強調底色與螢光筆效果，永不做按鈕底色。 */
  --highlight:      #ffc93c;
  --highlight-soft: #fff3cf;

  /* 語意色。後台需要一眼分辨狀態，這是功能不是裝飾。 */
  --ok:            #1a6b3c;
  --ok-soft:       #e7f4ec;
  --warn:          #8a5a00;
  --warn-soft:     #fdf3e0;
  --danger:        #a3302b;
  --danger-soft:   #fdecea;

  --radius:        8px;
  --radius-sm:     6px;
  --shadow: 0 1px 2px rgb(22 25 28 / .06), 0 4px 12px rgb(22 25 28 / .05);

  --space: 1rem;
  --measure: 68ch;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC",
          "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #14171a;
    --bg-sunken:     #0f1215;
    --bg-raised:     #1b1f23;
    --border:        #2b3137;
    --border-strong: #3d454d;
    --ink:           #e8eaec;
    --ink-muted:     #a2acb5;
    --ink-faint:     #7b858e;

    --accent:        #ff8a5b;
    --accent-hover:  #ffa07f;
    --accent-soft:   #3a1d12;
    --on-accent:     #1a1310;
    --accent-ink:    #ff9770;

    --highlight:      #ffc93c;
    --highlight-soft: #3a2e11;

    --ok:            #5fc182;
    --ok-soft:       #142c1e;
    --warn:          #d9a441;
    --warn-soft:     #2e2413;
    --danger:        #e8827c;
    --danger-soft:   #33191a;

    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 4px 12px rgb(0 0 0 / .3);
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 var(--font);
  /* iOS Safari 的位址列會令 100vh 跳動，改用 dvh */
  min-height: 100dvh;
}

/* ---------------------------------------------------------------- 無障礙 */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: .75rem 1rem;
  z-index: 10;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------- 版面 */

.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.site-header > .bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 76rem;
  margin: 0 auto;
  padding: .75rem 1rem;
  min-height: 56px;
}

.brand {
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}

.site-nav {
  display: flex;
  gap: .25rem;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }

.site-nav a {
  color: var(--ink-muted);
  text-decoration: none;
  padding: .4rem .6rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-size: .94rem;
}
.site-nav a:hover { background: var(--bg-sunken); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* 登出表單不可被導覽擠扁 */
.site-header > .bar > form { flex: 0 0 auto; }

/* 手機：品牌與登出佔第一行，導覽退到第二行自行橫捲，
   否則 375px 下按鈕會被壓成兩個字一行、導覽尾段被切走。 */
@media (max-width: 640px) {
  .site-header > .bar { flex-wrap: wrap; gap: .5rem; }
  .site-header > .bar > form { margin-left: auto; }
  .site-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    padding-bottom: .1rem;
  }
}

main {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

/* KOC 側頁面用窄欄，手機閱讀舒服；Operator 側維持寬欄放表格 */
main.narrow { max-width: 40rem; }

/* 標題字級用 clamp 連續縮放，而不是在 768px 一步跳。手機上 1.5rem 的頁面標題
   偏細，而斷點兩側之間的闊度全部得不到中間值。招募頁本來就是這樣做，產品內部
   跟上，兩邊的字級節奏才一致。
   text-wrap: balance 令中文標題折行時上下兩行長度接近，不會出現孤字尾行。 */
h1 {
  font-size: clamp(1.6rem, 1.15rem + 2vw, 1.95rem);
  line-height: 1.3;
  letter-spacing: -.015em;
  margin: 0 0 .25rem;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.15rem, 1.02rem + .55vw, 1.3rem);
  line-height: 1.4;
  margin: 2rem 0 .5rem;
  text-wrap: balance;
}
h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
p  { max-width: var(--measure); }

/* 內文連結。此前沒有定義，全站的內文連結都落回瀏覽器預設的藍色底線，
   與品牌色完全不搭。按鈕、導覽、以及自行定義字色的元件在這裡排除掉——
   這條規則的 specificity 高過單一 class，不排除的話那些元件的字色不會生效。 */
main a:not(.button):not(.brand):not(.row-link):not(.post-link) {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
main a:not(.button):not(.brand):not(.row-link):not(.post-link):hover {
  color: var(--accent-hover);
}

.page-intro { color: var(--ink-muted); margin: 0 0 1.5rem; }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); font-size: .88rem; }
.num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* brief 裡的披露標籤（`#廣告`）與其他要原樣照抄的字串。字級用 em 令它跟隨
   所在的內文，而不是永遠 14px。 */
code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .05em .35em;
}

/* ---------------------------------------------------------------- 訊息 */

.flash { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; }
.flash li {
  padding: .7rem .9rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: .95rem;
}
.flash-error   { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.flash-success { background: var(--ok-soft);     border-color: var(--ok);     color: var(--ok); }
.flash-warning { background: var(--warn-soft);   border-color: var(--warn);   color: var(--warn); }
.flash-message { background: var(--bg-sunken);   border-color: var(--border); }

.notice {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--bg-sunken);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  margin: 1rem 0;
}
.notice.danger { border-left-color: var(--danger); background: var(--danger-soft); }
.notice.warn   { border-left-color: var(--warn);   background: var(--warn-soft); }

/* ---------------------------------------------------------------- 卡片 */

.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}

.card-list { display: grid; gap: 1rem; margin: 1rem 0; }

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}
.card-head h2, .card-head h3 { margin: 0; }
.card-head-text { flex: 1 1 auto; min-width: 0; }
.card-head .icon-badge + .card-head-text h2 { font-size: 1.05rem; }

/* ---------------------------------------------------------------- 定義列表 */

.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; }
.facts dt { color: var(--ink-muted); font-size: .9rem; }
.facts dd { margin: 0; }

/* ---------------------------------------------------------------- brief 內文 */

/* `brief_md` 與 `angle_md` 經 markdown filter 渲染後的容器。
   樣式全部收窄在 .brief 之內：容器裡的標籤是程式產生的，可以放心用元素選擇器，
   而頁面其他地方的 h4 與 ul 不受影響。 */

.brief > :first-child { margin-top: 0; }
.brief > :last-child { margin-bottom: 0; }

.brief h4, .brief h5, .brief h6 {
  font-size: 1rem;
  line-height: 1.45;
  margin: 1.4rem 0 .4rem;
}
.brief h5, .brief h6 { font-size: .94rem; color: var(--ink-muted); }

/* brief 在窄欄卡片內，不需要再收窄一次 */
.brief p { margin: .5rem 0; max-width: none; }

.brief ul, .brief ol { margin: .5rem 0; padding-left: 1.4rem; }
.brief li { margin: .3rem 0; }
.brief li::marker { color: var(--accent); }

/* ---------------------------------------------------------------- 狀態標籤 */

.tag {
  display: inline-block;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  color: var(--ink-muted);
  background: var(--bg-sunken);
  white-space: nowrap;
}
.tag-ok     { background: var(--ok-soft);     color: var(--ok);     border-color: transparent; }
.tag-warn   { background: var(--warn-soft);   color: var(--warn);   border-color: transparent; }
.tag-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.tag-accent { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }

/* ---------------------------------------------------------------- 表格 */

/* 表格在手機一定會爆版。用 wrapper 容許橫向捲動，而不是讓整頁橫向捲。 */
.table-wrap { overflow-x: auto; margin: 1rem 0; }

table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th, td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--border); }
/* 表頭刻意不做 sticky。此前寫過 `position: sticky; top: 0`，但它永不生效：
   捲動祖先是 .table-wrap，而 `overflow-x: auto` 依規範會令 overflow-y 一併算成
   auto，該容器又沒有高度上限，所以垂直方向永不捲動，sticky 沒有觸發條件。
   要令它生效必須給 .table-wrap 一個 max-height，即是在頁面之內再開一個捲動區——
   對現時這種長度的表格，代價大於收益。若日後表格真的長到需要，連同 max-height
   與讓開 .site-header 的 top 偏移一併處理，不要只加回 position。 */
th {
  font-weight: 600;
  color: var(--ink-muted);
  font-size: .85rem;
  white-space: nowrap;
  background: var(--bg-sunken);
}
tbody tr:hover { background: var(--bg-sunken); }
td.amount, th.amount { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }

/* ---------------------------------------------------------------- 表單 */

form { margin: 0; }
.field { margin-bottom: 1.1rem; max-width: 34rem; }
.field label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .95rem; }
.field .help { color: var(--ink-muted); font-size: .87rem; margin: .3rem 0 0; }
.field .error { color: var(--danger); font-size: .87rem; margin: .3rem 0 0; }

input, select, textarea {
  width: 100%;
  padding: .6rem .7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  /* 手機聚焦時字級低於 16px 會令 iOS 自動放大版面 */
  font-size: 16px;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
textarea { min-height: 9rem; resize: vertical; }
input[type="file"] { padding: .5rem; background: var(--bg-sunken); }

/* 核取方塊與單選鈕不可被上面的 width:100% 拉成整行 */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  min-width: 20px;
  min-height: 20px;
  accent-color: var(--accent);
  margin: 0 .4rem 0 0;
  vertical-align: middle;
}

/* 表格內選取列的核取方塊要有足夠觸控範圍 */
td > input[type="checkbox"], th > input[type="checkbox"] {
  min-width: 22px;
  min-height: 22px;
}


.actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }

button, .button {
  display: inline-block;
  padding: .6rem 1.1rem;
  min-height: 44px;               /* 觸控目標下限 */
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: background .15s ease, transform .06s ease;
}
button:hover, .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:active, .button:active { transform: translateY(1px); }

button.secondary, .button.secondary {
  background: var(--bg);
  color: var(--accent);
  border-color: var(--border-strong);
}
button.secondary:hover, .button.secondary:hover { background: var(--bg-sunken); }

/* 破壞性動作用紅色外框而非實心，令它與實心的主要動作一眼分得開。
   品牌色是暖珊瑚，與危險紅同屬暖色；若兩者都用實心，審核佇列的
   「接受」與「拒絕」會長得幾乎一樣，按錯的代價是拒絕了一個真實的人。 */
button.danger, .button.danger {
  background: transparent;
  border-color: var(--danger);
  color: var(--danger);
}
button.danger:hover, .button.danger:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

button:disabled, .button[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* 表格列內的操作要小，否則整張表被按鈕撐開 */
.row-actions button, .row-actions .button {
  min-height: 32px;
  padding: .25rem .6rem;
  font-size: .87rem;
  font-weight: 500;
}
.row-actions { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------- 圖示 */

/* sprite 見 static/icons.svg。圖示一律跟隨文字色與字級。 */
.icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -.18em;
  flex: 0 0 auto;
}
.icon-sm { width: .95em; height: .95em; }

/* 標籤內的圖示要略細，否則會把行高撐開 */
.tag .icon { width: .9em; height: .9em; vertical-align: -.12em; margin-right: .15rem; }

/* 標題旁的圖示，用柔和底色的圓形托住，令頁面不只有文字 */
.icon-badge {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  flex: 0 0 auto;
}
.icon-badge .icon { width: 1.3rem; height: 1.3rem; vertical-align: 0; }
.icon-badge.ok     { background: var(--ok-soft);     color: var(--ok); }
.icon-badge.warn   { background: var(--warn-soft);   color: var(--warn); }
.icon-badge.danger { background: var(--danger-soft); color: var(--danger); }

.section-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 2rem 0 .5rem;
}
.section-head h2 { margin: 0; }

/* ---------------------------------------------------------------- 工作分組 */

/* 「我的接單」按「要你做什麼」分組。等你行動的一組要在掃視時彈出來，
   其餘兩組降權——同一個視覺重量等於沒有分組。 */

.group-label {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .84rem;
  font-weight: 700;
  color: var(--ink-muted);
  margin: 1.75rem 0 .6rem;
}
.group-label .count {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 .45rem;
  font-size: .8rem;
}
.group-label.todo { color: var(--accent-ink); }
.group-label.todo .count { background: var(--accent-soft); border-color: transparent; }

.card.needs-action { border-left: 3px solid var(--accent); }
.card.settled { background: var(--bg-sunken); box-shadow: none; }
.card.settled h3 { color: var(--ink-muted); }

.job-substatus { margin: .6rem 0 .35rem; max-width: none; }

.next-step {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--accent-ink);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: .55rem .7rem;
  margin: .6rem 0 0;
  max-width: none;
}

/* 報名前公開完整底價（SPEC §4.2 顯示時機）；獎金只提示存在，計法後置。 */
.pay-line {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  font-weight: 600;
  margin: .25rem 0 .15rem;
  max-width: none;
}
.pay-note {
  font-size: .82rem;
  color: var(--ink-faint);
  margin: 0 0 .9rem;
}

/* 報酬設定無法解讀時的後備提示。 */
.pay-pending {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  font-size: .88rem;
  color: var(--ink-muted);
  margin: .25rem 0 .9rem;
  max-width: none;
}

/* 兩個日期一組。手機上不用 .facts 的兩欄 grid，否則長日期會把值欄擠到折行。 */
.timeline { margin: 0 0 1.1rem; display: grid; gap: .4rem; }
.timeline dt {
  color: var(--ink-muted);
  font-size: .85rem;
}
.timeline dd {
  margin: 0;
  font-size: .94rem;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 480px) {
  .timeline {
    grid-template-columns: 5.5rem 1fr;
    gap: .3rem .75rem;
    align-items: baseline;
  }
}

/* ---------------------------------------------------------------- 報酬明細 */

/* 獲接受之後才顯示（A3 裁定）。KOC 落筆之前要知道保證幾多、可爭取幾多、
   總數有沒有封頂——這三行就是全部。 */

.pay-detail {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  padding: .85rem 1rem;
  margin: .5rem 0 1rem;
}

.pay-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .25rem 0;
}
.pay-row .pay-label { color: var(--accent-ink); font-size: .92rem; }
.pay-row .pay-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--accent-ink);
  white-space: nowrap;
}

.pay-total {
  margin-top: .35rem;
  padding-top: .55rem;
  border-top: 1px solid var(--border-strong);
}
.pay-total .pay-label { font-weight: 700; }
.pay-total .pay-value { font-size: 1.15rem; font-weight: 700; }

.pay-tiers {
  list-style: none;
  margin: .2rem 0 .35rem;
  padding: 0 0 0 .1rem;
  display: grid;
  gap: .2rem;
  font-size: .88rem;
  color: var(--accent-ink);
}
.pay-tiers li::before { content: "· "; }

.pay-detail .faint { margin: .25rem 0 0; max-width: none; }

/* ---------------------------------------------------------------- 待辦首頁 */

/* Operator 登入後的第一屏。每格是一個入口，不是一個動作，所以整格可點，
   而格內沒有按鈕。已清空的一格保留在原位並降權——把它藏起來，Operator
   就無法分辨「無事」與「這一類我忘了看」。 */

/* 最小欄寬選 17rem，是為了在 1280px 排成 4+2 而不是 5+1——
   尾行只剩一張卡，看上去像缺漏。 */
.todo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: .85rem;
  margin: 1.25rem 0;
}

.todo-card {
  display: grid;
  gap: .15rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: var(--ink);
}
.todo-card:hover { border-color: var(--accent); }
.todo-card .icon-badge { margin-bottom: .4rem; }

.todo-count {
  font: 700 2rem/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  color: var(--accent-ink);
}
.todo-label { font-weight: 600; font-size: .98rem; }
.todo-hint { font-size: .84rem; color: var(--ink-muted); line-height: 1.5; }

.todo-card.clear { background: var(--bg-sunken); box-shadow: none; }
.todo-card.clear .todo-count { color: var(--ink-faint); }
.todo-card.clear .todo-label { color: var(--ink-muted); }

/* ---------------------------------------------------------------- 列表工具列 */

/* 篩選只有一個下拉加一顆按鈕，包成一張卡會把表格推到摺線以下——
   第一屏見不到任何資料。收成一行，資料立即看得見。 */

.toolbar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin: 1rem 0 .75rem;
}
.toolbar label { font-size: .85rem; color: var(--ink-muted); }
.toolbar select {
  width: auto;
  min-width: 10rem;
  max-width: 100%;
  padding: .4rem .6rem;
  font-size: .94rem;
}
.toolbar button {
  min-height: 38px;
  padding: .3rem .9rem;
  font-weight: 500;
}
/* 數字篩選欄不可吃掉全域 input 的 width:100%，否則整條 toolbar 折行 */
.toolbar input {
  width: 8rem;
  padding: .4rem .6rem;
  font-size: .94rem;
}

/* 初稿正文：保留 KOC 原有換行——行距與斷行本身就是帖文的一部分 */
.draft-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .8rem .95rem;
  margin: .5rem 0;
}

.draft-images {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .6rem 0 .2rem;
}
.draft-images img {
  display: block;
  width: 9rem;
  height: 9rem;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* KOC 內容標籤的多選核取（operator 詳情頁） */
.tag-choices {
  border: 0;
  padding: 0;
  margin: 0 0 .75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
}
.tag-choices legend { font-size: .85rem; color: var(--ink-muted); margin-bottom: .5rem; }
.tag-choice { display: inline-flex; align-items: center; font-size: .95rem; }

/* 標題下的一行計數：要不要處理，掃一眼就知。 */
.list-head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .88rem;
  color: var(--ink-muted);
  margin: 0 0 .25rem;
  max-width: none;
}
.list-head .pill {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 999px;
  padding: .05rem .5rem;
  font-weight: 600;
  font-size: .82rem;
}

/* 「進入詳情」是導航，不是主要動作。做成一版六顆珊瑚色按鈕，等於告訴眼睛
   這六件事同樣重要，真正的資料反而不顯眼。實心與外框按鈕留給接受、拒絕、
   建立批次一類真正改變狀態的動作。 */
.row-link {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.row-link:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.row-link .chev { color: var(--ink-faint); transition: transform .12s ease; }
tbody tr:hover .row-link .chev { transform: translateX(2px); color: var(--accent); }

/* 帖文網址在表格內會把其他欄擠扁，限寬並以省略號收尾。 */
.url-cell {
  display: inline-block;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-family: var(--font-mono);
  font-size: .82rem;
}

/* ---------------------------------------------------------------- 審核版面 */

/* Operator 審核一篇帖文要同時看到依據（brief 與 angle）與證據（帖文、數據）。
   兩欄並排，令一個決定在一屏之內做得完。窄螢幕自然疊成一欄。 */

.review-split { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
@media (min-width: 900px) {
  .review-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 2rem;
  }
}
.review-split > section { min-width: 0; }
.review-split .card + .card { margin-top: 1rem; }

.pane-title {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink-muted);
  margin: 0 0 .6rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}

/* 帖文連結是這一頁唯一要離站的動作，做得夠大按 */
.post-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 44px;
  padding: .65rem .85rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  text-decoration: none;
  color: var(--ink);
}
.post-link:hover { background: var(--bg-sunken); border-color: var(--accent); }
.post-link-text { display: grid; gap: .1rem; min-width: 0; }
.post-link-text strong { font-size: .94rem; }
.post-link .url {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.post-link > .icon { color: var(--ink-faint); flex: 0 0 auto; }

/* 數據用格子而非兩欄表格：七個數字要一眼掃完，不是逐行讀。 */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: .5rem;
  margin: .75rem 0;
}
.metric {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .55rem .7rem;
  background: var(--bg-raised);
}
.metric .m-label { display: block; font-size: .78rem; color: var(--ink-muted); }
.metric .m-value {
  font: 700 1.1rem/1.3 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* 計價指標直接決定 KOC 收幾多錢，值得與其他數字分得開。 */
.metric.headline { background: var(--accent-soft); border-color: transparent; }
.metric.headline .m-label, .metric.headline .m-value { color: var(--accent-ink); }
.metric.missing .m-value {
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink-faint);
}

.decision { display: grid; gap: .75rem; }
.decision .actions { margin-top: .75rem; }
.decision p { margin: 0; max-width: none; }

/* ---------------------------------------------------------------- 空狀態 */

.empty {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--ink-muted);
  background: var(--bg-sunken);
}
.empty p { margin: 0 auto; max-width: 32ch; }

/* 空狀態的圖示：柔和圓底加大圖示，令空白頁面不會像壞了 */
.empty-icon {
  display: inline-grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  margin: 0 auto 1rem;
}
.empty-icon .icon { width: 1.9rem; height: 1.9rem; vertical-align: 0; }
.empty strong { display: block; color: var(--ink); margin-bottom: .35rem; }

/* ---------------------------------------------------------------- 金額 */

.amount-big {
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  letter-spacing: -.02em;
}
.amount-negative { color: var(--danger); }

/* KOC 對帳頁的金額摘要。兩個數字回答「我總共有幾多」與「幾時到手」，
   放在最上面，令 KOC 不必自己加總表格。 */

/* auto-fit 令兩格在 320px 一類的窄機自動疊起，而不是硬擠到金額折行。 */
.money-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .75rem;
  margin: 1rem 0 .5rem;
}

.money-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  background: var(--bg-raised);
}
.money-tile.paid    { background: var(--ok-soft);        border-color: transparent; }
.money-tile.pending { background: var(--highlight-soft); border-color: transparent; }

.money-tile .label {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: .3rem;
}
.money-tile.paid .label    { color: var(--ok); }
.money-tile.pending .label { color: var(--warn); }

/* 累積收入到五位數是遲早的事，字級要跟得住闊度，否則手機上會折成兩行。 */
.money-tile .value {
  display: block;
  font: 700 clamp(1.05rem, 5.2vw, 1.35rem)/1.15 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
/* 貨幣是單位，不是數據。縮細另置，把闊度讓給數字。 */
.money-tile .value small {
  font-size: .58em;
  font-weight: 600;
  opacity: .75;
  margin-right: .25em;
}
.money-tile.paid .value { color: var(--ok); }

.payout-eta {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  font-size: .88rem;
  color: var(--ink-muted);
  margin: 0 0 1.5rem;
  max-width: none;
}

/* 對帳卡。手機上不用表格：一個 campaign 一張卡，卡內按付款批次分組。 */

.statement-card { padding: 0; overflow: hidden; }

.statement-card > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
}
.statement-card > header h2 { margin: 0; font-size: 1.05rem; }
.statement-card > header .total {
  font: 700 1.05rem/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.batch-group { padding: .7rem 1rem .8rem; }
.batch-group + .batch-group { border-top: 1px solid var(--border); }

.batch-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}

.line-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .2rem 0;
  font-size: .94rem;
}
.line-row .kind { color: var(--ink-muted); }
.line-row .amt {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 計算說明預設收起。要查得到，但不應該佔住預設版面。 */

details.calc { margin-top: .5rem; }
details.calc > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .3rem;
  /* KOC 側是手機優先，觸控目標下限與按鈕一致 */
  min-height: 44px;
  font-size: .85rem;
  color: var(--accent);
}
details.calc > summary::-webkit-details-marker { display: none; }
details.calc > summary .chev { transition: transform .15s ease; }
details.calc[open] > summary .chev { transform: rotate(90deg); }
details.calc p {
  margin: .35rem 0 0;
  font-size: .85rem;
  color: var(--ink-muted);
  max-width: none;
}

/* ---------------------------------------------------------------- 桌面 */

@media (min-width: 768px) {
  main { padding: 2rem 1.5rem 5rem; }
  .facts { grid-template-columns: 9rem 1fr; }
  .card { padding: 1.25rem; }
}

/* Operator 的密集列表在大螢幕收緊行高，一屏看更多 */
@media (min-width: 1024px) {
  .dense th, .dense td { padding: .45rem .7rem; }
  .dense { font-size: .9rem; }
}

/* ---------------------------------------------------------------- 預覽橫額 */
/* 只在 scripts/local_preview.py 出現，用途是避免把假資料誤當成線上系統。 */

.preview-banner {
  background: var(--warn-soft);
  color: var(--warn);
  border-bottom: 1px solid var(--warn);
  padding: .5rem 1rem;
  font-size: .88rem;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  align-items: center;
}
.preview-banner a { color: var(--warn); font-weight: 600; }

/* ------------------------------------------------- 品牌示範 dashboard（/demo） */

.demo-banner {
  background: var(--warn-soft);
  color: var(--warn);
  border: 1px solid var(--warn);
  border-radius: .5rem;
  padding: .55rem .9rem;
  font-size: .9rem;
  margin-bottom: 1.5rem;
}
.demo-head { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; }
.demo-head h1 { margin: 0; }
.demo-head .client { color: var(--ink-muted); font-weight: 600; }

.budget-bar {
  height: .7rem;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  margin-top: 1.4rem;
}
.budget-bar .fill { height: 100%; background: var(--accent); border-radius: 999px; }

.demo-contact {
  margin-top: 2.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}
.demo-contact .contact-line { font-size: 1.35rem; font-weight: 700; overflow-wrap: anywhere; }

/* ------------------------------------------------- Campaign 進度看板（ticket 16） */

.logistics-row td { border-bottom: 1px solid var(--border); padding-top: 0; }
.logistics-form label { font-size: .78rem; color: var(--ink-muted); display: block; margin-bottom: .25rem; }
.logistics-line { display: flex; gap: .5rem; align-items: center; margin-bottom: .6rem; }
.logistics-line input { flex: 1; }
.recap-text {
  width: 100%;
  font-family: var(--font-mono);
  font-size: .88rem;
  line-height: 1.7;
  resize: vertical;
}

/* ------------------------------------------------- 品牌報表管理（ticket 17） */

.contact-list { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; gap: .4rem; }
.contact-list li { display: flex; align-items: center; gap: .75rem; justify-content: space-between; }

/* ------------------------------------------------- 全站頁尾與支援頁（ticket 09） */

/* 求助途徑要在每一頁（KOC 與 Operator）都找得到，但不可搶內容焦點：
   faint 字色、細字級、貼在內容之後。闊度對齊 .site-header 的 76rem。 */
.site-footer {
  border-top: 1px solid var(--border);
  color: var(--ink-faint);
  font-size: .88rem;
}
.site-footer p {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
}
.site-footer a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.site-footer a:hover { color: var(--ink); }

/* 摺疊式常見問題。與招募頁 .faq 同一套規則——招募頁由較後載入的
   landing.css 接手，支援頁只載 app.css，所以這裡要有一份。 */
.faq { margin-top: 1.5rem; }
.faq details { border-bottom: 1px solid var(--border); padding: .35rem 0; }
.faq details[open] { padding-bottom: .9rem; }
.faq summary {
  cursor: pointer; padding: .9rem 2rem .9rem 0; font-weight: 700;
  list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .25rem; top: .7rem;
  font-size: 1.4rem; font-weight: 400; color: var(--accent);
}
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin: 0; color: var(--ink-muted); max-width: 46rem; }
.faq p + p { margin-top: .6rem; }