/* «Гистограмма объёмов»: buy/sell volume per short bin, one panel per instrument on one time axis. */
/* Compact like the Monitor: the main panels must fit the first screen (owner, 28.09.2026). */
body.seconds-active #status { display: none; }
body.seconds-active .main-content { padding-block: 0; }
body.seconds-active .topbar { min-height: 2.25rem; }
body.seconds-active .topbar > div:first-child { display: flex; align-items: baseline; gap: .5rem; }
body.seconds-active #page-title { line-height: 1; }
.seconds-view { --seconds-panel-plot: 7.5rem; max-width: 112.5rem; margin: .25rem auto 1rem; }
.seconds-card { display: grid; gap: .35rem; padding: .45rem .75rem .6rem; background: var(--bg-secondary); border: 1px solid var(--border-secondary); border-radius: var(--radius-md); }
.seconds-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .35rem .75rem; }
.seconds-controls label { display: grid; gap: .1rem; color: var(--text-tertiary); font-size: .6875rem; }
.seconds-controls label.toggle-label { display: flex; align-self: center; color: var(--text-secondary); }
.seconds-controls select, .seconds-controls input[type="date"], .seconds-controls input[type="time"] { min-height: 1.75rem; padding-block: 0; }
.seconds-controls .toolbar-button { min-height: 1.75rem; padding-block: 0; }
.seconds-mode { display: inline-flex; gap: .25rem; }
.seconds-status { margin-left: auto; align-self: center; color: var(--text-secondary); font-size: .75rem; font-variant-numeric: tabular-nums; }
.seconds-legend-keys { display: flex; flex-wrap: wrap; gap: .9rem; margin: 0; color: var(--text-tertiary); font-size: .6875rem; }
.seconds-key::before { content: ""; display: inline-block; width: .7rem; height: .7rem; margin-right: .35rem; vertical-align: -.1rem; border-radius: 2px; background: currentColor; }
.seconds-key.is-buy { color: var(--success); }
.seconds-key.is-sell { color: var(--error); }
.seconds-key.is-avg::before { height: 0; border-top: 1px dashed var(--text-secondary); background: none; }
.seconds-pattern-keys { display: contents; }
.seconds-pattern-keys[hidden] { display: none; }
.seconds-key.is-cashback { color: var(--brand); }
.seconds-key.is-slow { color: var(--warning); }
.seconds-key.is-cashback::before, .seconds-key.is-slow::before { clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 0; }
.seconds-key.is-next { color: var(--text-secondary); }
.seconds-key.is-next::before { background: none; border: 1px solid currentColor; border-radius: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.seconds-panels { display: grid; gap: .3rem; min-width: 0; }
.seconds-panel { display: grid; gap: .1rem; min-width: 0; }
/* One line of fixed height: a long hover text is cut, never wrapped, so the page does not jump under the mouse. */
.seconds-panel-head { display: flex; align-items: baseline; gap: .75rem; min-width: 0; height: 1.1rem; font-size: .75rem; line-height: 1.1rem; }
.seconds-panel-name { flex: none; color: var(--text-primary); font-weight: 600; }
.seconds-panel-info { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--text-secondary); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.seconds-plot { position: relative; height: var(--seconds-panel-plot); border: 1px solid var(--border-secondary); border-radius: var(--radius-sm); background: var(--bg-primary); overflow: hidden; }
/* The main four share the window height (seconds.js fitMainPanels); a panel that ends a block carries the time axis. */
.seconds-panel.is-main .seconds-plot { height: var(--seconds-main-plot, 11rem); }
.seconds-panel.has-axis .seconds-plot { height: calc(var(--seconds-panel-plot) + 1rem); }
.seconds-panel.is-main.has-axis .seconds-plot { height: calc(var(--seconds-main-plot, 11rem) + 1rem); }
.seconds-panel.is-main + .seconds-panel:not(.is-main) { margin-top: .75rem; }
.seconds-panels.is-single .seconds-plot { height: 26rem; }
.seconds-plot canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.seconds-plot .seconds-overlay { cursor: crosshair; touch-action: none; }
.seconds-selection { min-height: 1.1rem; margin: 0; color: var(--text-primary); font-size: .75rem; font-variant-numeric: tabular-nums; }
@media (max-width: 48rem) {
  .seconds-view { margin: .25rem .5rem 1rem; }
  .seconds-panels.is-single .seconds-plot { height: 20rem; }
  .seconds-status { margin-left: 0; }
}