/* strategyeditor.css - the strategy editor pop-up and the Strategies field in
   the New bot box (his order, 2026-10-27). Every colour is a theme token, so
   dark and light both follow. Loaded after the theme files. */

/* ---- the Strategies field in the New bot box ----------------------------- */
.nb-strat{ display:flex; gap:8px; align-items:stretch; }
.nb-strat select{ flex:1 1 auto; min-width:0; }
.btn.nb-strat-new{ flex:0 0 auto; white-space:nowrap; padding:8px 12px; font-weight:600; }
.nb-strat-about{ font:12.5px/1.5 Inter, system-ui, sans-serif; color:var(--dk-text-2);
  background:var(--dk-row); border-radius:6px; padding:8px 11px; margin-top:6px; }
.nb-strat-about:empty{ display:none; }
@media (max-width:520px){
  .nb-strat{ flex-direction:column; }
}

/* ---- the pop-up ------------------------------------------------------------ */
body.se-open{ overflow:hidden; }
.se-overlay{ z-index:140; align-items:flex-start; overflow-y:auto; padding:24px 16px; }
.modal-card.se-card{ position:relative; max-width:1020px; width:100%; padding:20px 22px 18px;
  box-sizing:border-box; margin:auto 0; }
.se-close{ position:absolute; top:10px; right:12px; font-size:24px; background:none; border:0;
  color:var(--dk-muted); cursor:pointer; line-height:1; padding:2px 6px; }
.se-close:hover{ color:var(--dk-text); }
.se-card .modal-title{ margin-bottom:14px; padding-right:30px; }
.se-body{ display:grid; grid-template-columns:240px minmax(0, 1fr); gap:20px; }

