/* Editor degli schemi. */
.editor{display:grid;grid-template-columns:190px minmax(0,1fr);gap:12px}
@media (max-width:760px){.editor{grid-template-columns:minmax(0,1fr)}}
.tools{display:flex;flex-direction:column;gap:8px}
.tools .grp{display:flex;flex-wrap:wrap;gap:4px}
.tools .gl{flex-basis:100%;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.tools button,.props button{padding:4px 8px;font-size:13px;font-weight:500}
.tools button.on,.props button.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
#e-pitch{touch-action:none;user-select:none;cursor:crosshair}
#e-pitch.sel{cursor:default}
#e-pitch [data-i]{cursor:move}
#e-pitch [data-h]{cursor:grab}
.props{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:38px;margin-top:8px}
.sw{width:26px;height:26px;border-radius:50%;padding:0}
.sw.on{outline:2px solid var(--fg);outline-offset:2px}
.sw-r{background:#e11d1d}.sw-b{background:#0b66c3}.sw-y{background:#ffe100}.sw-w{background:#ffffff}.sw-k{background:#111111}.sw-o{background:#ff9900}
.tools .tool{display:flex;align-items:center;gap:6px}
.ico{width:22px;height:22px;border-radius:4px;flex:none}
.tabs{display:none}
.dl .foot{position:sticky;bottom:0;background:var(--surface);padding-block:10px;border-top:1px solid var(--line)}

/* telefono: finestre a tutto schermo, descrizione e schema su due schede, strumenti in una striscia scorrevole */
@media (max-width:760px){
  dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}
  .dl{padding:12px;min-height:100%}
  .dl .foot{margin-top:auto}
  .tabs{display:flex}
  .panes.show-text .pane-diagram,.panes.show-diagram .pane-text{display:none}
  .hint{display:none}
  .editor{gap:8px}
  .tools{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:thin}
  .tools .grp{flex-wrap:nowrap;flex:none}
  .tools .gl{display:none}
  .tools .tool{flex-direction:column;gap:2px;min-width:60px;min-height:54px;padding:5px 6px;font-size:11px;line-height:1.1}
  .ico{width:26px;height:26px}
  #e-top{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  #e-top>*{flex:none}
  #e-top button,.props button{min-height:40px}
  .sw{width:36px;height:36px}
  .props{gap:8px}
}