/* =====================================================================
   机构大单监测 —— 主题
   配色与 stock99.kdns.fr 主站完全对齐（深色数据终端）
   变量取自 orderflow-worker/public/index.html 的 :root

   2026-10-28 从 etf.stock99.kdns.fr 收编：文件改名 theme.css →
   institution-theme.css。改名不是洁癖 —— public/ 是扁平目录，
   `theme.css` 这种通用名将来一定会被别的页面撞上，
   撞上时两边都以为自己拿到的是自己的样式。
   ===================================================================== */

:root{
  /* ── 主站色板（原文抄录，勿改）── */
  --bg:#0c0f16;      --bg2:#0f131c;
  --panel:#161a24;   --panel2:#1d2230;  --panel3:#252b3b;
  --line:#1e2430;    --line2:#2b3244;   --line3:#3a4358;
  --txt:#e3e8f2;     --sub:#6b7488;     --dim:#4a5266;
  --up:#2ecc9b;      --down:#f0616d;    --accent:#4d8dff;  --warn:#f5a524;
  --up-dim:rgba(46,204,155,.12); --down-dim:rgba(240,97,109,.12);

  /* ── 本页序列色（在主站色板内取，语义自洽）── */
  --c-ratio:#4d8dff;     /* ETF占比·全口径 —— 强调色 */
  --c-ratio-sse:#8fb6ff; /* ETF占比·沪市真值 —— 同色系浅色 */
  --c-flow:#f5a524;      /* 累计净申购 —— warn */
  --c-hs300:#8b93a7;     /* 沪深300 */
  --c-sse:#f0616d;       /* 上证指数 */
  --c-szse:#2ecc9b;      /* 深证成指 */
  --c-cyb:#a78bfa;       /* 创业板指（策略宿主，给最高辨识度）*/

  --c-buy:#2ecc9b;       /* E策略买点 */
  --c-sell:#f0616d;      /* E策略卖点 */

  /* 零轴 —— 不参与任何数据序列，只做基准线 */
  --zero:#eef2f8;

  --nav-h:46px;
}

*{box-sizing:border-box}
html,body{
  margin:0;height:100%;
  background:var(--bg);color:var(--txt);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
       "PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── 布局 ──
 *
 * 底部导航（nav.js）是 position:fixed，还在 body 末尾塞了一个
 * 46px 的 .nav-spacer 占位块。
 *
 * 踩过的坑（两次）：
 *   1) #wrap 用 height:100% —— 加上 spacer 后总高 = 100% + 46px，
 *      页面出现纵向滚动，nav 固定在视口底部，压住画布的时间轴。
 *   2) 改成 calc(100dvh - 46px) 后仍然挤 —— 因为 html/body 也是
 *      height:100%，而 #wrap 的父级是 body；body 自身高度不扣 nav，
 *      #wrap 的百分比/dvh 计算和 body 的实际内容区对不上，
 *      flex 子项按 body 的高度分配，#stage 拿到的比预期多，
 *      canvas 画出去的部分被 nav 裁掉。
 *
 * 最终方案：不吃百分比，直接锚定四边。
 *   position:fixed; inset:0 0 var(--nav-h) 0
 * 这样 #wrap 的盒子就是「视口减去 nav 高度」，与父级高度彻底解耦，
 * 不依赖 html/body 的高度、不依赖 dvh 的浏览器实现、
 * 也不受 spacer 影响（spacer 在 body 流里，但 #wrap 已经脱离流）。
 */
#wrap{
  position:fixed;
  left:0;right:0;bottom:var(--nav-h);
  top:0;
  display:flex;flex-direction:column;
  overflow:hidden;
}

/* nav.js 插入的占位块：本页 #wrap 已脱离文档流，不需要它。 */
body > .nav-spacer{display:none}

/* ── 头部 ── */
header{padding:14px 20px 8px;flex:0 0 auto;border-bottom:1px solid var(--line)}
h1{
  margin:0;font-size:18px;font-weight:700;letter-spacing:-.2px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
h1 .tag{
  font-size:11.5px;font-weight:500;color:var(--sub);
  letter-spacing:0;padding:2px 8px;border-radius:4px;
  background:var(--panel2);border:1px solid var(--line2);
}
.sub{margin-top:5px;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}

/* 副标题高度必须稳定：峰值扫描期间「峰值扫描 1200/3501」这种计数会让文字换行数
   在 1 行和 2 行之间反复跳，header 一变高，#stage 跟着变矮，
   canvas 就在一帧里被重排、下一帧才重画 —— 底部刻度因此被切。
   固定成两行高，内容长了就截断，不用换行表达。 */
.sub{
  min-height:2.9em;
  overflow:hidden;
}
.sub b{color:var(--accent);font-weight:600}

/* ── 图例 ── */
#legend{
  display:flex;flex-wrap:wrap;gap:4px 14px;
  padding:9px 20px 10px;font-size:12px;
  flex:0 0 auto;border-bottom:1px solid var(--line);background:var(--bg2);
}
.lg{
  display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
  padding:3px 7px;border-radius:5px;color:var(--sub);
  transition:background .12s,color .12s;
}
.lg:hover{background:var(--panel2);color:var(--txt)}
.lg.off{opacity:.3}
.sw{width:16px;height:3px;border-radius:2px;flex:0 0 auto}
.sw.dash{background:none!important;border-top:2px dashed var(--sub);height:0}
.sw.mark{
  width:14px;height:14px;border-radius:2px;transform:rotate(45deg);
  border:2px solid currentColor;background:transparent;
}

