/**
 * obsidian.css
 * 「Charcoal Obsidian」設計規範（2026-10，依 Stitch 產出的 stitch_yeefinance_ui_ux_redesign / DESIGN.md）：
 * 精準極簡、純炭黑底（不帶藍色偏色）、1px 細邊框、等寬數字、鉑金色（cool platinum）強調。
 * 只套用在 <body class="ob"> 的頁面（目前是 ETF 專區與投資組合）：用同一組變數名稱（--bg、--panel、--brass…）覆寫 site.css 的色票，
 * 所以頁面裡原本引用這些變數的元件會自動換色；其他頁面維持原本的藍色系，不受影響。
 * 台股慣例不變：漲／正報酬＝紅（--up）、跌／負報酬＝綠（--down），Stitch 的稿子也是這樣用。
 * 日間模式用同一套結構的中性灰階（zinc）對應，--brass（強調色）在日間是近黑的墨色、夜間是鉑金色。
 */

/* ---------- 變數 ----------
 * 顏色（--bg、--panel、--brass、--up…）一律沿用 site.css，跟其他分頁一致（2026-10 依使用者回報：
 * 日間版的灰階強調色在「債券型」等篩選上對比不足）；這裡只定義圓角、等寬字型與圖表序列色。 */
body.ob{
  --ob-radius:8px;
  --ob-mono:'JetBrains Mono', ui-monospace, monospace;
  --ob-series-1:#0284c7; --ob-series-2:#7c3aed; --ob-series-3:#d97706; --ob-series-4:#db2777;
  font-family:'Geist','Inter','Noto Sans TC',sans-serif;
  letter-spacing:0;
}
:root[data-theme="dark"] body.ob{
  --ob-series-1:#38bdf8; --ob-series-2:#a78bfa; --ob-series-3:#fbbf24; --ob-series-4:#f472b6;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body.ob{
    --ob-series-1:#38bdf8; --ob-series-2:#a78bfa; --ob-series-3:#fbbf24; --ob-series-4:#f472b6;
  }
}

/* ---------- 共用元件：扁平、細邊、小圓角 ---------- */
body.ob .topbar{box-shadow:none;border-bottom:1px solid var(--hairline);}
body.ob .card{background:var(--panel);border:1px solid var(--hairline);border-radius:var(--ob-radius);box-shadow:none;}
body.ob .card-title{font-family:'Geist','Noto Sans TC',sans-serif;font-weight:600;letter-spacing:-.01em;}
body.ob .btn{border-radius:4px;font-family:'Geist','Noto Sans TC',sans-serif;}
body.ob .btn-primary,body.ob .btn.primary{background:var(--brass);border-color:var(--brass);color:var(--accent-ink);}
body.ob .badge{border-radius:4px;}
body.ob .site-nav a.active{background:var(--brass);color:var(--accent-ink);}
body.ob h1,body.ob h2,body.ob h3{font-family:'Geist','Noto Sans TC',sans-serif;letter-spacing:-.015em;}
body.ob .data-table th{font-weight:500;letter-spacing:.04em;color:var(--bone-dim);background:transparent;border-bottom:1px solid var(--hairline);}
body.ob .data-table td{border-bottom:1px solid var(--hairline);}
body.ob .data-table td.num,body.ob .data-table th.num,body.ob td.num,body.ob th.num{font-family:var(--ob-mono);font-variant-numeric:tabular-nums;}
body.ob .table-wrap{border:1px solid var(--hairline);border-radius:var(--ob-radius);background:var(--panel);}
body.ob input,body.ob select{border-radius:4px;}
body.ob input:focus,body.ob select:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 1px var(--brass);}

/* ---------- Obsidian 元件 ---------- */
.ob-mono{font-family:var(--ob-mono);font-variant-numeric:tabular-nums;}
.ob-eyebrow{font-family:var(--ob-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.ob-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:4px;border:1px solid var(--hairline);background:var(--panel-2);color:var(--bone-dim);font-size:12px;font-family:var(--ob-mono);white-space:nowrap;}
.ob-chip.up{background:color-mix(in srgb,var(--up) 10%,transparent);border-color:color-mix(in srgb,var(--up) 22%,transparent);color:var(--up);}
.ob-chip.down{background:color-mix(in srgb,var(--down) 10%,transparent);border-color:color-mix(in srgb,var(--down) 22%,transparent);color:var(--down);}
.ob-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brass);flex:0 0 auto;}
.ob-stat{padding:14px 16px;border:1px solid var(--hairline);border-radius:var(--ob-radius);background:var(--panel);min-width:0;}
.ob-stat .l{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;letter-spacing:.06em;color:var(--faint);}
.ob-stat .v{margin-top:8px;font-family:var(--ob-mono);font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--bone);font-variant-numeric:tabular-nums;}
.ob-stat .v small{font-size:13px;font-weight:400;color:var(--faint);margin-left:4px;}
.ob-stat .s{margin-top:4px;font-size:12px;color:var(--faint);}
.ob-seg{display:inline-flex;border:1px solid var(--hairline);border-radius:4px;overflow:hidden;background:var(--panel);}
.ob-seg button{padding:5px 12px;border:0;background:transparent;color:var(--faint);font:inherit;font-size:12px;font-family:var(--ob-mono);cursor:pointer;}
.ob-seg button+button{border-left:1px solid var(--hairline);}
.ob-seg button.active{background:var(--panel-2);color:var(--bone);font-weight:600;}
.ob-sec{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-weight:600;font-size:15px;}
.ob-sec .material-symbols-outlined{font-size:18px;color:var(--bone-dim);}
.ob-sec .sub{font-weight:400;font-size:12px;color:var(--faint);}
.ob-note{margin:10px 0 0;font-size:12px;line-height:1.7;color:var(--faint);}