/* 026 大戶WOW — 站台樣式層。
   共用層 app-shell.css 先載入（手機原生感），這裡的規則要贏得過它。
   手機 393px / 桌機 1280px 兩個尺度都要驗；輸入框字級一律 >=16px。 */

:root {
  --bg: #0a0a0c;
  --panel: #141418;
  --panel2: #1b1b21;
  --line: #2a2a33;
  --dlg-backdrop: rgba(0, 0, 0, .55);   /* 本機設定小視窗的背景遮罩（V1.20） */
  --ink: #e9e9ef;
  --dim: #8b8b99;
  --gold: #d4a94a;
  --up: #ef4a4a;      /* 台股：紅漲 */
  --down: #22c07a;    /* 綠跌 */
  --tabh: 56px;
  /* 以下原本寫死在各條規則裡，V1.14 搬進色票（暗色值逐一不變） */
  --ink2: #c9c9d6; --ink3: #c3c3d0; --faint: #4a4a58; --on-gold: #14141a;
  --head-a: #101014; --head-b: #0c0c10; --tabbar-bg: #101014;
  --line-soft: #202028; --line-grp: #2f2f3a;
  --press: #1e1e26; --press2: #24242e;
  --sorted-th: #2c2616; --thsel-bg: #22222b; --thsel-line: #3a3a48; --toast-bg: #2a2a34;
  --fresh-line: #2f6b4f; --bad-bg: #2a1618; --bad-ink: #f0c9c9;
  --chart-grid: #22222a; --chart-close: #5a5a72; --purple: #8a6bd6;
  color-scheme: dark;
}

/* ── 亮色（使用者按了切換鈕才套用；沒按過＝暗色）。色碼只准寫在這兩組裡，
   兩組 key 一一對應。金／紅／綠在白底對比 ≥ 4.5:1，台股紅漲綠跌不變。 */
:root[data-theme="light"] {
  --bg: #f5f5f7;
  --panel: #ffffff;
  --panel2: #eeeef2;
  --line: #d9d9e1;
  --dlg-backdrop: rgba(0, 0, 0, .35);
  --ink: #1c1c22;
  --dim: #5e5e6c;
  --gold: #8a5c00;
  --up: #c21f2a;
  --down: #17722f;
  --ink2: #2c2c36; --ink3: #2c2c36; --faint: #a3a3b0; --on-gold: #ffffff;
  --head-a: #ffffff; --head-b: #f7f7f9; --tabbar-bg: #ffffff;
  --line-soft: #e6e6ec; --line-grp: #c9c9d3;
  --press: #ececf1; --press2: #e4e4ea;
  --sorted-th: #f6ecd2; --thsel-bg: #ffffff; --thsel-line: #c9c9d3; --toast-bg: #ffffff;
  --fresh-line: #6fb58f; --bad-bg: #fde8e8; --bad-ink: #8c1d24;
  --chart-grid: #e4e4ea; --chart-close: #9a9aae; --purple: #6f4fc2;
  color-scheme: light;
}

* { box-sizing: border-box; }

/* ⚠ `.chip` 等元素自己設了 display，會把 `hidden` 屬性蓋掉（「全部複製」在
   還沒產生內容時就露出來了）。hidden 一律贏。 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  padding-bottom: calc(var(--tabh) + env(safe-area-inset-bottom, 0px));
}

a { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------- header */

/* sticky 只掛在外層容器上，裡面的 header / nav 都不要再各自 sticky —— 兩個
   兄弟元素各自 top:0 會疊在一起（V0.24 使用者回報：往下捲時分頁列壓住站名）。 */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg);
}