/* his list */
.se-side{ border-right:1px solid var(--dk-line); padding-right:16px; min-width:0; }
.se-side-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.se-side-title{ font:600 13px Inter, system-ui, sans-serif; color:var(--dk-text); }
.btn.se-new{ padding:6px 10px; font-size:12.5px; }
.se-list{ display:flex; flex-direction:column; gap:16px; }
.se-group{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.se-group-title{ font:600 11.5px Inter, system-ui, sans-serif; color:var(--dk-muted); }
.se-group-items{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.se-empty{ font:12.5px/1.5 Inter, system-ui, sans-serif; color:var(--dk-muted); }
.se-item{ background:var(--dk-row); border-radius:8px; padding:8px 9px; display:flex; flex-direction:column; gap:7px;
  border:1px solid transparent; }
.se-item.on{ border-color:var(--dk-line-strong); }
.se-item-main{ display:flex; flex-direction:column; gap:2px; text-align:left; background:none; border:0;
  padding:0; cursor:pointer; color:var(--dk-text); min-width:0; }
.se-item-name{ font:600 13px Inter, system-ui, sans-serif; overflow-wrap:anywhere; }
.se-item-sub{ font:11.5px/1.35 Inter, system-ui, sans-serif; color:var(--dk-muted); overflow-wrap:anywhere; }
.se-item-acts{ display:flex; gap:6px; }
.btn.se-mini{ padding:4px 9px; font-size:12px; }
.btn.se-rm:hover{ color:var(--dk-red); }
/* the app's own: a quieter row, and a faded one when off his lists */
.se-item.se-item-bi{ padding:7px 9px; }
.se-item.off .se-item-name{ color:var(--dk-muted); font-weight:500; }
.se-item.off .se-item-sub{ font-style:italic; }

/* one of the app's own strategies, shown on the right */
.se-bi[hidden], #seEditor[hidden]{ display:none; }
.se-bi-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.se-bi-name{ font:600 17px Inter, system-ui, sans-serif; color:var(--dk-text); }
.se-bi-tag{ font:600 11.5px Inter, system-ui, sans-serif; color:var(--dk-muted); background:var(--dk-row);
  border-radius:5px; padding:3px 8px; }
.se-bi-used{ font:13px Inter, system-ui, sans-serif; color:var(--dk-text-2); }
.se-bi-off{ font:12.5px/1.45 Inter, system-ui, sans-serif; color:var(--dk-amber); background:var(--dk-amber-bg);
  border-radius:6px; padding:7px 10px; }
.se-bi-off[hidden]{ display:none; }
.se-bi-about{ font:13px/1.6 Inter, system-ui, sans-serif; color:var(--dk-text-2); margin:0;
  background:var(--dk-row); border-radius:8px; padding:10px 12px; }
.se-bi-note{ font:12.5px/1.5 Inter, system-ui, sans-serif; color:var(--dk-muted); }
.se-bi .btn[hidden]{ display:none; }

/* the editor */
.se-main{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.se-field{ display:flex; flex-direction:column; gap:5px; }
.se-label{ font:12px Inter, system-ui, sans-serif; color:var(--dk-muted); }
.se-in{ font:13px Inter, system-ui, sans-serif; padding:8px 10px; border-radius:6px; box-sizing:border-box;
  background:var(--dk-row); color:var(--dk-text); border:1px solid var(--dk-field-line, var(--dk-line-strong)); }
.se-in:focus, .se-sel:focus, .se-text:focus{ outline:2px solid var(--dk-line-strong); outline-offset:1px; }
#seName{ max-width:420px; }

.se-tabs{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--dk-line); }
.se-tab{ font:600 13px Inter, system-ui, sans-serif; color:var(--dk-muted); background:none; border:0;
  border-bottom:2px solid transparent; padding:8px 12px; margin-bottom:-1px; cursor:pointer; }
.se-tab.on{ color:var(--dk-text); border-bottom-color:var(--dk-text); }
.se-example{ margin-left:auto; font:12.5px Inter, system-ui, sans-serif; color:var(--dk-muted); background:none;
  border:0; cursor:pointer; text-decoration:underline; padding:6px 4px; }
.se-example:hover{ color:var(--dk-text); }

/* The box he types in sits ON TOP of a copy of the same text; the copy is
   invisible except for the wavy underline under a mistake. Same font, size,
   padding and wrapping, so the marks land exactly under the words. */
.se-editor{ position:relative; border-radius:8px; background:var(--dk-row);
  border:1px solid var(--dk-field-line, var(--dk-line-strong)); }
#stratModal .se-hl, #stratModal .se-text{ font:14px/1.6 ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  padding:10px 12px; margin:0; box-sizing:border-box; width:100%; white-space:pre-wrap;
  overflow-wrap:break-word; word-break:normal; tab-size:2; letter-spacing:0;
  scrollbar-gutter:stable; }   /* both keep the same width, so wrapping matches */
.se-hl{ position:absolute; inset:0; overflow:hidden; color:transparent; pointer-events:none; }
/* the id makes these outrank the theme's rule for every text box, which would
   otherwise paint the box solid (hiding the underlines) and change its font */
#stratModal .se-text{ position:relative; display:block; min-height:190px; height:230px; resize:vertical;
  background:transparent; color:var(--dk-text); border:0; border-radius:8px; caret-color:var(--dk-text);
  outline:none; }
#stratModal .se-editor:focus-within{ border-color:var(--dk-amber); }
.se-text::placeholder{ color:var(--dk-faint); }
.se-bad{ background:transparent; color:transparent; text-decoration:underline wavy var(--dk-red);
  text-decoration-thickness:1.5px; text-underline-offset:3px; text-decoration-skip-ink:none; }

.se-problems{ display:flex; flex-direction:column; gap:6px; }
.se-problems:empty{ display:none; }
.se-prob{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--dk-red-bg);
  border-radius:6px; padding:7px 10px; }
.se-prob-msg{ font:13px/1.45 Inter, system-ui, sans-serif; color:var(--dk-red); background:none; border:0;
  padding:0; text-align:left; cursor:pointer; flex:1 1 220px; }
.btn.se-fix{ padding:4px 10px; font-size:12px; font-family:ui-monospace, Consolas, monospace; }
.se-warn{ font:12.5px/1.45 Inter, system-ui, sans-serif; color:var(--dk-amber); background:var(--dk-amber-bg);
  border-radius:6px; padding:7px 10px; }

.se-suggest-head{ font:600 12.5px Inter, system-ui, sans-serif; color:var(--dk-text); }
.se-suggest-tip{ font-weight:400; color:var(--dk-faint); margin-left:6px; }
.se-suggest{ display:flex; flex-direction:column; gap:8px; max-height:210px; overflow-y:auto;
  padding-right:4px; }
