/* ============================================================================ */
/* Plotly – fragments & controls */
/* ============================================================================ */
.html-embed__card svg text { fill: var(--text-color) !important; }
.html-embed__card label { color: var(--text-color) !important; }
.plotly-graph-div { width: 100% !important; min-height: 320px; }
@media (max-width: 768px) { .plotly-graph-div { min-height: 260px; } }
[id^="plot-"] { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.plotly_caption { font-style: italic; margin-top: 10px; }
.plotly_controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }
.plotly_input_container { display: flex; align-items: center; flex-direction: column; gap: 10px; }
.plotly_input_container > select { padding: 2px 4px; line-height: 1.5em; text-align: center; border-radius: 4px; font-size: 12px; background-color: var(--neutral-200); outline: none; border: 1px solid var(--neutral-300); }
.plotly_slider { display: flex; align-items: center; gap: 10px; }
.plotly_slider > input[type="range"] { -webkit-appearance: none; appearance: none; height: 2px; background: var(--neutral-400); border-radius: 5px; outline: none; }
.plotly_slider > input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--primary-color); cursor: pointer; }
.plotly_slider > input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--primary-color); cursor: pointer; }
.plotly_slider > span { font-size: 14px; line-height: 1.6em; min-width: 16px; }

/* ---------------------------------------------------------------------------- */
/* Dark mode overrides for Plotly readability */
/* ---------------------------------------------------------------------------- */
[data-theme="dark"] .html-embed__card .xaxislayer-above text,
[data-theme="dark"] .html-embed__card .yaxislayer-above text,
[data-theme="dark"] .html-embed__card .infolayer text,
[data-theme="dark"] .html-embed__card .legend text,
[data-theme="dark"] .html-embed__card .annotation text,
[data-theme="dark"] .html-embed__card .colorbar text,
[data-theme="dark"] .html-embed__card .hoverlayer text { fill: #fff !important; }

[data-theme="dark"] .html-embed__card .xaxislayer-above path,
[data-theme="dark"] .html-embed__card .yaxislayer-above path,
[data-theme="dark"] .html-embed__card .xlines-above,
[data-theme="dark"] .html-embed__card .ylines-above { stroke: rgba(255,255,255,.35) !important; }

[data-theme="dark"] .html-embed__card .gridlayer path { stroke: rgba(255,255,255,.15) !important; }

/* Legend and hover backgrounds */
[data-theme="dark"] .html-embed__card .legend rect.bg { fill: rgba(0,0,0,.25) !important; stroke: rgba(255,255,255,.2) !important; }
[data-theme="dark"] .html-embed__card .hoverlayer .bg { fill: rgba(0,0,0,.8) !important; stroke: rgba(255,255,255,.2) !important; }

/* Colorbar background (keep gradient intact) */
[data-theme="dark"] .html-embed__card .colorbar .cbbg { fill: rgba(0,0,0,.25) !important; stroke: rgba(255,255,255,.2) !important; }