header {
  background: linear-gradient(180deg, var(--head-a) 0%, var(--head-b) 100%);
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  /* header 掛了 .mapp-safe-top，那條會用 max(--mapp-safe-base, env()) 蓋掉上面的
     padding-top；沒設 base 時在桌機／非瀏海機是 0，站名與切換鈕會貼齊螢幕頂端。 */
  --mapp-safe-base: 10px;
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand h1 {
  margin: 0; font-size: 20px; letter-spacing: .12em;
  color: var(--gold); font-weight: 800;
}
/* 皮小秋™ 品牌字：全站慣例（同 014）。本站 .brand 已是 header 容器，改叫 .pxq */
/* 皮小秋™ 與站名各自是一整句，窄幅只能在兩者之間換行 */
.brand h1 .ttl { white-space: nowrap; display: inline-block; }
.brand h1 .pxq { white-space: nowrap; display: inline-block; font-size: .8em; letter-spacing: 0; margin-right: 8px; }
.brand .sub { font-size: 11px; color: var(--dim); letter-spacing: .18em; }
.stamp { margin-top: 4px; font-size: 11.5px; color: var(--dim); }
.stamp b { color: var(--ink2); font-weight: 600; }

/* ---------------------------------------------------------------- shell */

main { padding: 12px 14px 24px; max-width: 1180px; margin: 0 auto; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 12px 14px;
  margin-bottom: 14px;
}
.card h2 {
  margin: 0 0 10px; font-size: 15px; letter-spacing: .04em;
  display: flex; align-items: center; gap: 8px;
}
.card h2 .hint { font-size: 11.5px; color: var(--dim); font-weight: 400; }

/* ---------------------------------------------------------------- chips */

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.chip {
  flex: 0 0 auto;
  min-height: 40px; padding: 0 14px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel2); color: var(--dim);
  font-size: 14px; cursor: pointer;
}
.chip[aria-pressed="true"] {
  color: var(--on-gold); background: var(--gold); border-color: var(--gold);
  font-weight: 700;
}

select, input {
  min-height: 40px;
  font-size: 16px;            /* <16px 會讓 iOS 一點就把整頁放大 */
  background: var(--panel2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 0 10px;
}

/* ---------------------------------------------------------------- table */

.tablewrap {
  overflow: auto; -webkit-overflow-scrolling: touch;
  /* max-height 由 app.js 依視窗高度算，寫死的話換個螢幕就不對 */
}
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { padding: 7px 8px; white-space: nowrap; text-align: right; }
/* 表頭凍結在上方。⚠ sticky 是相對**捲動容器**的，而 .tablewrap 只有橫向捲動、
   垂直是整頁在捲 —— 所以要靠 JS 給 .tablewrap 一個 max-height 讓它自己垂直捲，
   表頭才黏得住（見 app.js 的 sizeTables）。
   z-index 要壓過 td.c-name(2)，否則垂直捲時凍結的個股欄會蓋過表頭。 */
th {
  position: sticky; top: 0; z-index: 4;
  background: var(--panel2); color: var(--dim);
  font-weight: 600; font-size: 11.5px; letter-spacing: .05em;
  border-bottom: 1px solid var(--line);
}
td { border-bottom: 1px solid var(--line-soft); }
tbody tr:active { background: var(--press); }
/* 個股名稱欄凍結在左邊：表格橫捲時才不會變成「看得到數字，不知道是哪一檔」。
   ★ 與 # 會捲到它底下，所以背景必須不透明。 */
th.c-name, td.c-name {
  position: sticky; left: 0; z-index: 2;
  text-align: left;
  box-shadow: 1px 0 0 var(--line);
}
th.c-name { z-index: 5; background: var(--panel2); }   /* 左上角那一格要壓過兩邊 */
td.c-name { background: var(--panel); }
.c-name b { font-size: 14.5px; }
.c-name .sid { color: var(--dim); font-size: 11.5px; margin-right: 6px; }
.c-name .tag {
  margin-left: 6px; font-size: 10.5px; padding: 1px 5px;
  border: 1px solid var(--gold); color: var(--gold); border-radius: 4px;
}
.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--dim); }
.num { font-variant-numeric: tabular-nums; }

/* 佔比% 在上、張數在下的雙行儲存格（集保／神秘金字塔的「人數・張數・佔比」慣例，
   在手機上改成疊起來而不是多開一欄） */
