/* ============================================================
   EDITOR — toolbar, panels, side-by-side input + preview
   ============================================================ */
.editor{container-type:inline-size;border:1px solid var(--rule);border-radius:6px;background:var(--panel)}
.editor:focus-within{border-color:var(--grid)}

.ed-bar{
  display:flex;flex-wrap:wrap;gap:2px;align-items:center;
  padding:5px 6px;border-bottom:1px solid var(--rule);background:var(--paper);border-radius:6px 6px 0 0;
}
.ed-bar button{
  appearance:none;cursor:pointer;background:none;border:1px solid transparent;border-radius:4px;
  font:500 12.5px/1 var(--sans);color:var(--ink-soft);padding:6px 8px;min-width:30px;white-space:nowrap;
}
.ed-bar button:hover{background:var(--panel);border-color:var(--rule);color:var(--ink)}
.ed-bar button b{font-weight:800}
.ed-bar button i{font-family:var(--serif);font-size:14px}
.ed-bar .hl{background:var(--mark);padding:0 3px;border-radius:2px;color:var(--ink)}
.ed-bar .ed-f{font:italic 600 14px/1 var(--serif)}
.ed-bar button[aria-pressed="true"]{color:var(--dk);font-weight:600}
.ed-sep{width:1px;height:18px;background:var(--rule);margin:0 4px}
.ed-grow{flex:1}

.ed-panel{padding:10px 12px;border-bottom:1px solid var(--rule);background:var(--paper)}
.sym-group + .sym-group{margin-top:8px}
.sym-title{font:600 11px/1.3 var(--sans);color:var(--ink-soft);margin-bottom:4px;letter-spacing:.02em}
.sym-grid{display:flex;flex-wrap:wrap;gap:4px}
.sym-grid button{
  appearance:none;cursor:pointer;min-width:40px;height:36px;padding:0 8px;
  background:var(--panel);border:1px solid var(--rule);border-radius:4px;color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.sym-grid button:hover{border-color:var(--dk);background:var(--dk-bg)}
.sym-grid .katex{font-size:1em}
.sym-hint{font-size:11.5px;color:var(--ink-soft);margin-top:8px}
.sym-hint code{font:11px var(--mono);background:var(--track);padding:0 4px;border-radius:3px}

.box-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px}
.box-pick{
  appearance:none;cursor:pointer;text-align:left;font:inherit;color:var(--ink);
  background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--grid);border-radius:4px;padding:7px 9px;
}
.box-pick b{display:block;font-size:12.5px}
.box-pick span{font-size:11.5px;color:var(--ink-soft)}
.box-pick.co-warn{border-left-color:var(--l1)} .box-pick.co-formula{border-left-color:var(--dk)}
.box-pick.co-ask{border-left-color:var(--l2)} .box-pick.co-tip{border-left-color:var(--l4)}
.box-pick:hover{background:var(--hover)}

.help-table{border-collapse:collapse;width:100%;font-size:12.5px}
.help-table td{padding:6px 10px 6px 0;vertical-align:top;border-top:1px solid var(--rule)}
.help-table tr:first-child td{border-top:0}
.help-table code{font:11.5px/1.5 var(--mono);color:var(--ink);white-space:nowrap}
.help-table .md{font-size:13px;max-width:none}
.help-table .md ul{margin:0}
.help-what{color:var(--ink-soft);font-size:12px}

.ed-panes{display:grid;grid-template-columns:1fr}
.ed-in{
  display:block;width:100%;min-height:120px;resize:none;overflow:hidden;
  font:14.5px/1.6 var(--mono);color:var(--ink);background:var(--input);
  border:0;padding:12px 14px;tab-size:2;
}
.ed-in:focus{outline:none}
.ed-prev{
  max-width:none;padding:12px 16px;border-top:1px dashed var(--rule);
  background:var(--panel);font-size:15px;min-width:0;
}
.ed-empty{color:var(--blank);font-style:italic;font-size:13.5px}
.editor.no-prev .ed-prev{display:none}

/* wide enough → write on the left, see it on the right */
@container (min-width:720px){
  .ed-panes{grid-template-columns:1fr 1fr}
  .ed-prev{border-top:0;border-left:1px solid var(--rule)}
  .editor.no-prev .ed-panes{grid-template-columns:1fr}
}

.ed-foot{font-size:11.5px;color:var(--ink-soft);padding:6px 12px;border-top:1px solid var(--rule);background:var(--paper);border-radius:0 0 6px 6px}

@media (max-width:640px){
  .ed-bar button{padding:7px 7px}
  .ed-sep{display:none}
  .ed-in{font-size:15px}
}