/* 公版策略 #38「外資夜盤動態」
 *
 * 🔴 顏色一律吃 Layer 2 語義 token（--color-*），不可以寫死色碼，
 *    也不可以吃 Layer 1 primitive（--primitive-*）——
 *    primitive 在深色主題**不會被重新定義**，寫了就是深色模式白卡
 *    （#35 上線當天 .ssp-card 全部中招）。
 *
 * 🔴 實查過才用的 token 名（寫錯會變透明／無色，不噴錯）：
 *    邊框是 --color-border-default（**不是** --color-border）
 *    危險字是 --color-danger-fg（**不是** --color-danger-text）
 *
 * 色彩分工（整個面板只有一條規則）：
 *   紅＝買超、綠＝賣超（台股慣例）。夜盤／白天／合計**不用顏色區分** ——
 *   它們靠「在哪一排」區分，顏色全部留給買賣方向。
 *   一個通道一件事，不用交叉解讀。
 */

.s38-wrap {
  --s38-up: #c0483f;     /* 紅＝買超。與 #36 的 --s36-up 同值，保持全站一致 */
  --s38-dn: #4a9163;     /* 綠＝賣超 */
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}
.dark-mode .s38-wrap,
[data-theme="dark"] .s38-wrap {
  --s38-up: #e8566e;
  --s38-dn: #38b77f;
}

.s38-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: 14px;
}
.s38-eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 10px;
}
.s38-sub { color: var(--color-text-secondary); font-size: 12.5px; margin: 8px 0 0; }
.s38-empty {
  color: var(--color-text-secondary); font-size: 13px; padding: 18px; text-align: center;
}

/* 不可折疊的定位揭露 */
.s38-disclosure {
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  border-left-width: 4px;
  border-radius: 4px;
  padding: 11px 14px;
  color: var(--color-danger-fg);
  font-size: 12.5px;
  line-height: 1.6;
}

/* 昨晚四個數字 */
.s38-night {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 1px; background: var(--color-border-default);
  border: 1px solid var(--color-border-default); border-radius: 5px; overflow: hidden;
}
.s38-stat { background: var(--color-bg-elevated); padding: 11px 13px; min-width: 0; }
.s38-k {
  font-size: 11px; color: var(--color-text-tertiary); margin-bottom: 3px;
  white-space: nowrap;
}
.s38-v {
  font-variant-numeric: tabular-nums; font-size: 21px; font-weight: 600;
  letter-spacing: -.02em; line-height: 1.15; color: var(--color-text-primary);
}
.s38-t { font-size: 11px; color: var(--color-text-tertiary); margin-top: 2px; }
.s38-up { color: var(--s38-up); }
.s38-down { color: var(--s38-dn); }
.s38-verdict {
  margin-top: 12px; padding: 10px 13px; background: var(--color-bg-inset);
  border-radius: 4px; font-size: 13px; color: var(--color-text-primary);
}

/* 控制列 */
.s38-ctl {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 10px;
}
.s38-seg {
  display: inline-flex; background: var(--color-bg-inset);
  border: 1px solid var(--color-border-default); border-radius: 4px; overflow: hidden;
}
.s38-seg button {
  appearance: none; border: 0; background: transparent;
  color: var(--color-text-secondary); font: inherit; font-size: 12px;
  padding: 5px 11px; cursor: pointer;
}
.s38-seg button + button { border-left: 1px solid var(--color-border-default); }
.s38-seg button[aria-pressed="true"] {
  background: var(--color-bg-elevated); color: var(--color-text-primary); font-weight: 600;
}
.s38-seg button:focus-visible { outline: 2px solid var(--s38-up); outline-offset: -2px; }
.s38-rule { margin-left: auto; font-size: 12px; color: var(--color-text-secondary); }
.s38-sw {
  display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px;
}
.s38-swup { background: var(--s38-up); }
.s38-swdown { background: var(--s38-dn); }

/* 圖 */
.s38-svg { width: 100%; height: auto; display: block; }
.s38-grid, .s38-zero { stroke: var(--color-border-default); stroke-width: 1; }
.s38-zero { opacity: .9; }
.s38-grid { opacity: .5; }
.s38-price { stroke: var(--color-text-secondary); stroke-width: 1.4; }
.s38-ax {
  fill: var(--color-text-tertiary); font-size: 10px; font-variant-numeric: tabular-nums;
}
.s38-rowlab { fill: var(--color-text-primary); font-size: 11px; font-weight: 600; }
.s38-rowbg { fill: var(--color-border-default); opacity: .16; }
.s38-barup { fill: var(--s38-up); }
.s38-bardown { fill: var(--s38-dn); }
/* 超出刻度的斷口：要和柱子所在的底色同色，否則會看成一條線 */
.s38-clip { fill: var(--color-bg-elevated); }

/* 否決證據表 */
.s38-tblwrap { overflow-x: auto; }
.s38-tbl {
  border-collapse: collapse; width: 100%; font-size: 12.5px; min-width: 380px;
  color: var(--color-text-primary);
}
.s38-tbl th, .s38-tbl td {
  padding: 7px 9px; text-align: right;
  border-bottom: 1px solid var(--color-border-default); white-space: nowrap;
}
.s38-tbl th {
  font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-text-tertiary); font-weight: 600;
}
.s38-tbl th:first-child, .s38-tbl td:first-child { text-align: left; }
.s38-n { font-variant-numeric: tabular-nums; }

.s38-lim {
  margin: 0; padding-left: 1.15em; font-size: 12.5px; color: var(--color-text-secondary);
}
.s38-lim li + li { margin-top: 5px; }

@media (max-width: 480px) {
  .s38-rule { margin-left: 0; width: 100%; }
  .s38-v { font-size: 18px; }
}