/* category.css — Phase 3：分類分頁、工具頁、自選空狀態（PHASE3_PLAN §3、§4、§8、§11） */

/* ── 八份文件夾：總覽（左右各 4 份，些微錯位，不旋轉文字）──
   頁籤＝分類名稱＋檔數，紙張＝分類說明。8 份同高（grid 1fr 列＝最高那份的內容），
   後一份只疊住前一份底部留白（-6px），文字不被遮。提醒文字在整疊下方，不放在文件夾底下。 */
#page-cat { position: relative; }
.cat-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(4, 1fr) auto;
  column-gap: 12px; padding: 2px 0 4px;
}
.cat-stack { display: contents; }
#catStackL > .cat-band { grid-column: 1; }
#catStackR > .cat-band { grid-column: 2; }
.cat-stack > .cat-band:nth-child(1) { grid-row: 1; }
.cat-stack > .cat-band:nth-child(2) { grid-row: 2; }
.cat-stack > .cat-band:nth-child(3) { grid-row: 3; }
.cat-stack > .cat-band:nth-child(4) { grid-row: 4; }
.cat-band {
  position: relative; min-width: 0;
  margin: 0 0 -6px var(--dx, 0px);
  display: flex; flex-direction: column; align-items: stretch;
  padding: 0 10px 10px;
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 10px 10px 0 0;
  background: var(--card2); color: var(--bright);
  font: inherit; font-size: 15px; text-align: left; cursor: pointer;
  box-shadow: var(--shadow-band);
  transition: transform 200ms cubic-bezier(.2, .8, .2, 1), opacity 180ms;
}
.cat-band:active { background: var(--card); }
/* PO Visual Polish：8 個分類各自識別色（主色＝頁籤左側 accent 與檔數；底＝同色系淡 tint）。
   Light 底取 PO 參考的淡色；主動式在奶油頁底上改偏杏橘 #FFE8CC 才分得開。Dark 底＝同色系深色以 50%（按下 70%）疊在 --bg #0F141B 上的實色（文件夾互相交疊，不能用透明色）。 */