/* ── 画布区 ── */
#stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
canvas{display:block;width:100%;height:100%;cursor:crosshair}

/* ── tooltip ── */
#tip{
  position:absolute;pointer-events:none;opacity:0;
  transition:opacity .1s;
  background:rgba(22,26,36,.97);
  border:1px solid var(--line3);border-radius:8px;
  padding:9px 11px;font-size:12px;line-height:1.7;
  box-shadow:0 8px 28px rgba(0,0,0,.6);
  min-width:200px;max-width:300px;z-index:20;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
#tip.on{opacity:1}
#tip .tt{
  font-weight:700;margin-bottom:6px;font-size:12.5px;color:var(--txt);
  border-bottom:1px solid var(--line2);padding-bottom:5px;
  display:flex;justify-content:space-between;gap:12px;
}
#tip .tt .d{color:var(--sub);font-weight:500}
#tip .tr{display:flex;justify-content:space-between;gap:18px}
#tip .tr>span:first-child{color:var(--sub)}
#tip .tr>span:last-child{font-variant-numeric:tabular-nums;font-weight:600;color:var(--txt)}
#tip .sect{
  margin:7px 0 4px;font-size:11px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.6px;
}
#tip .sig{
  display:flex;justify-content:space-between;gap:14px;
  padding:3px 6px;margin:2px -6px;border-radius:4px;
}
#tip .sig.b{background:var(--up-dim)}
#tip .sig.s{background:var(--down-dim)}
#tip .sig.b .k{color:var(--up);font-weight:700}
#tip .sig.s .k{color:var(--down);font-weight:700}
#tip .sig .v{font-variant-numeric:tabular-nums;color:var(--txt)}

/* ── 提示气泡 ── */
#hint{
  position:absolute;left:50%;top:14px;transform:translateX(-50%);
  background:rgba(37,43,59,.94);color:var(--txt);font-size:12px;
  padding:7px 15px;border-radius:16px;border:1px solid var(--line3);
  opacity:0;transition:opacity .3s;pointer-events:none;z-index:30;
  white-space:nowrap;
}
#hint.on{opacity:1}

/* ── 控制条 ──
 *
 * 这里曾经是 #range 和 #ctl 两个 absolute 元素贴在 canvas 右下角，
 * 而 canvas 内部的时间轴刻度画在 M.t + PH + 10 的位置 ——
 * 三者共用一个 46px 的底部条带，于是「2025-03-04 ~ 2025-10-26 400 个交易日」
 * 和「＋ － 复位 全区间」直接叠在一起，看起来就像被导航挡住了。
 *
 * 现在改成 canvas 之外的独立 flex 行：画布区只负责画图（含时间轴刻度），
 * 状态条自己占高度，谁也不压谁。
 */
#foot{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:0 20px 10px;
  border-top:1px solid var(--line);
  background:var(--bg);
}

#ctl{display:flex;gap:6px;flex:0 0 auto}
#ctl button{
  background:var(--panel2);border:1px solid var(--line2);border-radius:6px;
  padding:6px 11px;font-size:12px;cursor:pointer;color:var(--sub);
  font-variant-numeric:tabular-nums;
  transition:background .12s,color .12s,border-color .12s;
}
#ctl button:hover{background:var(--panel3);color:var(--txt);border-color:var(--line3)}
#ctl button:active{transform:translateY(1px)}

#range{
  font-size:11.5px;color:var(--dim);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;      /* flex 子项默认 min-width:auto，不加这条不会收缩 */
}

/* ── 无页脚：图表区直接吃到导航栏上方 ── */

@media (max-width:680px){
  header{padding:12px 14px 7px}
  h1{font-size:16px}
  h1 .tag{font-size:10.5px}
  #legend{padding:7px 14px 8px;gap:3px 10px;font-size:11.5px}
  #foot{padding:0 14px 8px;gap:8px}
  #range{font-size:11px}
  #ctl button{padding:5px 9px;font-size:11.5px}
}

/* 窄屏：状态条换行，区间信息独占一行，按钮靠右。
   不换行的话 520px 宽度下 250px 的区间文字 + 230px 的按钮会挤爆。 */
@media (max-width:560px){
  #foot{flex-wrap:wrap;row-gap:6px;padding-top:2px}
  #range{order:1;flex:1 1 100%}
  #ctl{order:2;margin-left:auto}
}