td.dual { line-height: 1.25; padding-top: 5px; padding-bottom: 5px; }
td.dual b { display: block; font-weight: 700; }
td.dual.up b, td.dual.up i { color: var(--up); }
td.dual.down b, td.dual.down i { color: var(--down); }
td.dual.up i, td.dual.down i { opacity: .8; }
td.dual i {
  display: block; font-style: normal;
  font-size: 11px; color: var(--dim);
}

/* 欄群分隔：大戶 / 門檻 / 散戶 三組之間畫一條淡線，一眼看得出哪幾欄是一組 */
th.grp, td.grp { border-left: 1px solid var(--line-grp); }
th.grp { padding-left: 10px; }

/* 自選股星號 */
th.star, td.star { width: 34px; padding-left: 4px; padding-right: 0; text-align: center; }
.starbtn {
  background: none; border: 0; cursor: pointer; padding: 0;
  min-width: 30px; min-height: 38px;      /* 手機點擊區 */
  font-size: 17px; line-height: 1; color: var(--faint);
}
.starbtn[aria-pressed="true"] { color: var(--gold); }

/* ---------------------------------------------------------------- tabbar */

nav.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--tabh) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* ⚠ **不可寫死欄數。** 本機多一個「週報」頁籤（公開站建置時會被刪掉），
     `repeat(5, 1fr)` 會讓第 6 個掉到第二列、被裁掉一半。用 auto-flow 讓欄數
     跟著實際的頁籤數走，5 個或 6 個都排得開。 */
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--tabbar-bg); border-top: 1px solid var(--line);
}
nav.tabbar a {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  font-size: 11px; color: var(--dim);
}
nav.tabbar a .ico { font-size: 18px; line-height: 1; }
nav.tabbar a { min-height: 44px; }
nav.tabbar a[aria-current="page"] { color: var(--gold); }

/* ---------------------------------------------------------------- misc */

.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.kpi {
  background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 10px;
}
.kpi .k { font-size: 11px; color: var(--dim); }
.kpi .v { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }

.note { font-size: 11.5px; color: var(--dim); line-height: 1.65; }
.note b { color: var(--ink3); }
footer { padding: 6px 14px 20px; }

.empty { padding: 26px 8px; text-align: center; color: var(--dim); }
.spinner { padding: 26px 8px; text-align: center; color: var(--dim); }

/* ---------------------------------------------------------------- desktop */

@media (min-width: 900px) {
  body { padding-bottom: 0; font-size: 15px; }
  header { padding: 14px 22px; }
  .brand h1 { font-size: 24px; }
  main { padding: 18px 22px 40px; }
  nav.tabbar {
    position: static; height: 46px; padding: 0;
    max-width: 1180px; margin: 0 auto;
    grid-auto-columns: max-content;
    background: transparent; border-top: 0; border-bottom: 1px solid var(--line);
  }
  nav.tabbar a {
    flex-direction: row; gap: 7px; font-size: 14px; padding: 0 18px;
  }
  nav.tabbar a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold); }
  .topbar { background: linear-gradient(180deg, var(--head-a) 0%, var(--head-b) 100%); }
  table { font-size: 14px; }
  th, td { padding: 8px 12px; }
  .kpis { grid-template-columns: repeat(4, 1fr); }
}


/* ---------------------------------------------------------------- controls */

.controls {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 10px;
}
.controls input { flex: 1 1 180px; min-width: 150px; }
/* label 與它的下拉要一起換行，不然手機上 label 卡在上一行、下拉自己掉下來 */
.controls .ctl { display: inline-flex; align-items: center; gap: 8px; }
.controls .chip { min-height: 38px; }

.suggest {
  margin-top: 8px; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: var(--panel2);
}
.sugitem {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line-soft);
  color: var(--ink); font-size: 15px; padding: 10px 12px;
  min-height: 42px; cursor: pointer;
}
.sugitem:last-child { border-bottom: 0; }
.sugitem:active { background: var(--press2); }
.sugitem .sid { color: var(--dim); font-size: 12.5px; margin-right: 6px; }

th i { font-style: normal; font-weight: 400; font-size: 10px; }


/* ---------------------------------------------------------------- 排序欄 */

