/* OpenRUA highlight overlay: task pill + agent trace drawn over the demo video.
   Driven by site/assets/highlight.js and resource/demos/highlight.json.
   --s is set by JS to (rendered video width / 1280); every size below is in 1280-wide frame px. */
.hl-layer{
  position:absolute;left:0;top:0;width:0;height:0;overflow:hidden;pointer-events:none;z-index:2;
  --s:.6;--px:calc(var(--s) * 1px);--edge:1.9%;--top:calc(26 * var(--px));
  font-family:var(--sans,Jost,"Avenir Next",sans-serif);font-weight:400;color:#151617;line-height:1.35;text-align:left;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  --hl-bg:rgba(246,246,243,.86);--hl-ease:cubic-bezier(.2,.6,.2,1);--hl-dur:.25s
}
.hl-group{position:absolute;inset:0}

/* column: pill on top, trace panel below */
.hl-col{position:absolute;top:var(--top);left:var(--edge);width:var(--hl-w,30%);display:flex;flex-direction:column;align-items:stretch;gap:calc(8 * var(--px))}
.hl-group[data-side=right] .hl-col{left:auto;right:var(--edge)}

.hl-pill,.hl-panel{
  background:var(--hl-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(calc(6 * var(--px)));
  transition:opacity var(--hl-dur) var(--hl-ease),transform var(--hl-dur) var(--hl-ease)
}
.hl-pill{
  display:flex;align-items:flex-start;gap:.6em;
  padding:calc(10 * var(--px)) calc(16 * var(--px)) calc(10 * var(--px)) calc(12 * var(--px));
  border-radius:max(10px,calc(20 * var(--px)));
  font-size:max(12px,calc(17.5 * var(--px)));font-weight:500;line-height:1.3;letter-spacing:.005em
}
.hl-logo{flex:none;display:block;width:1.3em;height:1.3em;color:#151617}
.hl-task{min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}  /* one or two lines max */
.hl-group.is-on .hl-pill{opacity:1;transform:none}

.hl-panel{
  padding:calc(7 * var(--px)) calc(16 * var(--px)) calc(13 * var(--px));
  border-radius:max(8px,calc(14 * var(--px)));
  font-size:max(11px,calc(15.5 * var(--px)));line-height:1.45
}
.hl-group.is-on .hl-panel.is-on{opacity:1;transform:none}

/* trace lines: grid 0fr/1fr so lines grow in and collapse out without per-frame JS */
.hl-line{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(calc(5 * var(--px)));
  transition:grid-template-rows var(--hl-dur) var(--hl-ease),opacity var(--hl-dur) var(--hl-ease),transform var(--hl-dur) var(--hl-ease)}
.hl-line>.hl-li{min-height:0;overflow:hidden}
.hl-lc{display:flex;gap:.45em;padding-top:.62em;align-items:baseline}
.hl-line.is-on{grid-template-rows:1fr;opacity:1;transform:none}
.hl-line.is-on.is-dim{opacity:.5}
.hl-line.is-gone{grid-template-rows:0fr;opacity:0;transform:translateY(calc(-5 * var(--px)))}
.hl-tx{min-width:0;overflow-wrap:anywhere}
.hl-cot .hl-tx{color:rgba(21,22,23,.92)}
.hl-tool .hl-lc{color:rgba(21,22,23,.62);font-size:.95em}
.hl-tool .hl-tx{flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}  /* tool calls never wrap */
.hl-mk{flex:none;color:rgba(21,22,23,.38)}
.hl-ok{flex:none;align-self:center;display:inline-flex;align-items:center;gap:.2em;font-size:.86em;color:#406D5C;opacity:0;transition:opacity var(--hl-dur) var(--hl-ease)}
.hl-ok svg{width:.95em;height:.95em}
.hl-line.is-ok .hl-ok{opacity:.85}

/* quiet corner labels: hardware bottom corner on the column side, speed top corner on the other side */
.hl-meta{position:absolute;bottom:calc(20 * var(--px));font-size:max(10px,calc(12.5 * var(--px)));letter-spacing:.02em;line-height:1.2;white-space:nowrap;
  color:rgba(255,255,255,.62);text-shadow:0 1px 2px rgba(0,0,0,.5);opacity:0;transition:opacity var(--hl-dur) var(--hl-ease)}
.hl-hw{left:var(--edge)}
.hl-group[data-side=right] .hl-hw{left:auto;right:var(--edge)}
.hl-group.is-on .hl-hw{opacity:1}
.hl-speed{top:var(--top);bottom:auto;right:var(--edge);color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.hl-speed[data-side=left]{right:auto;left:var(--edge)}
.hl-speed.is-on{opacity:1}

/* narrow players: task pill only */
.hl-layer.is-narrow .hl-col{width:46%}
.hl-layer.is-narrow .hl-pill{font-size:11px}
.hl-layer.is-narrow .hl-panel,.hl-layer.is-narrow .hl-meta,.hl-layer.is-narrow .hl-col{display:none}  /* phones: keep the arm clear */

@media (prefers-reduced-motion:reduce){
  .hl-layer *{transition:none!important}
  .hl-pill,.hl-panel,.hl-line,.hl-line.is-gone{transform:none!important}
}