/* Formula live plot keeps the drawer's neutral visual language; mint is not
   used for chart data or selected states. */
#plot-live-panel{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft);color:var(--ink);min-height:0;flex:0 0 auto}
#plot-live-panel.is-loading .plot-live-plot{opacity:.72}
#plot-live-panel.is-fallback .plot-live-stage{display:none}
#plot-live-panel[hidden]{display:none!important}
.plot-live-heading{display:flex;align-items:center;gap:8px;min-width:0}
.plot-live-title{font-size:13px;white-space:nowrap}
.plot-live-status{color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.plot-live-mode{display:flex;gap:3px;flex:0 0 auto}
.plot-live-mode button,.plot-live-play{border:1px solid var(--line)!important;border-radius:7px!important;background:var(--surface)!important;color:var(--ink)!important;min-height:28px!important;padding:3px 8px!important;font-size:11px!important}
.plot-live-mode button[aria-pressed="true"]{background:var(--n-100)!important;color:var(--n-900)!important;border-color:var(--n-300)!important}
.plot-live-stage{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:#fff;touch-action:none;min-height:180px}
.plot-live-plot{width:100%;aspect-ratio:720/460;display:grid;place-items:center;transition:opacity 120ms ease}
.plot-live-plot>svg{display:block;width:100%;height:100%;user-select:none}
.plot-live-plot>div{padding:30px;color:var(--muted);font-size:12px;text-align:center}
.plot-live-feature-label{position:absolute;left:10px;bottom:10px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--surface);font-size:11px;box-shadow:0 4px 12px #00000014;pointer-events:none}
.plot-live-parameters{display:grid;gap:8px;max-height:180px;overflow:auto}
.plot-live-parameter{display:grid;gap:4px}
.plot-live-parameter-head{display:flex;align-items:center;gap:7px;font-size:12px}
.plot-live-parameter-tex{display:inline-flex;align-items:center;min-width:22px;min-height:20px}
.plot-live-parameter-tex svg{width:auto;height:20px;max-width:70px}
.plot-live-parameter-value{margin-left:auto;color:var(--muted);font:12px ui-monospace,SFMono-Regular,monospace}
.plot-live-parameter input[type="range"]{width:100%;accent-color:var(--n-700)}
.plot-live-color{width:20px!important;min-width:20px!important;height:20px!important;min-height:20px!important;padding:0!important;border:1px solid var(--line)!important;border-radius:999px!important;background:var(--plot-series-color)!important;box-shadow:inset 0 0 0 3px var(--surface)!important}
/* The drawer's global button rules have higher specificity than a component
   class. Keep chart swatches circular and bound to the real series color. */
html body #formulaModal #plot-live-panel .plot-live-color,
html body #formulaModal #plot-live-panel .plot-live-color:hover{width:20px!important;min-width:20px!important;height:20px!important;min-height:20px!important;padding:0!important;border:1px solid var(--line)!important;border-radius:999px!important;background:var(--plot-series-color)!important;background-color:var(--plot-series-color)!important;box-shadow:inset 0 0 0 3px var(--surface)!important}
.plot-live-footer{display:flex;align-items:center;gap:8px;min-height:28px}
.plot-live-series-colors{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.plot-live-series-colors::before{content:'曲线';font-size:10px;color:var(--muted);margin-right:2px}
.plot-live-hint{font-size:10px;color:var(--muted);flex:1}
.plot-live-play{background:var(--n-900)!important;color:#fff!important;border-color:var(--n-900)!important}
#plot-live-panel :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media(max-width:640px){#plot-live-panel{padding:10px}.plot-live-heading{flex-wrap:wrap}.plot-live-status{order:3;flex-basis:100%}.plot-live-stage{min-height:160px}.plot-live-parameters{max-height:150px}}
/* Reuse polish-v2's drawer-open treatment for floating board controls. */
@media(max-width:640px){html body:has(#formulaModal:not(.hidden)) #leftSidebar{visibility:hidden;pointer-events:none}}
/* Match the existing 85dvh formula sheet: the generic 520px flyout cap
   otherwise leaves less room than the graph plus its footer. */
@media(max-width:640px){html body #formulaModal{max-height:85dvh!important}}

.plot-live-recovery{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--muted)}
.plot-live-recovery[hidden],.plot-live-parameters[hidden],.plot-live-footer[hidden],.plot-live-mode[hidden]{display:none!important}
.plot-live-recovery button{border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);padding:6px 10px;min-height:36px}
#plot-live-panel.is-fallback .plot-live-status{white-space:normal;overflow:visible}
@media(max-width:640px){#plot-live-panel.is-fallback{padding-bottom:90px}}