/* 「按了券資比排序、但券資比在畫面外」是這張寬表最容易讓人迷路的地方。
   標黃底 + 自動捲進視野（見 index.html 的 markSorted）。 */
th.sorted { background: var(--sorted-th); box-shadow: inset 0 -2px 0 var(--gold); }
td.sorted { background: color-mix(in srgb, var(--gold) 7%, transparent); }

/* 下拉直接當表頭：控制項就住在它作用的那一欄 */
select.thsel {
  min-height: 30px; padding: 0 6px;
  font-size: 13px; font-weight: 700;
  color: var(--gold); background: var(--thsel-bg); border-color: var(--thsel-line);
}
select.thsel:hover { border-color: var(--gold); }

/* 基準日推到分頁列最右邊，版面才不會左重右空 */
.chips-end {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
}
.chips { flex-wrap: wrap; }

/* 手機才顯示的重複控制項（表頭裡那兩個下拉要橫捲才看得到） */
.narrow-only { display: flex; }
@media (min-width: 900px) { .narrow-only { display: none; } }


/* ---------------------------------------------------------------- toast */

#toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(20px);
  bottom: calc(var(--tabh) + 16px + env(safe-area-inset-bottom, 0px));
  z-index: 40; max-width: min(92vw, 460px);
  padding: 10px 16px; border-radius: 10px;
  background: var(--toast-bg); border: 1px solid var(--gold); color: var(--ink);
  font-size: 13.5px; line-height: 1.5;
  opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 900px) { #toast { bottom: 24px; } }


/* ------------------------------------------------- 橫捲提示

   ⚠ 放在表格**下面**，不要疊在表格上。第一版用絕對定位的漸層貼在右緣，
   結果蓋住真的資料（`-11.2%` 被切成 `-1` 和 `.2%`）。 */

.scrollnote {
  padding: 6px 2px 0;
  font-size: 11.5px; color: var(--dim); letter-spacing: .03em;
}


/* ------------------------------------------------- 欄位群組開關

   18 欄一次全開太寬；讓使用者關掉不看的那幾組。
   ⚠ `display:none` 要同時套在 th 與 td 上，只藏一邊會整列錯位。 */

table.hide-g-big  .g-big,
table.hide-g-tier .g-tier,
table.hide-g-ret  .g-ret,
table.hide-g-px   .g-px { display: none; }

.chip.sm {
  min-height: 32px; padding: 0 11px; font-size: 12.5px;
}


/* ------------------------------------------------- Threads 週報（本機面板）

   ⚠ 這一組樣式服務的是 export_static.py 會整段刪掉的區塊，公開站上用不到；
   留在共用的 app.css 是因為 static/ 是整包複製的，多幾行 CSS 比多一支檔案單純。

   ⚠ 基準日那一條要**一眼就看到**：集保新一週的落地時間不固定，手上很可能
   還是上一週，照著過期資料發文比沒發還糟。 */

.freshbar {
  margin: 10px 0 12px; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel2);
  font-size: 13px; line-height: 1.7; color: var(--dim);
}
.freshbar b { font-size: 16px; color: var(--ink); letter-spacing: .02em; }
.freshbar.fresh   { border-color: var(--fresh-line); }
.freshbar.pending { border-color: var(--gold); }
.freshbar.stale,
.freshbar.none    { border-color: var(--up); background: var(--bad-bg); color: var(--bad-ink); }


/* 週報全文：每一則自己一塊，游標那一則加亮。
   ⚠ `.segtext` 必須 `pre-wrap` —— 顯示的就是要貼出去的字串，換行不可以被吃掉。
   ⚠ 不可以為了好看在這裡加對齊或改排版：畫面與剪貼簿是同一份內容，
     一動排版就變成「複製畫面」那個錯誤（025 的教訓）。 */

#th-report .seg + .seg { margin-top: 14px; }
.seg {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel2); padding: 10px 12px 12px;
}
.seg.cur { border-color: var(--gold); }
.segno {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--dim);
  padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.segno b { color: var(--ink); font-size: 13px; }
