/* The strategy recorder: a dock on the right of the chart, foldable to a strip.
   It keeps the chart's own language -- supply red, demand green, the blue accent and the
   #0d1722 panel -- so it reads as part of Flow rather than as something bolted on. */
#strategyRecorder{
  position:fixed; right:12px; top:84px; z-index:40; width:306px;
  max-height:calc(100vh - 120px); display:flex; flex-direction:column;
  background:rgba(13,23,34,.97); border:1px solid #1e2d3b; border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  font:400 12px/1.5 "IBM Plex Sans", system-ui, sans-serif; color:#dbe7f0;
}
#strategyRecorder .sr-head{
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  border-bottom:1px solid #1e2d3b;
}
#strategyRecorder .sr-where{
  flex:1; min-width:0; font:600 11px/1 "IBM Plex Mono", ui-monospace, monospace;
  color:#7d93a6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#strategyRecorder button{
  font:600 11px/1 "IBM Plex Sans", system-ui, sans-serif; color:#7d93a6;
  background:#13202c; border:1px solid #1e2d3b; border-radius:6px;
  padding:7px 9px; cursor:pointer;
}
#strategyRecorder button:focus-visible{ outline:2px solid #2aa8ff; outline-offset:2px; }
#strategyRecorder button[aria-pressed="true"]{
  border-color:#2aa8ff; color:#2aa8ff; background:rgba(42,168,255,.16);
}
#strategyRecorder .sr-rec{
  font-family:"IBM Plex Mono", ui-monospace, monospace; letter-spacing:.04em;
  border-color:#ff4d4d; color:#ff4d4d; background:rgba(255,77,77,.16);
}
#strategyRecorder .sr-rec[aria-pressed="false"]{
  border-color:#1e2d3b; color:#7d93a6; background:#13202c;
}
#strategyRecorder .sr-fold{ padding:6px 9px; }
#strategyRecorder .sr-body{ overflow:auto; padding:9px 10px 10px; }
#strategyRecorder.sr-closed .sr-body{ display:none; }
/* Paused has to be visible at a glance: a recorder that quietly stopped recording is worse
   than no recorder, because the work still feels like it is being kept. */
#strategyRecorder.sr-paused{ border-color:#3a1d1d; background:rgba(26,16,18,.97); }

#strategyRecorder .sr-steps{ display:flex; flex-wrap:wrap; gap:4px; }
#strategyRecorder .sr-chip{ padding:6px 8px; border-radius:999px; font-size:10.5px; }
#strategyRecorder .sr-chip i{ font-style:normal; font-family:"IBM Plex Mono", monospace; opacity:.75; }
#strategyRecorder .sr-hint{ color:#5d7489; font-size:10.5px; font-style:italic; padding:5px 0 7px; }
#strategyRecorder .sr-tools{ display:flex; gap:4px; }
#strategyRecorder .sr-tools button{ flex:1; padding:8px 4px; }
#strategyRecorder .sr-tools button[data-t="entry"][aria-pressed="true"]{ border-color:#fff; color:#fff; background:rgba(255,255,255,.14); }
#strategyRecorder .sr-tools button[data-t="stop"][aria-pressed="true"]{ border-color:#ff4d4d; color:#ff4d4d; background:rgba(255,77,77,.16); }
#strategyRecorder .sr-tools button[data-t="box"][aria-pressed="true"]{ border-color:#facc15; color:#facc15; background:rgba(250,204,21,.16); }

#strategyRecorder .sr-read{
  font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:10.5px;
  font-variant-numeric:tabular-nums; color:#7d93a6; padding:9px 0 4px;
}
#strategyRecorder .sr-hd{ color:#7d93a6; padding-bottom:5px; }
#strategyRecorder .sr-hd b, #strategyRecorder .sr-fr b{ color:#dbe7f0; font-weight:600; }
#strategyRecorder .sr-ah{ color:#5d7489; font-size:10px; padding-bottom:2px; border-top:1px dashed #1e2d3b; padding-top:6px; }
#strategyRecorder .sr-an{ display:grid; grid-template-columns:minmax(0,1.4fr) auto auto; gap:6px; }
#strategyRecorder .sr-an span:nth-child(2){ color:#dbe7f0; text-align:right; }
#strategyRecorder .sr-an span:nth-child(3){ text-align:right; }
#strategyRecorder .sr-an.sr-near span:first-child,
#strategyRecorder .sr-an.sr-near span:last-child{ color:#2aa8ff; font-weight:600; }
#strategyRecorder .sr-dim{ color:#5d7489; font-size:10.5px; line-height:1.55; }
#strategyRecorder .sr-dim b{ color:#7d93a6; }

#strategyRecorder .sr-dig{ border-top:1px solid #1e2d3b; margin-top:8px; padding-top:8px;
  display:flex; flex-direction:column; gap:8px; }
#strategyRecorder .sr-fd{ border-left:2px solid #2aa8ff; padding-left:8px; }
#strategyRecorder .sr-fh{ font-weight:600; font-size:11px; }
#strategyRecorder .sr-fh i{ font-style:normal; color:#7d93a6; font-family:"IBM Plex Mono", monospace; font-size:10px; }
#strategyRecorder .sr-fr{ font-family:"IBM Plex Mono", monospace; font-size:10px; color:#7d93a6; }
#strategyRecorder .sr-warn{ font-family:"IBM Plex Mono", monospace; font-size:10px; color:#facc15; }

#strategyRecorder .sr-foot{
  display:flex; align-items:center; gap:8px; margin-top:9px;
  border-top:1px solid #1e2d3b; padding-top:8px;
}
#strategyRecorder .sr-save{
  flex:1; min-width:0; font-family:"IBM Plex Mono", monospace; font-size:10px; color:#5d7489;
}
#strategyRecorder .sr-save.sr-err{ color:#ff4d4d; }

@media (max-width:860px){
  #strategyRecorder{ right:8px; left:8px; width:auto; top:auto; bottom:8px; max-height:52vh; }
}
@media (prefers-reduced-motion:reduce){ #strategyRecorder *{ transition:none !important; } }