/* ============================================================
   runner — "Run an honest backtest" control surface.
   Scoped .rn-* classes. Tokens only; reuses shared .panel/.field/.btn.
   ============================================================ */

.rn-panel{ overflow:visible; }           /* let the status line breathe */
.rn-body{ padding:14px; overflow:visible; }

/* control row: symbols (wide) · strategy · lookback · run button */
.rn-grid{
  display:grid;
  grid-template-columns:minmax(220px,2.2fr) minmax(160px,1.3fr) 120px auto;
  gap:12px;
  align-items:end;
}

.rn-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }

.rn-label{
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text-2);
}

.rn-hint{ font-size:10.5px; color:var(--text-3); }

/* native select to match .field look */
select.field{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b95a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center;
  padding-right:30px; cursor:pointer;
}

/* the primary Run button stretches to the row height of the inputs */
.rn-field--go{ justify-self:start; }
.rn-run{ height:36px; white-space:nowrap; }
.rn-run.is-locked{
  background:var(--surface-2); border-color:var(--border-strong); color:var(--text-2);
  cursor:not-allowed;
}
.rn-run:disabled{ opacity:.8; cursor:default; }

/* ---- status line ---- */
.rn-status{
  display:flex; align-items:center; gap:8px;
  min-height:0; margin-top:0; font-size:12px; font-weight:600;
  transition:all .14s ease;
}
.rn-status:empty{ display:none; }
.rn-status:not(:empty){ margin-top:12px; padding:9px 12px; border-radius:var(--r); }
.rn-status--run { background:var(--brand-tint); color:var(--brand-dark); }
.rn-status--ok  { background:var(--up-tint);    color:var(--up); }
.rn-status--warn{ background:var(--amber-tint);  color:var(--amber); }
.rn-status--err { background:var(--down-tint);   color:var(--down); }

/* ---- spinner ---- */
.rn-spin{
  width:13px; height:13px; flex-shrink:0;
  border:2px solid currentColor; border-top-color:transparent;
  border-radius:50%; display:inline-block;
  animation:rn-spin .7s linear infinite;
}
.rn-spin--btn{ border-color:#fff; border-top-color:transparent; }
@keyframes rn-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .rn-spin{ animation:none; } }

/* ---- foot ---- */
.rn-foot{ display:flex; align-items:center; gap:8px; }
.rn-foot__ico{ display:inline-flex; color:var(--text-3); }
.rn-foot__ico svg{ width:13px; height:13px; }
.rn-foot b{ color:var(--text-2); }

/* responsive: stack the controls on narrow screens */
@media(max-width:760px){
  .rn-grid{ grid-template-columns:1fr 1fr; }
  .rn-field--syms{ grid-column:1 / -1; }
  .rn-field--go{ grid-column:1 / -1; justify-self:stretch; }
  .rn-run{ width:100%; }
}