.segtag {
  margin-left: auto; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 16%, transparent); border: 1px solid var(--gold);
  color: var(--gold); font-size: 11px; white-space: nowrap;
}
.segtext {
  white-space: pre-wrap; word-break: break-word;
  font-size: 14.5px; line-height: 1.75;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) { .segtext { font-size: 15px; } }

/* 反覆要按的橫條（週報的複製鈕）黏在 topbar 底下。
   ⚠ `top` 用 JS 量出來的 `--topbar-h`，不可以寫死：手機 header 可能一行也可能
     兩行，桌機還多一列頁籤。差幾 px 就是被壓在 header 底下、或浮著留一條縫。
   ⚠ z-index 要**低於** `.topbar`（30），黏住的橫條才會滑進 header 底下而不是蓋住它。 */

.stickybar {
  position: sticky; top: var(--topbar-h, 0px); z-index: 20;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
}
.stickybar .note { margin: 0; }
/* 狀態列自成一行（V1.24：同一排多了存圖／分享鈕，擠在旁邊會一直換行跳動） */
.stickybar .barstatus { flex-basis: 100%; }
.stickybar .ctl select { font-size: 16px; }   /* <16px 時 iOS 一點就放大整頁 */

/* ⚠ 「下一個複製」的標記一直都在，只切 visibility。改成插拔 DOM 的話，
   那一列的高度會變（窄螢幕還會換行），捲動位置以上的內容一變高，整頁就會被
   往下推——按一次跳 30px，看起來像畫面自己在動。 */
.segtag.off { visibility: hidden; }


/* ---------------------------------------------------------------- 暗色／亮色切換

   站名那一列最右邊（使用者指定位置，同 015 / 024）。按鈕上寫的是「按下去會切到
   哪一種」。手機只留圖示、做成 38px 圓鈕，站名列才塞得下（見 AI_CONTEXT）。 */
.themebtn {
  margin-left: auto; flex: 0 0 auto; align-self: center;
  min-height: 30px; padding: 0 11px;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel2); color: var(--dim);
  font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer;
}
@media (hover: hover) { .themebtn:hover { color: var(--ink); border-color: var(--gold); } }
@media (max-width: 899px) {
  .themebtn { min-width: 38px; min-height: 38px; padding: 0; }
  .themebtn .tl { display: none; }
}
/* 「? 教學」與主題鈕同一種膠囊，排在它左邊，由它吃掉 margin-left:auto */
.themebtn + .themebtn { margin-left: 6px; }
/* 回首頁：全站慣例（同 019 / 020 / 024），與主題鈕同一種膠囊，排在最右邊 */
a.themebtn { text-decoration: none; }
/* 加了皮小秋™ 與回首頁之後，手機站名列塞不下副標：窄幅只留站名＋三顆圓鈕 */
@media (max-width: 519px) {
  .brand .sub { display: none; }
  .brand h1 { white-space: nowrap; }
  .themebtn + .themebtn { margin-left: 4px; }
}
/* 320px 級的小手機連圓鈕都塞不下：讓三顆鈕整排換到站名下一行（靠右），
   站名本身不拆（.pxq / .ttl 各自 nowrap） */
@media (max-width: 359px) {
  .brand { flex-wrap: wrap; row-gap: 6px; }
  .brand h1 { flex-basis: 100%; }
}

/* 畫面導覽（引擎 shared/tour/tour.css）讀 --accent/--card/--text/--text2/--border，
   各站變數名不同，抓不到就退回寫死的深色。只在導覽元素上對應成本站色票，
   亮色模式才不會冒出一張深色卡片；也不污染本站 :root。 */
#tour-card, #tour-spot, .tour-demo-badge {
  --accent: var(--gold); --card: var(--panel); --text: var(--ink);
  --text2: var(--dim); --border: var(--line);
}

/* 週報圖片版預覽（V1.24，本機週報頁）：IG 4:5 縮圖格，手機兩欄、桌機自動多欄 */
.imgstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.imgstrip figure { margin: 0; }
.imgstrip img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.imgstrip figcaption { font-size: 12px; color: var(--dim); margin-top: 4px; }
#img-card .controls .chip:disabled { opacity: .5; }