/* the agent under observation — player widget (reflex post) */
.rp { background: var(--paper-lift); border: 1px solid var(--line);
  border-radius: 8px; padding: 0.95rem 1rem 0.9rem; }
.rp-stage { position: relative; border-radius: 6px; overflow: hidden;
  background: #000; }
.rp-video { display: block; width: 100%; height: auto; }
.rp-owner-tag { position: absolute; top: 10px; left: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em;
  color: #fff; background: rgba(20,22,26,0.62); border-left: 3px solid #c7c9cc;
  padding: 0.28rem 0.55rem; border-radius: 4px; pointer-events: none; }
.rp-bar { display: flex; align-items: center; gap: 0.7rem; margin: 0.6rem 0 0.35rem; }
.rp-play { font-family: var(--mono); font-size: 13px; line-height: 1;
  width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink); cursor: pointer; }
.rp-time { font-family: var(--mono); font-size: 11.5px; color: var(--ink-soft); }
.rp-lanes { cursor: ew-resize; touch-action: pan-y; }
.rp-lanes svg { display: block; width: 100%; height: auto; }
.rp-ax { fill: var(--ink-faint); font-family: var(--mono); font-size: 9px; }
.rp-kill { fill: #2f8f6b; font-size: 11px; }
.rp-death { fill: #c23b3b; font-size: 10px; }
.rp-mark { cursor: pointer; }
.rp-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem;
  margin-top: 0.75rem; }
@media (max-width: 720px) { .rp-panels { grid-template-columns: 1fr; } }
.rp-panel { border: 1px solid var(--line-soft); border-radius: 6px;
  padding: 0.6rem 0.7rem; background: #fff; min-height: 11.5rem; }
.rp-panel-title { font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 0.55rem; }
.rp-dec-head { font-family: var(--mono); font-size: 12px; color: var(--ink);
  margin-bottom: 0.5rem; }
.rp-dec-state { color: var(--ink-faint); font-size: 11px; }
.rp-score-row { display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 11px; margin: 0.14rem 0; color: var(--ink-soft); }
.rp-score-row.chosen .rp-score-lbl { color: var(--ink); font-weight: 600; }
.rp-score-lbl { flex: 0 0 5.4rem; text-align: right; }
.rp-score-track { flex: 1; position: relative; height: 9px;
  background: var(--line-soft); border-radius: 2px; overflow: hidden; }
.rp-score-ghost { position: absolute; inset: 0 auto 0 0; background: #d8dce4; }
.rp-score-fill { position: absolute; inset: 0 auto 0 0; background: #2a6fd6;
  opacity: 0.85; }
.rp-score-row.chosen .rp-score-fill { background: #14161a; }
.rp-score-val { flex: 0 0 2.6rem; text-align: right; color: var(--ink-faint); }
.rp-imag-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 0.4rem; font-family: var(--mono); font-size: 11px; padding: 0.15rem 0;
  color: var(--ink-soft); border-bottom: 1px dashed var(--line-soft); }
.rp-imag-row.chosen { color: var(--ink); font-weight: 600; }
.rp-imag-head { color: var(--ink-faint); font-size: 9.5px; text-transform: uppercase;
  letter-spacing: 0.05em; border-bottom: 1px solid var(--line); }
.rp-dream { color: #b58a2a; }
.rp-crit { color: #2f8f6b; }
.rp-hit { color: #c23b3b; }
.rp-imag-none { font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
  padding: 1rem 0; }
.rp-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.5rem;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); }
.rp-legend .sw { display: inline-block; width: 9px; height: 9px;
  border-radius: 2px; margin-right: 0.32rem; vertical-align: -1px; }

/* gpu widget panels */
.rg { background: var(--paper-lift); border: 1px solid var(--line);
  border-radius: 8px; padding: 0.9rem 1rem; margin: 1.4rem 0; }
.rg svg { display: block; width: 100%; height: auto; }
.rg-head { font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
  margin-bottom: 0.7rem; display: flex; align-items: baseline; gap: 0.8rem;
  flex-wrap: wrap; }
.rg-head b { color: var(--ink); }
.rg-play { font-family: var(--mono); font-size: 11px; border: 1px solid var(--line);
  border-radius: 999px; background: #fff; color: var(--ink); cursor: pointer;
  padding: 0.25rem 0.7rem; margin-left: auto; }
.rg-ax { fill: var(--ink-faint); font-family: var(--mono); font-size: 9.5px; }
.rg-lbl { fill: var(--ink-soft); font-family: var(--mono); font-size: 11px; }
.rg-val { fill: var(--ink); font-family: var(--mono); font-size: 10.5px; }
.rg-wall { fill: var(--ink-faint); font-family: var(--mono); font-size: 9.5px; }
.rg-clock { fill: var(--ink); font-family: var(--mono); font-size: 11px; }
.rg-bar { cursor: help; }
.rg-note { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
  margin-top: 0.4rem; }

/* nsight timeline widget */
.ns { background: var(--paper-lift); border: 1px solid var(--line);
  border-radius: 8px; padding: 0.9rem 1rem; margin: 1.4rem 0; }
.ns-head { font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
  margin-bottom: 0.7rem; }
.ns-head b { color: var(--ink); }
.ns-ctrl { display: flex; align-items: center; gap: 0.6rem; margin: 0.25rem 0; }
.ns-ctrl-lbl { font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-faint); width: 4.2rem; text-transform: uppercase;
  letter-spacing: 0.05em; }
.ns-range { flex: 1; accent-color: #2a6fd6; height: 18px; }
.ns-read { font-family: var(--mono); font-size: 11px; color: var(--ink);
  width: 8.5rem; text-align: right; }
.ns-lane { margin-top: 0.7rem; }
.ns-lane-head { font-family: var(--mono); font-size: 11px;
  color: var(--ink-soft); display: flex; align-items: center;
  gap: 0.4rem; margin-bottom: 0.25rem; }
.ns-lane-head .sw { display: inline-block; width: 9px; height: 9px;
  border-radius: 2px; }
.ns-lane-stat { margin-left: auto; color: var(--ink-faint); }
.ns-canvas { display: block; width: 100%; border-radius: 3px;
  border: 1px solid var(--line-soft); }