.se-sg{ display:flex; gap:8px; align-items:baseline; }
.se-sg-title{ flex:0 0 92px; font:11.5px Inter, system-ui, sans-serif; color:var(--dk-muted); }
.se-chips{ display:flex; flex-wrap:wrap; gap:5px; min-width:0; }
.se-chip{ font:12px ui-monospace, Consolas, monospace; color:var(--dk-text-2); background:var(--dk-row);
  border:1px solid var(--dk-line); border-radius:5px; padding:3px 7px; cursor:pointer; }
.se-chip:hover{ border-color:var(--dk-line-strong); color:var(--dk-text); }
.se-suggest.filtering .se-chip{ opacity:.45; }
.se-suggest.filtering .se-chip.hit{ opacity:1; border-color:var(--dk-text); color:var(--dk-text); }

/* building blocks */
.se-pane[hidden]{ display:none; }
#sePaneBlocks{ display:flex; flex-direction:column; gap:14px; }
#sePaneBlocks[hidden]{ display:none; }
.se-blk-sec{ background:var(--dk-row); border-radius:8px; padding:10px 12px; display:flex;
  flex-direction:column; gap:8px; }
.se-blk-head{ display:flex; align-items:center; gap:10px; font:600 13px Inter, system-ui, sans-serif;
  color:var(--dk-text); flex-wrap:wrap; }
.se-blk-on{ display:flex; align-items:center; gap:7px; cursor:pointer; }
.se-sel{ font:13px Inter, system-ui, sans-serif; padding:6px 8px; border-radius:6px; background:var(--dk-panel);
  color:var(--dk-text); border:1px solid var(--dk-field-line, var(--dk-line-strong)); max-width:100%; }
.se-rule{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.se-rule-join{ font:12px Inter, system-ui, sans-serif; color:var(--dk-muted); width:26px; }
.se-rule-word{ font:12.5px Inter, system-ui, sans-serif; color:var(--dk-muted); }
.se-val{ display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; }
.se-in.se-num{ width:72px; padding:6px 8px; background:var(--dk-panel); }
.se-in.se-num.se-period{ width:60px; }
.se-in.se-num.se-mult{ width:56px; }
.se-rule-rm{ background:none; border:0; color:var(--dk-muted); cursor:pointer; font-size:18px; line-height:1;
  padding:2px 6px; margin-left:auto; }
.se-rule-rm:hover{ color:var(--dk-red); }
.se-exit-grid{ display:flex; flex-direction:column; gap:8px; }
.se-exit{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.se-exit-label{ flex:0 0 74px; font:12.5px Inter, system-ui, sans-serif; color:var(--dk-muted); }
.se-exit-tail{ font:12px Inter, system-ui, sans-serif; color:var(--dk-faint); }
.se-exit [hidden]{ display:none; }

/* what it will do */
.se-read{ border-top:1px solid var(--dk-line); padding-top:10px; }
.se-read-title{ font:600 13px Inter, system-ui, sans-serif; color:var(--dk-text); margin-bottom:6px; }
.se-read-line{ font:13px/1.55 Inter, system-ui, sans-serif; color:var(--dk-text-2); margin:0 0 4px; }
.se-read-empty{ font:12.5px/1.5 Inter, system-ui, sans-serif; color:var(--dk-muted); }

.se-foot{ display:flex; align-items:center; gap:10px; justify-content:flex-end; flex-wrap:wrap;
  border-top:1px solid var(--dk-line); padding-top:12px; }
.se-status{ flex:1 1 220px; font:12.5px/1.45 Inter, system-ui, sans-serif; color:var(--dk-muted); }
.se-status.err{ color:var(--dk-red); font-weight:500; }
.se-status.done{ color:var(--dk-green); }
.se-foot .btn.primary{ font-weight:600; padding:9px 16px; }

/* a phone: the list goes above the editor */
@media (max-width:760px){
  .se-overlay{ padding:10px 8px; }
  .modal-card.se-card{ padding:16px 14px 14px; }
  .se-body{ grid-template-columns:minmax(0, 1fr); gap:14px; }
  .se-side{ border-right:0; padding-right:0; border-bottom:1px solid var(--dk-line); padding-bottom:12px; }
  .se-group-items{ flex-direction:row; overflow-x:auto; padding-bottom:4px; }
  .se-item{ flex:0 0 200px; }
  .se-group-items .se-empty{ flex:1 1 auto; }
  .se-sg{ flex-direction:column; gap:4px; }
  .se-sg-title{ flex:none; }
  .se-text{ height:200px; }
  .se-exit-label{ flex-basis:100%; }
}