/* portal-charts.css — the .rs-ts* (TimeSeries / TimeSeriesStack / EventTimeline)
   layer that pairs with charts-ext.jsx. The bound charts.css ships the generic
   .rs-chart / .rs-chartlegend / .rs-chartstate classes but NOT these TimeSeries
   specifics (overview brush, live pill, live edge, status popover), so the brush
   would collapse to its intrinsic SVG height without them. Tokens only. */

.rs-ts { position: relative; }

/* ---- overview brush (total time period) -------------------------------- */
.rs-ts__brush {
  position: relative; height: 46px; margin: 2px 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2); cursor: crosshair; overflow: hidden;
  user-select: none; touch-action: none;
}
.rs-ts__brush > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rs-ts__brushstatus { position: absolute; left: 0; right: 0; top: 0; height: 4px; z-index: 1; }
.rs-ts__brushstatusseg { position: absolute; top: 0; height: 4px; }
.rs-ts__brushstatusseg.is-online  { background: var(--success); opacity: .45; }
.rs-ts__brushstatusseg.is-offline { background: var(--danger); }
.rs-ts__brushstatusseg.is-off     { background: var(--warning); }
.rs-ts__brushgrid { position: absolute; top: 4px; bottom: 12px; width: 0; border-left: 1px solid var(--border); opacity: .6; }
.rs-ts__brushgl { position: absolute; bottom: 2px; transform: translateX(-50%); font-size: 9px;
  color: var(--fg3); font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; }
.rs-ts__brushmask { position: absolute; top: 0; bottom: 0; background: var(--bg); opacity: .5; pointer-events: none; }
[data-theme="dark"] .rs-ts__brushmask { opacity: .55; }
.rs-ts__brushsel { position: absolute; top: 0; bottom: 0; box-sizing: border-box;
  border-left: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); cursor: grab; }
.rs-ts__brushsel:active { cursor: grabbing; }
.rs-ts__brushhandle { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; z-index: 2; }
.rs-ts__brushhandle.l { left: -5px; }
.rs-ts__brushhandle.r { right: -5px; }
.rs-ts__brushhandle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 2px; height: 14px;
  transform: translate(-50%, -50%); border-radius: 2px; background: var(--accent); opacity: .55; }
.rs-ts__brushcap { position: absolute; bottom: 2px; font-size: 9px; color: var(--fg2);
  font-variant-numeric: tabular-nums; padding: 0 4px; pointer-events: none; white-space: nowrap; }
.rs-ts__brushstatushit { position: absolute; top: 0; bottom: 0; cursor: help; z-index: 3; }

/* ---- offline / off status popover -------------------------------------- */
.rs-ts__statuspop { position: absolute; top: 50px; transform: translateX(-50%); z-index: 8;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 8px 10px; pointer-events: none; white-space: nowrap; }
.rs-ts__statuspop-h { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg); }
.rs-ts__statuspop-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rs-ts__statuspop-g { display: grid; grid-template-columns: auto auto; column-gap: 14px; row-gap: 1px;
  margin-top: 5px; font-size: 11px; color: var(--fg3); font-variant-numeric: tabular-nums; }
.rs-ts__statuspop-g span:nth-child(even) { text-align: right; color: var(--fg2); }

/* ---- live / paused pill ------------------------------------------------ */
.rs-ts__live { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  font-size: 11px; font-weight: 600; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg2);
  transition: color .12s var(--ease), border-color .12s var(--ease), background .12s var(--ease); }
.rs-ts__live.is-live { color: var(--success); border-color: color-mix(in srgb, var(--success) 55%, var(--border-strong)); }
.rs-ts__live.is-paused { color: var(--fg3); }
.rs-ts__live:hover { background: var(--surface-2); }
.rs-ts__livedot { display: inline-flex; align-items: center; gap: 2px; }
.rs-ts__livedot i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .35; }
.rs-ts__live.is-paused .rs-ts__livedot i { opacity: .3; }
@media (prefers-reduced-motion: no-preference) {
  .rs-ts__live.is-live .rs-ts__livedot i { animation: rs-ts-wave 1.1s ease-in-out infinite; }
  .rs-ts__live.is-live .rs-ts__livedot i:nth-child(2) { animation-delay: .18s; }
  .rs-ts__live.is-live .rs-ts__livedot i:nth-child(3) { animation-delay: .36s; }
  @keyframes rs-ts-wave { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
}

/* ---- live edge marker + axis caption ----------------------------------- */
.rs-ts__edge { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--surface);
  border: 2px solid var(--accent); transform: translate(-50%, -50%); pointer-events: none; z-index: 3; }
.rs-ts__axiscap { font-size: 6.5px; font-weight: 500; }

/* ---- series emphasis (hover a legend item → spotlight its line) ---------- */
.rs-spot { transition: opacity .15s var(--ease); }
.rs-spot.is-dim { opacity: .18; }
.rs-spot.is-emph { opacity: 1; }
.rs-spot.is-emph .rs-spot__line { stroke-width: 2; }