/* Sign layout builder: sign list editor, speed zone chips and the SVG strip (shared styles: tools.css + tool-page.css) */
.sl-zones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sl-perm { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; background: var(--concrete); font-weight: 800; }
.sl-zone { display: inline-flex; align-items: center; gap: 4px; }
.sl-zone > span { color: var(--steel); font-weight: 800; }
.tool-in .sl-zone select { width: auto; min-width: 74px; }
.sl-x { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid var(--concrete-2); background: var(--white); font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--steel); }
.sl-btn { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--asphalt); background: var(--asphalt); color: var(--yellow); font: inherit; font-weight: 800; font-size: .88rem; cursor: pointer; }
.sl-btn.ghost { background: var(--white); color: var(--asphalt); }
.sl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sl-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px; border: 1.5px solid var(--concrete-2); border-radius: 12px; background: var(--white); }
.sl-row.is-speed { background: #fff7f6; border-color: #fecaca; }
.sl-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--yellow); color: var(--asphalt); font-weight: 800; transform: rotate(0); }
.sl-sp { font-style: normal; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--red); background: #fff; font-size: .8rem; }
.is-speed .sl-n { background: none; }
.tool-in .sl-name { min-width: 0; }
.tool-in label.sl-name { display: flex; align-items: center; gap: 8px; font-size: .84rem; }
.tool-in label.sl-name select { flex: 1; }
.sl-btns { display: flex; gap: 4px; }
.sl-btns button { width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid var(--concrete-2); background: var(--white); font-size: 1.05rem; font-weight: 800; cursor: pointer; color: var(--ink); }
.sl-btns button:disabled { opacity: .35; cursor: default; }
.sl-btns button[data-rm] { color: var(--red); }
.sl-empty { padding: 12px; border: 1.5px dashed var(--concrete-2); border-radius: 12px; color: var(--steel); font-size: .88rem; }
.sl-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.sl-add-pick { flex: 1 1 200px; }
.sl-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-tabs button { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--concrete-2); background: var(--white); font: inherit; font-weight: 700; font-size: .86rem; cursor: pointer; }
.sl-tabs button[aria-selected="true"] { background: var(--asphalt); border-color: var(--asphalt); color: var(--yellow); }
.sl-tabs .sl-copy { margin-left: auto; }
@media (max-width: 600px) {
  .sl-row { grid-template-columns: 36px minmax(0, 1fr); }
  .sl-btns { grid-column: 1 / -1; justify-content: flex-end; }
  .sl-tabs .sl-copy { margin-left: 0; }
}
/* the diagram: scrolls sideways inside the result panel on small phones, never the page */
.sl-svg { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
.sl-svg svg { display: block; width: 100%; min-width: 620px; height: auto; }
#tw-print .sl-svg { overflow: visible; }
#tw-print .sl-svg svg { min-width: 0; width: 100%; }
#tw-print .sl-svg .bg { fill: #fff; stroke: #999; }
#tw-print .sl-svg .zn { opacity: .28; }
#tw-print .sl-svg .rd { fill: #c9cdd2; }
#tw-print .sl-svg .lt { fill: #111; }
#tool-out .out-table td:nth-child(3), #tool-out .out-table td:nth-child(5) { white-space: nowrap; }