/* Compact percentile charts, extending both Terminal themes. */
#volatility { --vol-spy:#4ade80; --vol-smh:#38bdf8; --vol-igv:#fbbf24; border-top:1px solid var(--line); }
:root[data-theme="light"] #volatility { --vol-spy:#15803d; --vol-smh:#0369a1; --vol-igv:#a16207; }
#volatility [hidden] { display:none !important; }
#volatility button, #volatility select { font:inherit; }
#volatility button { cursor:pointer; }
#volatility button:focus-visible, #volatility select:focus-visible, #volatility summary:focus-visible, #volatility [tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
#volatility .vol-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2rem; }
#volatility .vol-stamp { flex:none; text-align:right; font:.8125rem 'JetBrains Mono',monospace; color:var(--ink-2); line-height:1.9; }
#volatility .vol-stamp > span { display:block; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; }
#volatility .vol-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-bottom:1.25rem; }
#volatility .vol-fields { display:flex; gap:.3rem; padding:.3rem; background:var(--bg-2); border:1px solid var(--line); border-radius:.5rem; }
#volatility .vol-fields button { padding:.7rem 1rem; min-height:42px; background:transparent; border:1px solid transparent; border-radius:.3rem; color:var(--muted); font-size:.875rem; }
#volatility .vol-fields button[aria-pressed="true"] { color:var(--accent); background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 30%,transparent); }
#volatility .vol-field { display:flex; gap:.75rem; align-items:center; color:var(--muted); font-size:.875rem; }
#volatility select { padding:.55rem 2rem .55rem .8rem; border:1px solid var(--line-strong); border-radius:.375rem; color:var(--ink); background-color:var(--bg-2); }
#volatility .vol-history-controls { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:.25rem 0 1.25rem; }
#volatility .vol-filter { display:flex; align-items:center; gap:.8rem; }
#volatility .vol-filter > span { font-size:.875rem; color:var(--muted); }
#volatility .vol-tickers { display:flex; gap:.25rem; flex-wrap:wrap; }
#volatility .vol-tickers button { display:flex; align-items:center; gap:.4rem; background:transparent; border:1px solid transparent; border-radius:.3rem; padding:.5rem .65rem; color:var(--muted); font: .875rem 'JetBrains Mono',monospace; min-height:36px; }
#volatility .vol-tickers button i { width:.45rem; height:.45rem; border-radius:50%; background:var(--asset); }
#volatility .vol-tickers button[aria-pressed="true"] { border-color:var(--line-strong); color:var(--asset,var(--ink)); background:var(--bg-3); }
#volatility .vol-ranges { display:flex; gap:.15rem; padding:.2rem; background:var(--bg-3); border:1px solid var(--line); border-radius:.375rem; }
#volatility .vol-ranges button { background:transparent; border:0; border-radius:.2rem; color:var(--muted); padding:.45rem .6rem; min-height:34px; font:.8125rem 'JetBrains Mono',monospace; }
#volatility .vol-ranges button[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); }
#volatility .vol-workspace { display:grid; grid-template-columns:minmax(280px,1fr) minmax(0,1.9fr); gap:1rem; }
#volatility .vol-panel { min-width:0; border:1px solid var(--line); border-radius:.65rem; padding:1.4rem; background:var(--bg-2); }
#volatility .vol-panel-heading { min-height:100px; }
#volatility .vol-kicker { display:block; color:var(--muted); font:.75rem 'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.075em; line-height:1.8; }
#volatility h3 { color:var(--ink); font-size:1.0625rem; font-weight:400; line-height:1.5; margin:.5rem 0 .7rem; letter-spacing:-.025em; }
#volatility .vol-meta { color:var(--muted); font:.75rem 'JetBrains Mono',monospace; line-height:1.7; }
#volatility .vol-legend { display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; font:.75rem 'JetBrains Mono',monospace; }
#volatility .vol-legend > span { display:flex; align-items:center; gap:.4rem; color:var(--muted); }
#volatility .vol-legend i { width:.45rem; height:.45rem; border-radius:50%; background:var(--asset); }
#volatility .vol-legend strong { color:var(--asset); font-weight:400; }
#volatility .vol-chart-wrap { position:relative; height:305px; }
#volatility .vol-caption, #volatility .vol-chart-caption { color:var(--muted); font-size:.75rem; line-height:1.8; margin-top:.7rem; }
#volatility .vol-chart-caption { display:flex; flex-wrap:wrap; gap:.35rem 1rem; justify-content:space-between; }
#volatility .vol-foot { margin-top:1rem; color:var(--muted); font-size:.75rem; line-height:1.8; }
#volatility .vol-chart-data { margin-top:.75rem; }
#volatility .vol-chart-data summary { width:fit-content; cursor:pointer; font-size:.875rem; color:var(--ink-2); }
#volatility .vol-data-scroll { max-height:300px; overflow:auto; margin-top:1rem; border:1px solid var(--line); border-radius:.4rem; }
#volatility .vol-data-scroll table { width:100%; min-width:320px; font-size:.8125rem; font-variant-numeric:tabular-nums; border-collapse:collapse; }
#volatility .vol-data-scroll caption { text-align:left; padding:.75rem; color:var(--ink-2); background:var(--bg-3); }
#volatility .vol-data-scroll th, #volatility .vol-data-scroll td { padding:.5rem .75rem; text-align:right; border-bottom:1px solid var(--line); font-weight:400; }
#volatility .vol-data-scroll th:first-child, #volatility .vol-data-scroll td:first-child { text-align:left; }
#volatility .vol-status, #volatility .vol-chart-error { padding:1.5rem; border:1px solid var(--line); color:var(--muted); font-size:.875rem; line-height:1.8; border-radius:.5rem; }
#volatility .vol-status button { display:block; color:var(--accent); border:1px solid var(--line-strong); padding:.5rem 1rem; margin-top:1rem; border-radius:.3rem; }
#volatility .vol-chart-error { position:absolute; inset:1rem 0; background:var(--bg-2); display:grid; place-content:center; text-align:center; }
@media (max-width:1000px) { #volatility .vol-workspace { grid-template-columns:minmax(260px,1fr) minmax(0,1.65fr); } #volatility .vol-panel { padding:1rem; } }
@media (max-width:800px) { #volatility .vol-workspace { grid-template-columns:minmax(0,1fr); } #volatility .vol-snapshot-panel .vol-chart-wrap { height:220px; } #volatility .vol-panel-heading { min-height:0; margin-bottom:1rem; } }
@media (max-width:640px) { #volatility .vol-heading { flex-direction:column; align-items:flex-start; gap:1rem; } #volatility .vol-stamp { text-align:left; display:flex; gap:.75rem; align-items:baseline; } #volatility .vol-fields button { padding:.6rem .7rem; } #volatility .vol-filter { flex-wrap:wrap; gap:.5rem; } #volatility .vol-filter > span { flex-basis:100%; } #volatility .vol-history-controls { gap:.85rem; } #volatility .vol-chart-wrap { height:285px; } #volatility .vol-tickers button { padding:.5rem .55rem; } }
@media (max-width:350px) { #volatility .vol-fields { gap:0; } #volatility .vol-fields button { padding:.6rem .45rem; } }