/* Stile condiviso dagli editor di Componenti e Processo. */
body.editor {
  --text2: #b1bbcd;
  --border: #344158;
  --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-dati: ui-monospace, SFMono-Regular, Consolas, monospace;
  font: 14px/1.5 var(--font-ui);
  height: 100dvh;
}
.editor [hidden] { display: none !important; }
.editor-load {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  background: var(--surf); color: var(--text); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.editor-load[role="alert"] { border-bottom-color: var(--accent); }
.editor #header {
  height: auto; min-height: 64px; padding: 12px 18px; gap: 16px;
  flex-wrap: wrap; align-items: center;
}
.editor-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.editor-brand a { color: var(--text2); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-decoration: none; }
.editor .logo { font: 700 20px/1.2 var(--font-ui); letter-spacing: 0; color: var(--text); }
.editor-actions, .editor-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.editor-actions { gap: 16px; }
.editor-group + .editor-group { border-left: 1px solid var(--border); padding-left: 16px; }
.editor .btn, .editor summary.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 13px/1.4 var(--font-ui); min-height: 36px; padding: 7px 12px;
  border-radius: 6px; color: var(--text); text-decoration: none;
}
.editor .btn.sm { min-height: 30px; padding: 4px 8px; font-size: 12px; }
.editor .btn.primary { background: var(--accent); border-color: var(--accent); color: #07202a; font-weight: 700; }
.editor .btn.primary:hover { background: #63e4ff; border-color: #63e4ff; color: #07202a; }
.editor .btn:hover { border-color: var(--accent); }
.editor .btn.accent { color: var(--accent); }
.editor .btn.green { color: var(--accent3); }
.editor .btn.danger { color: #ff8791; }
.editor .btn:disabled { opacity: .5; cursor: default; }
.editor :is(button, a, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.editor-menu { position: relative; }
.editor-menu > summary { list-style: none; cursor: pointer; }
.editor-menu > summary::-webkit-details-marker { display: none; }
.editor-menu > summary::after { content: '⌄'; margin-left: 8px; }
.editor-menu[open] > summary { border-color: var(--accent); }
.editor-menu-content {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 450;
  min-width: 200px; padding: 6px; background: var(--surf2);
  border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 12px 30px #0008;
  display: flex; flex-direction: column; gap: 3px;
}
.editor-menu-content .btn { justify-content: flex-start; border-color: transparent; }
.editor-menu-content .btn:hover { background: var(--surf3); }
.editor #auth-box { flex-wrap: wrap; row-gap: 8px; max-width: 100%; font-size: 13px !important; }
.editor #auth-box button { min-height: 32px; }
.editor #auth-aiuto { width: 30px !important; height: 30px !important; }
.editor #auth-box > a { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.editor-context {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  padding: 8px 18px; min-height: 48px; background: var(--surf);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.editor-document { font-weight: 600; min-width: 0; max-width: 35%; }
.editor #proc-nome-bar { font: inherit; color: var(--text); }
.editor #stato-salvataggio { margin: 0; font: 13px/1.5 var(--font-ui); flex-wrap: wrap; min-width: 0; white-space: normal; }
.editor #stato-salvataggio[data-stato="salvato"] { color: var(--accent3); }
.editor-note { color: var(--text2); font-size: 13px; }
.editor-panel-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.editor-panel-controls .btn { min-height: 32px; padding: 5px 10px; }
.editor-panel-controls [aria-expanded="true"] { background: var(--sel-fill); border-color: var(--accent); }
.editor #comp-bar { flex: 1 1 220px; min-width: 0; overflow-x: auto; padding-bottom: 3px; scrollbar-width: thin; }
.editor #comp-bar::-webkit-scrollbar { display: block; height: 6px; }
.editor .comp-tab { font: 500 13px/1.4 var(--font-ui); min-height: 34px; padding: 6px 10px; }
.editor .comp-tab button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.editor .comp-tab .x { min-width: 24px; min-height: 24px; color: var(--text2); }
.editor #main { min-height: 0; min-width: 0; }
.editor #left, .editor #right { width: var(--larghezza-pannello); min-width: 0; min-height: 0; }
.editor #left { --larghezza-pannello: 260px; overflow-y: auto; }
.editor #right { --larghezza-pannello: 340px; }
.editor .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.editor .panel-heading strong { font-size: 13px; }
.editor .panel-heading button { min-height: 28px; padding: 2px 7px; }
.editor .lsec, .editor #props-scroll, .editor .tabpane { padding: 14px; }
.editor #props-scroll { flex-shrink: 0; min-height: 180px; }
.editor .ltitle, .editor .subsect-title { font: 600 13px/1.5 var(--font-ui); letter-spacing: 0; text-transform: none; margin-bottom: 10px; }
.editor .plabel { font-size: 13px; margin-bottom: 5px; }
.editor .prow { margin-bottom: 12px; }
.editor :is(input[type="text"], input[type="number"], textarea, select) { font: 14px/1.5 var(--font-ui); padding: 7px 9px; min-height: 36px; border-radius: 5px; }
.editor :is(input[type="number"], .code-prev, #eq-text, #m-eq-text, #svg-canvas, .pt-val, .pt-calc) { font-family: var(--font-dati); }
.editor #svg-canvas input { min-height: 0; line-height: normal; }
.editor #eq-text { font: 14px/1.6 var(--font-dati) !important; min-height: 240px; }
.editor .code-prev { font-size: 12px; line-height: 1.5; max-height: 60px; padding: 8px; }
.editor .tabbtn { font-size: 13px; padding: 10px 6px; text-transform: none; letter-spacing: 0; min-height: 42px; }
.editor .tabs-bar { flex-wrap: wrap; }
.editor .tabs-bar .tabbtn { flex: 1 1 auto; }
.editor .litem { padding: 12px; margin-bottom: 8px; border-radius: 7px; }
.editor .litem-name { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.editor .litem-head { gap: 8px; }
.editor .litem-meta { font-family: var(--font-dati); }
.editor .litem-ns, .editor .litem-desc, .editor .ns-hint { font-size: 13px; line-height: 1.5; opacity: 1; overflow-wrap: anywhere; }
.editor .tag { font-size: 12px; padding: 2px 6px; }
.editor .badge { font-size: 11px; }
.editor .empty { font-size: 14px; line-height: 1.6; opacity: 1; color: var(--text2); }
.editor .tool-grid { gap: 7px; }
.editor .tbtn { font-size: 13px; min-height: 52px; padding: 8px; border-radius: 6px; }
.editor #canvas-wrap { min-width: 0; min-height: 0; }
.editor .canvas-actions { position: absolute; top: 12px; left: 12px; z-index: 10; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surf); }
.editor .canvas-actions .btn { min-height: 30px; padding: 4px 9px; }
.editor #canvas-hud { font: 12px/1.5 var(--font-ui); max-width: calc(100% - 24px); width: max-content; flex-wrap: wrap; gap: 4px 10px; padding: 8px 12px; }
.editor #coord-hud { font-size: 12px; }
.editor-resizer { flex: 0 0 8px; background: var(--bg); cursor: col-resize; position: relative; touch-action: none; }
.editor-resizer::after { content: ''; position: absolute; inset: 40% 2px; border-radius: 4px; background: var(--border); }
.editor-resizer:hover::after, .editor-resizer:focus-visible::after { background: var(--accent); }
.editor #modal { width: min(600px, calc(100vw - 32px)); }
.editor .modal-title { font: 700 17px/1.4 var(--font-ui); text-transform: none; letter-spacing: 0; }
.editor #pannello-terminale { width: min(370px, calc(100vw - 16px)); font-size: 14px; }
.editor .pt-titolo, .editor .pt-stato, .editor .pt-errore, .editor .pt-vuoto, .editor .pt-manca, .editor .pt-nome i { font-size: 13px; }
.editor .pt-riga { grid-template-columns: 1fr 20px 110px; padding: 5px 0; }
.editor .pt-val, .editor .pt-calc { font-size: 13px; }
.editor #motoreStatus { font: 12px/1.4 var(--font-ui); bottom: 12px; right: 12px; padding: 8px 10px; min-width: 0; max-width: 250px; }
.editor ::-webkit-scrollbar { width: 8px; height: 8px; }
@media (max-width: 1100px) {
  .editor #header { gap: 10px; padding: 10px 12px; }
  .editor #left { --larghezza-pannello: 230px; }
  .editor #right { --larghezza-pannello: 280px; }
  .editor-actions { gap: 10px; }
  .editor-group + .editor-group { padding-left: 10px; }
  .editor #auth-box { margin-left: auto; }
}
@media (max-width: 760px) {
  .editor #left, .editor #right { max-width: 44vw; }
  .editor-context { padding: 8px 12px; }
  .editor-document { max-width: 100%; }
  .editor .editor-menu-content { min-width: 170px; }
  .editor #canvas-hud { display: none; }
}

/* Icone: SVG come maschera, prendono il colore del testo (niente emoji: dove manca il loro font non si vedono) */
.i { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.i-x { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.i-edit { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-4L16 5l3 3L8 19z M14 7l3 3'/%3E%3C/svg%3E"); }
.i-undo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14L4 9l5-5'/%3E%3Cpath d='M4 9h10a6 6 0 0 1 0 12h-3'/%3E%3C/svg%3E"); }
.i-redo { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14l5-5-5-5'/%3E%3Cpath d='M20 9H10a6 6 0 0 0 0 12h3'/%3E%3C/svg%3E"); }
.i-select { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3l14 8-6 2-2 6z'/%3E%3C/svg%3E"); }
.i-terminal { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); }
.i-line { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19L19 5'/%3E%3C/svg%3E"); }
.i-rect { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='6' width='16' height='12' rx='1'/%3E%3C/svg%3E"); }
.i-ellipse { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='12' rx='9' ry='6'/%3E%3C/svg%3E"); }
.i-table { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14'/%3E%3Cpath d='M4 10h16M4 15h16M10 5v14'/%3E%3C/svg%3E"); }
.i-ok { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }
.i-wait { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.i-warn { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2z'/%3E%3Cpath d='M12 10v5M12 18v.5'/%3E%3C/svg%3E"); }
.i-info { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E"); }
.i-ok { color: var(--accent3); }
.i-wait { color: var(--text2); }
.i-warn { color: #f5a623; }