.automacao-board { min-width: 0; color: var(--fg); }
.automacao-board__toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-block-end: var(--sp-4); }
.automacao-board h2 { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-bold); }
.automacao-board h3 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-bold); }
.automacao-board__hint { margin: var(--sp-2) 0; color: var(--fg-secondary); font-size: var(--text-sm); overflow-wrap: anywhere; }
.automacao-board__zoom { display: flex; align-items: center; gap: var(--sp-2); }
.automacao-board__zoom output { min-width: var(--sp-10); text-align: center; font-size: var(--text-sm); }
.automacao-board__layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--sp-4); }
.automacao-board__viewport { min-width: 0; max-width: 100%; overflow: auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.automacao-board__frame { position: relative; min-height: var(--sp-12); }
.automacao-board__stage { position: absolute; inset: 0 auto auto 0; transform-origin: top left; padding: var(--sp-5); box-sizing: border-box; }
.automacao-board__lanes { position: relative; display: flex; flex-direction: column; gap: var(--sp-10); }
.automacao-board__lane { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--sp-12) * 4)), 1fr)); align-items: start; gap: var(--sp-4); }
.automacao-board__card { appearance: none; width: 100%; min-width: 0; min-height: var(--control-lg); display: flex; flex-direction: column; gap: var(--sp-2); text-align: start; cursor: pointer; font-family: var(--font-sans); color: var(--fg); background: var(--surface); position: relative; }
.automacao-board__card strong { font-size: var(--text-md); font-weight: var(--weight-bold); overflow-wrap: anywhere; }
.automacao-board__card .ds-eyebrow { color: var(--fg-secondary); }
.automacao-board__card {
  box-shadow: var(--surface-highlight), var(--shadow-card);
  transition-property: transform, box-shadow, border-color, background-color;
  transition-duration: var(--duration-base);
  transition-timing-function: var(--ease-spring);
}
.automacao-board__card:hover { transform: translateY(var(--lift)); box-shadow: var(--surface-highlight), var(--shadow-card-hover); border-color: var(--border-strong); }
.automacao-board__card:active { transform: scale(var(--press)); }
.automacao-board__card[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--surface-highlight), var(--shadow-card), var(--focus-ring); }
.automacao-board__card[aria-pressed="true"]:hover { transform: translateY(var(--lift)); }
.automacao-board__card[data-drop="true"] { outline: 3px solid var(--accent); outline-offset: 3px; }
.automacao-board__card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.automacao-board__summary { color: var(--fg-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.automacao-board__connections { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; color: var(--border-strong); }
.automacao-board__connections path { fill: none; stroke: currentColor; stroke-width: 2; }
.automacao-board__connections path[data-returning="true"] { stroke-dasharray: var(--sp-1); }
.automacao-board__connections path { transition: stroke var(--duration-base) var(--ease-spring), stroke-width var(--duration-base) var(--ease-spring); }
.automacao-board__connections path[data-active="true"] { stroke: var(--accent); stroke-width: 3; }
.automacao-board__editor-host { min-width: 0; }
.automacao-board__editor { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.automacao-board__editor .ds-input { width: 100%; min-width: 0; box-sizing: border-box; }
.automacao-board__editor textarea { resize: vertical; line-height: var(--leading-normal); }
.automacao-board__editor .ds-field > small { color: var(--fg-secondary); }
.automacao-board__editor .ds-field > .automacao-board__error { color: var(--red); font-size: var(--text-sm); }
.automacao-board__editor [aria-invalid="true"] { border-color: var(--red); }
.automacao-board__tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); border-top: 1px solid var(--border); padding-top: var(--sp-4); }
.automacao-board__tools .ds-button { white-space: normal; text-align: start; }
.automacao-board__details > summary { cursor: pointer; color: var(--fg-secondary); font-size: var(--text-sm); padding-block: var(--sp-2); }
.automacao-board__details > .ds-field { margin-block-start: var(--sp-3); }
.automacao-board__announcement { margin: var(--sp-3) 0 0; font-size: var(--text-sm); color: var(--fg-secondary); }
.automacao-board__announcement:empty { display: none; }
@media (min-width: 1200px) {
  .automacao-board__layout { grid-template-columns: minmax(0, 1fr) minmax(calc(var(--sp-12) * 5), calc(var(--sp-12) * 6)); }
  .automacao-board__editor-host { position: sticky; top: var(--sp-4); }
}
@media (max-width: 768px) {
  .automacao-board__toolbar { margin-block-end: var(--sp-2); }
  .automacao-board__zoom { width: auto; }
  .automacao-board__zoom .ds-button { min-height: var(--control-md); min-width: var(--control-md); padding-inline: var(--sp-2); }
  .automacao-board__stage { padding: var(--sp-4); }
  .automacao-board__lane { grid-template-columns: minmax(0, 1fr); }
  .automacao-board .ds-button, .automacao-board .ds-input { min-height: var(--control-lg); }
  .automacao-board__zoom { width: 100%; }
}
@keyframes automacao-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Só enquanto o quadro carrega a classe de entrada (primeiro desenho); depois, nada anima. */
.automacao-board--entering .automacao-board__lane > .automacao-board__card { animation: automacao-card-in var(--duration-slow) var(--ease-spring) both; }
.automacao-board--entering .automacao-board__lane > .automacao-board__card:nth-child(2) { animation-delay: 60ms; }
.automacao-board--entering .automacao-board__lane > .automacao-board__card:nth-child(3) { animation-delay: 120ms; }
.automacao-board--entering .automacao-board__lane > .automacao-board__card:nth-child(4) { animation-delay: 180ms; }
.automacao-board--entering .automacao-board__lane > .automacao-board__card:nth-child(n + 5) { animation-delay: 240ms; }
/* O painel "Editar conteúdo" flutua fixo ao lado do quadro: é o caso do vidro. */
.automacao-board__editor-host > .ds-card { background: var(--glass-bg); border-color: var(--glass-border); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); }
@media (prefers-reduced-motion: reduce) {
  .automacao-board *, .automacao-board *::before, .automacao-board *::after { transition: none; animation: none; }
  .automacao-board__card:hover, .automacao-board__card:active { transform: none; }
}