/* 多图布局(js/features/multichart.js)。主页面多图时 <html class="mc-on">;子格 iframe 里另有 .mc-cell;当前格 .mc-cur。
 * 层级(都在根层叠上下文里):普通子格 4 < 当前子格 5 < 分隔条、当前格边框 6 < 开着弹窗/菜单/提示的子格 7 < 主页面自己的对话框 40 / 弹出菜单 50(见 app.css)。 */

/* ───────────── 网格与格子 ───────────── */
html.mc-on #chart-wrap { position: fixed; z-index: 1; left: var(--mc-x, 0); top: var(--mc-y, 0); width: var(--mc-w, 0); height: var(--mc-h, 0); flex: none; overflow: hidden; }   /* 格子里的图例、浮层不画到邻格上(子格开弹窗时裁剪区会放开到整窗) */   /* z-index:盖在网格底色上(网格在文档里排在它后面) */
#mc-grid { position: relative; flex: 1; min-width: 0; background: var(--line); }   /* 网格区域(第 0 格之外的地方):格子之间的缝就是它的底色 */
.mc-ph { position: absolute; display: grid; place-items: center; background: var(--bg); color: var(--faint); font-size: 12px; font-weight: 300; letter-spacing: .04em; }
.mc-frame { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; border: 0; padding: 0; margin: 0; display: block; background: transparent; }
html.mc-drag .mc-frame { pointer-events: none; }
html.mc-drag-v, html.mc-drag-v * { cursor: col-resize !important; } html.mc-drag-h, html.mc-drag-h * { cursor: row-resize !important; }

#mc-deco { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.mc-anchor { position: fixed; visibility: hidden; pointer-events: none; }   /* 子格代点的菜单在主页面上的锚点 */
.mc-focus { position: absolute; box-shadow: inset 0 0 0 1px var(--ours); }
.mc-split { position: absolute; pointer-events: auto; touch-action: none; }
.mc-split.v { cursor: col-resize; } .mc-split.h { cursor: row-resize; }
.mc-split::after { content: ""; position: absolute; transition: background-color .12s; }
.mc-split.v::after { left: 3px; width: 3px; top: 0; bottom: 0; } .mc-split.h::after { top: 3px; height: 3px; left: 0; right: 0; }
.mc-split:hover::after, .mc-split.drag::after { background: color-mix(in srgb, var(--ours) 60%, transparent); }

/* 子格:页面透明(clip 放开给弹窗时,透出下面的主页面与其他格);非当前格的界面条不绘制;提示交给主页面 */
html.mc-cell, html.mc-cell body { background: transparent; }
html.mc-cell #side { margin-left: auto; }
html.mc-cell:not(.mc-cur) :is(#bar, #tools, #side, #foot) { visibility: hidden; }
html.mc-cell #toast { display: none !important; }
html.mc-on:not(.mc-cur) #float-tools { display: none; }   /* 收藏的画图工具悬浮条只在当前格显示 */

/* ───────────── 布局选择器 ───────────── */
.pop.mc-pop { padding: 8px 8px 6px; width: 312px; max-height: none; }
.mc-h { padding: 4px 6px 6px; color: var(--faint); font-size: 11px; letter-spacing: .06em; }
.mc-row { display: flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 2px; }
.mc-n { width: 22px; flex: none; text-align: center; color: var(--dim); font-size: 12px; }
.mc-ics { display: flex; flex-wrap: wrap; gap: 2px; }
.mc-ic { width: 38px; height: 32px; display: grid; place-items: center; border-radius: var(--r-s); color: #a3a3b2; transition: background-color .12s, color .12s; }
.mc-ic:hover { background: rgba(255, 255, 255, .07); color: var(--text); }   /* 弹出层底色比 --hover 还亮,悬停要用半透明白才看得出 */
.mc-ic.on { background: var(--ours-weak); color: var(--ours); }
.mc-ic svg { display: block; }
.mc-pop .msep { margin: 6px 2px; }
.mc-pop .sw { padding: 7px 6px; }
#mc-btn.on { color: var(--text); }