/* Stain Drift: scanner panels, the OD scatter, and the stream monitor. Base styles are in
   ../shared/base.css. */
:root { --s4: #c98500; }
.scanners { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.scan { padding: 0.75rem; }
.scan h3 { font-size: 0.92rem; display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.5rem; }
.scan canvas { width: 100%; height: auto; aspect-ratio: 1; border-radius: 6px; image-rendering: auto; }
.scan .row-l { font-size: 0.74rem; color: var(--muted); margin: 0.45rem 0 0.25rem; display: flex; justify-content: space-between; gap: 0.5rem; }
.scan .row-l b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.yours { margin-top: 1rem; }
.yours .panel-title { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.7rem; }
.channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }
.channels figure { margin: 0; }
.channels canvas { width: 100%; height: auto; border-radius: 6px; }
.channels figcaption { font-size: 0.78rem; color: var(--muted); margin-top: 0.25rem; }
.trace-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.trace-head .seg button { min-height: 1.7rem; padding: 0.2rem 0.55rem; font-size: 0.8rem; }

.stream-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; }
.sim-ctl { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.clock { font-family: var(--mono); font-size: 0.85rem; color: var(--ink-2); margin-left: 0.25rem; font-variant-numeric: tabular-nums; }
.check.norm { font-weight: 600; color: var(--ink); }
.sstats { margin: 1rem 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sstats .stat { background: var(--surface); border: 1px solid var(--line); }
.stream { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
#smsg { margin-top: 1rem; }

.feed { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.4rem; min-height: 15rem; }
.feed:empty::before { content: "Waiting for scans."; color: var(--muted); font-size: 0.86rem; }
.feed li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; font-size: 0.8rem; }
.feed canvas { width: 40px; height: 40px; border-radius: 4px; }
.feed .id { font-family: var(--mono); color: var(--ink); font-size: 0.76rem; }
.feed .meta { color: var(--muted); font-size: 0.74rem; display: flex; align-items: center; gap: 0.35rem; }
.feed li.new { animation: flash 0.9s ease-out; }
@keyframes flash { from { background: var(--new-bg); } to { background: transparent; } }
.ev-json { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.74rem; max-height: 22rem; overflow-y: auto; }
.code .k { color: #a9c4ff; }
.code .s { color: #8fd6bd; }
.code .n { color: var(--warn-ink); }

.chart + .chart { margin-top: 0.9rem; }
.chart .ttl { fill: var(--ink); font: 600 12px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.chart .sub { fill: var(--muted); font: 11px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.chart .base-band { fill: rgba(255, 255, 255, 0.035); }
.chart .incident { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .incident-l { fill: var(--ink-2); font: 10.5px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .alert-dot { stroke: var(--surface); stroke-width: 2; }
.chart .xhair { stroke: var(--axis); stroke-width: 1; }
.chart .od-pt { opacity: 0.4; }
.chart .ray { stroke-width: 2; stroke-linecap: round; }

.alerts { list-style: none; margin: 0; padding: 0; }
.alerts:empty::before { content: "None yet."; color: var(--muted); font-size: 0.86rem; }
.alerts li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.6rem; padding: 0.45rem 0; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--ink-2); }
.alerts li:first-child { border-top: 0; }
.alerts .when { font-family: var(--mono); font-size: 0.76rem; color: var(--muted); }
.alerts strong { color: var(--ink); }
.alerts .delay { display: block; font-size: 0.78rem; color: var(--muted); }

@media (max-width: 1000px) {
  .scanners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stream { grid-template-columns: minmax(0, 1fr); }
  .sstats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tok { font-size: 0.78rem; color: var(--muted); font-weight: 400; }