.cat-band[data-k] { background: var(--cat-bg); box-shadow: inset 4px 0 0 var(--cat), var(--shadow-band); }
.cat-band[data-k]:active { background: var(--cat-bg-on); }
.cat-band[data-k] .cb-n { color: var(--cat-ink, var(--dim)); font-weight: 700; }
.cat-band[data-k] .cb-sub { color: #B6C0CC; }   /* dark：色 tint 底上 --dim 只剩 4.0～4.2，提亮到 ≥ 6 */
:root[data-theme="light"] .cat-band[data-k] .cb-sub { color: var(--dim); }
.cat-band[data-k="mcap"]     { --cat: #3B82F6; --cat-bg: #162752;  --cat-bg-on: #1A2F69;  --cat-ink: #93C5FD;}
.cat-band[data-k="div"]      { --cat: #FF5964; --cat-bg: #47181C;  --cat-bg-on: #5D1A1C;  --cat-ink: #FDA4AF;}
.cat-band[data-k="tech"]     { --cat: #8B5CF6; --cat-bg: #351A68;  --cat-bg-on: #441D88;  --cat-ink: #C4B5FD;}
.cat-band[data-k="bond"]     { --cat: #10B981; --cat-bg: #0A3A30;    --cat-bg-on: #094839;  --cat-ink: #6EE7B7;}
.cat-band[data-k="active"]   { --cat: #F59E0B; --cat-bg: #502A14;  --cat-bg-on: #6B3312;  --cat-ink: #FCD34D;}
.cat-band[data-k="overseas"] { --cat: #06B6D4; --cat-bg: #0E4456; --cat-bg-on: #0E576D;  --cat-ink: #67E8F9;}
.cat-band[data-k="theme"]    { --cat: #EC4899; --cat-bg: #561634;  --cat-bg-on: #72163E;  --cat-ink: #F9A8D4;}
.cat-band[data-k="other"]    { --cat: #84CC16; --cat-bg: #2E4815;  --cat-bg-on: #3A5D13;  --cat-ink: #BEF264;}
:root[data-theme="light"] .cat-band[data-k="mcap"]     { --cat-bg: #E6F0FF; --cat-bg-on: #D3E3FF; --cat-ink: #1D4ED8; }
:root[data-theme="light"] .cat-band[data-k="div"]      { --cat-bg: #FFE9EC; --cat-bg-on: #FFD6DB; --cat-ink: #B91C2C; }
:root[data-theme="light"] .cat-band[data-k="tech"]     { --cat-bg: #F1E9FF; --cat-bg-on: #E4D5FF; --cat-ink: #6D28D9; }
:root[data-theme="light"] .cat-band[data-k="bond"]     { --cat-bg: #E8F9F1; --cat-bg-on: #D2F2E3; --cat-ink: #047857; }
:root[data-theme="light"] .cat-band[data-k="active"]   { --cat-bg: #FFE8CC; --cat-bg-on: #FFDBB0; --cat-ink: #9A4508; }
:root[data-theme="light"] .cat-band[data-k="overseas"] { --cat-bg: #E6F7FF; --cat-bg-on: #CCEFFB; --cat-ink: #0E7490; }
:root[data-theme="light"] .cat-band[data-k="theme"]    { --cat-bg: #FDEAF3; --cat-bg-on: #FBD5E7; --cat-ink: #BE185D; }
:root[data-theme="light"] .cat-band[data-k="other"]    { --cat-bg: #F0FBE6; --cat-bg-on: #E1F5CC; --cat-ink: #4D7C0F; }
.cb-tab { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 34px; }
.cb-name { font-weight: 600; min-width: 0; line-height: 1.3; }   /* 窄螢幕（320）長名稱自然換行，不截斷；8 份仍同高 */
.cb-n { font-family: var(--mono); font-size: 13px; color: var(--dim); flex: 0 0 auto; }
.cb-sub { font-size: 13px; line-height: 1.45; color: var(--dim); font-weight: 400; }
.cat-note { grid-column: 1 / -1; grid-row: 5; margin: 10px 0 0; font-size: 13px; color: var(--dim); line-height: 1.7; padding: 4px 4px 0; }

/* ── 展開的資料夾：主閱讀區 ── */
.cat-main { display: none; }
.cat-head { display: flex; align-items: center; gap: 8px; padding: 6px 2px 4px; }
.cat-title { flex: 1 1 auto; min-width: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-back { order: -1; font-size: 18px; line-height: 1; }   /* 返回分類（原 ✕）：固定在標題左側 */
.cat-btn {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  color: var(--dim); font: inherit; font-size: 14px; padding: 6px 10px; min-height: 36px;
  cursor: pointer; flex: 0 0 auto;
}
.cat-sub { font-size: 13px; color: var(--dim); line-height: 1.6; padding: 0 2px 8px; }
.cat-seg { display: flex; gap: 6px; margin-bottom: 8px; }
.cat-seg button {
  flex: 1 1 0; min-height: 40px; background: var(--card); color: var(--dim);
  border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 14px; cursor: pointer;
}
.cat-seg button.on { color: var(--link); border-color: var(--link); }
.cat-strip { display: flex; gap: 4px; margin-bottom: 8px; }
.cat-strip button {
  flex: 1 1 0; min-width: 44px; min-height: 40px; padding: 0 2px;
  background: var(--card2); color: var(--bright); border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 13px; cursor: pointer;
}
.cat-hint { font-size: 13px; color: var(--fair); padding: 4px 2px; }
.cat-list {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: 10px; background: var(--card2);   /* PO Visual Polish 2：清單底＝首頁價格合理區 .home-row 底色（--card2） */
}
/* 列＝容器＋主區按鈕（開 Detail）＋ ♡（PHASE4_PLAN §3.1）；高度與原本單一按鈕相同（≥ 44px） */
.cat-row {
  display: flex; align-items: stretch; width: 100%; min-height: 44px;
  border-bottom: 1px solid var(--border);
}
.cr-main {
  display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 0 8px 12px;
  background: none; color: var(--bright); border: none; font: inherit; text-align: left; cursor: pointer;
}
.cat-row:last-child { border-bottom: none; }
.cr-code { flex: 0 0 64px; }   /* typography：base.css 全站 ETF 代碼／名稱 */
.cr-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-more {
  width: 100%; min-height: 44px; margin-top: 6px;
  background: var(--card2); color: var(--dim); border: 1px solid var(--border); border-radius: 10px;
  font: inherit; font-size: 14px; cursor: pointer;
}
.cat-empty { padding: 16px 14px; font-size: 14px; color: var(--dim); line-height: 1.7; text-align: center; }
.cat-flow-host { margin-top: 4px; }
.cat-flow { display: block; }
.cat-foot { font-size: 12px; color: var(--dim); line-height: 1.6; padding: 8px 2px 4px; }

/* ── 過場（只動 transform／opacity；約 200–300ms） ── */
#page-cat[data-state="overview"] .cat-main { display: none; }
#page-cat[data-state="open"] .cat-stage { display: none; }
#page-cat[data-state="open"] .cat-main,
#page-cat[data-state="opening"] .cat-main,
#page-cat[data-state="closing"] .cat-main { display: block; }
#page-cat[data-state="opening"] .cat-main { animation: catIn 240ms cubic-bezier(.2, .8, .2, 1) 120ms both; }
#page-cat[data-state="closing"] .cat-main { animation: catOut 200ms cubic-bezier(.2, .8, .2, 1) both; }
#page-cat[data-state="overview"] .cat-band { animation: catFade 200ms ease-out; }
#page-cat[data-state="opening"] .cat-band:not(.is-pulled) { opacity: 0; }
#page-cat[data-state="opening"] .cat-band.is-pulled { transform: translateY(-10px); z-index: 99; }
#page-cat[data-state="opening"] .cat-stage,
#page-cat[data-state="closing"] .cat-stage { pointer-events: none; }
#page-cat:not([data-state="overview"]) .cat-note { display: none; }
#page-cat:not([data-state="overview"]) .cat-stage { padding: 0; }
@keyframes catIn  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes catOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(12px); } }
@keyframes catFade { from { opacity: 0; } to { opacity: 1; } }

/* 減少動態效果：狀態照樣切換，不做位移與淡入淡出 */
@media (prefers-reduced-motion: reduce) {
  #page-cat, #page-cat * { animation: none !important; transition: none !important; }
}

/* ── 低高度讓位（PHASE3_PLAN §11.4）──
   gs-ckm（Phase 1 低高度搜尋）：隱藏次要標籤與分類說明。全站免責（.disclaimer）不在此隱藏，Phase 1 法遵呈現不變 */
body.gs-ckm .cat-strip,
body.gs-ckm .cat-sub,
body.gs-ckm .cat-note,
body.gs-ckm .cat-foot { display: none; }
.cat-tight .cat-sub,
.cat-tight .cat-foot { display: none; }
.cat-tight2 .cat-strip { flex-wrap: nowrap; overflow-x: auto; height: 40px; }
.cat-tight2 .cat-strip button { flex: 0 0 auto; }
/* LR-4 responsive fallback（PO 核准方案 B）：可用高度不足一列時收合清單，但仍留在版面中（不 display:none），
   scrollTop 等狀態保留；高度恢復後移除 class 即展開。 */
.cat-list.cat-off { max-height: 0 !important; border-width: 0 !important; visibility: hidden; }
.cat-gone { display: none !important; }

/* 非鍵盤低高度（PHASE3_PLAN §11.4，cat-tight3）：頁面頂端間距歸零；標題與分段併成同一列（grid，DOM 不搬動）；
   次要標籤維持一列；「查看更多」改放清單底部。目標：清單實際可見 ≥ 44px，且在導覽列上方。 */
#page-cat.cat-tight3 { padding-top: 0; }
#page-cat .cat-main.cat-tight3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head seg" "sub sub" "strip strip" "body body";
  column-gap: 6px;
  row-gap: 0;
}
#page-cat .cat-tight3 > .cat-head { grid-area: head; padding: 0 2px; min-width: 0; }
#page-cat .cat-tight3 > .cat-seg { grid-area: seg; margin: 0; }
#page-cat .cat-tight3 > .cat-subrow { grid-area: sub; }
#page-cat .cat-tight3 > .cat-seg button { min-height: 28px; padding: 0 8px; font-size: 13px; flex: none; }
#page-cat .cat-tight3 > .cat-strip { grid-area: strip; margin: 2px 0 0; }
#page-cat .cat-tight3 > .cat-list,
#page-cat .cat-tight3 > .cat-flow-host { grid-area: body; }
#page-cat .cat-tight3 .cat-btn { min-height: 28px; padding: 2px 8px; font-size: 13px; }
#page-cat .cat-tight3 .cat-title { font-size: 15px; }
#page-cat .cat-tight3 > .cat-more { display: none; }
/* 直向店內／店門口（PHASE3 Gate 核准；PHASE5_PLAN §8.2 F1 拆兩層）：
   切換分類層 cat-sw（直向、非鍵盤；清單與持股異動都套用）：「切換分類 ▼／▲」（44 高）、inside 時其他分類收合、標題列單列化。
   清單專屬層 cat-ctl（另需 view=list）：查看更多在清單底部（外部按鈕隱藏）、分類說明文字（catFoot）隱藏。 */
.cat-expand { display: none; }
#catMain.cat-sw .cat-expand {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  min-width: 44px; height: 44px; padding: 0 12px; margin: 0;
  background: var(--card2); color: var(--bright); border: 1px solid var(--border); border-radius: 8px;
  font: inherit; font-size: 14px; line-height: 1; white-space: nowrap; cursor: pointer;
}
/* 說明列（目前為空；保留 DOM 供 tight3 grid 的 sub 區域） */
.cat-subrow { display: flex; align-items: center; gap: 8px; }
.cat-subrow > .cat-sub { flex: 1 1 auto; min-width: 0; }
.cat-sub:empty { padding: 0; }   /* 分類說明在文件夾紙張上、切換分類已移到標題列：說明列為空，零高度 */
/* 直向（cat-ctl）：頁面頂端間距與標題列高度縮小，讓金色提醒與分類內容之間保留正常間距 */
#page-cat.cat-sw { padding-top: 4px; }
/* 直向 inside 標題列：[←] 分類名稱 … [代碼 ⇅] [切換分類 ▼]，一列放完；寬度不足（320）時切換分類換到第二列靠右，名稱不截斷 */
#page-cat.cat-sw .cat-main > .cat-head { padding: 0 2px; flex-wrap: wrap; column-gap: 6px; row-gap: 6px; }
#catMain.cat-sw .cat-title { cursor: pointer; flex: 1 0 auto; overflow: visible; }
#catMain.cat-sw .cat-back { min-width: 44px; height: 44px; padding: 0; }
#catMain.cat-sw .cat-expand { margin-left: auto; }
#catMain.cat-inside > #catStrip { display: none; }
#catMain.cat-ctl > .cat-more { display: none; }
#catMain.cat-ctl > .cat-foot { display: none; }
.cat-more-in {
  display: block; width: 100%; min-height: 44px;
  background: var(--card2); color: var(--dim); border: none; border-top: 1px solid var(--border);
  font: inherit; font-size: 14px; cursor: pointer;
}

/* ── 處理中指示（PHASE3_PLAN §7.8）：只顯示，不改狀態 ── */
.router-proc {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 10px);
  background: var(--card2); color: var(--dim); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; z-index: 120;
}

/* ── 工具頁：三張大型功能卡（PHASE5_PLAN §3.1，PO Change #1）。整張卡是 button ── */
.tool-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.tool-card {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 84px; padding: 14px 16px;
  background: var(--card); color: var(--bright); border: 1px solid var(--border); border-radius: 14px;
  font: inherit; text-align: left; cursor: pointer;
}
.tool-card:active { background: var(--card2); }
/* PO Visual Polish 2：三張入口卡識別色（Light＝PO 指定；Dark＝PO 深色三卡參考圖取樣）。版型與功能不變 */
#toolRank { background: #1F262F; border-color: #363C46; }
#toolDiv  { background: #2D2409; border-color: #77653E; }
#toolFlow { background: #1C2821; border-color: #586E63; }
:root[data-theme="light"] #toolRank { background: #EAF2FF; border-color: #C9DDFB; }
:root[data-theme="light"] #toolDiv  { background: #FFF0CF; border-color: #EED9A6; }
:root[data-theme="light"] #toolFlow { background: #E5F5EB; border-color: #BFE3CC; }
#toolRank:active, #toolDiv:active, #toolFlow:active { filter: brightness(.96); }
.tool-card .tc-ic { font-size: 28px; line-height: 1; flex-shrink: 0; width: 34px; text-align: center; }
.tool-card .tc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tool-card .tc-text b { font-size: 18px; }
.tool-card .tc-text span { font-size: 15px; color: var(--dim); line-height: 1.4; }
.tool-card .tc-arrow { font-size: 26px; color: var(--dim); line-height: 1; flex-shrink: 0; }

/* ── 自選空狀態（Phase 3 只做占位；功能於 Phase 4） ── */
.empty-state { text-align: center; padding: 48px 16px; }
.es-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.es-sub { font-size: 14px; color: var(--dim); }

/* 低高度（gs-ckm）：標題與分段切換壓成緊湊列（PHASE3_PLAN §11.3 P3：與 P1 同列、縮小） */
body.gs-ckm .cat-head { padding: 0 0 2px; gap: 6px; }
body.gs-ckm .cat-title { font-size: 15px; }
body.gs-ckm .cat-btn { min-height: 30px; padding: 4px 8px; font-size: 13px; }
body.gs-ckm .cat-seg { margin-bottom: 4px; }
body.gs-ckm .cat-seg button { min-height: 30px; font-size: 13px; }