/* ==========================================================================
   FLOWCHART v3.3
   ========================================================================== */

.cp-flowchart{
  width: 100%;
  color: var(--text);
}

.cp-flowchart,
.cp-flowchart *{
  box-sizing: border-box;
}

.cp-flowchart--mw-sm{ max-width: var(--mw-sm); margin-left:auto; margin-right:auto; }
.cp-flowchart--mw-md{ max-width: var(--mw-md); margin-left:auto; margin-right:auto; }
.cp-flowchart--mw-lg{ max-width: var(--mw-lg); margin-left:auto; margin-right:auto; }
.cp-flowchart--mw-xl{ max-width: var(--mw-xl); margin-left:auto; margin-right:auto; }
.cp-flowchart--mw-full{ max-width: var(--mw-full); }

.cp-flowchart__canvas{
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  overflow-x: auto;
}

.cp-flowchart--dir-tb .cp-flowchart__canvas{
  flex-direction: column;
  align-items: center;
}

.cp-flowchart--dir-lr .cp-flowchart__canvas{
  flex-direction: row;
  align-items: center;
}

.cp-flowchart--variant-compact .cp-flowchart__canvas{
  gap: var(--space-2);
  padding: var(--space-3);
}

.cp-flowchart__node{
  position: relative;
  display: grid;
  place-items: center;
  min-width: 9rem;
  max-width: 16rem;
  min-height: 3rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  text-align: center;
  line-height: 1.35;
  font-weight: 700;
}

.cp-flowchart__node-label{
  position: relative;
  z-index: 1;
  overflow-wrap: anywhere;
}

.cp-flowchart__node--terminator{
  border-radius: 999px;
  background: var(--tone-success-bg);
  border-color: var(--tone-success-border);
}

.cp-flowchart__node--process{
  border-radius: var(--radius-md);
}

.cp-flowchart__node--decision{
  width: 8.5rem;
  height: 8.5rem;
  min-width: 8.5rem;
  min-height: 8.5rem;
  padding: var(--space-2);
  transform: rotate(45deg);
  border-radius: var(--radius-sm);
  background: var(--tone-warning-bg);
  border-color: var(--tone-warning-border);
}

.cp-flowchart__node--decision .cp-flowchart__node-label{
  transform: rotate(-45deg);
}

.cp-flowchart__node--input_output{
  border-radius: var(--radius-md);
  transform: skewX(-10deg);
  background: var(--tone-info-bg);
  border-color: var(--tone-info-border);
}

.cp-flowchart__node--input_output .cp-flowchart__node-label{
  transform: skewX(10deg);
}

.cp-flowchart__node--document{
  border-radius: var(--radius-md);
  background: var(--surface);
}

.cp-flowchart__node--document::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .35rem;
  height: .35rem;
  border-bottom: 2px solid var(--border);
  border-radius: 50%;
  opacity: .7;
}

.cp-flowchart__node--database{
  border-radius: 999px / 28%;
  background: var(--tone-accent-bg);
  border-color: var(--tone-accent-border);
}

.cp-flowchart__node--connector{
  min-width: 3.25rem;
  max-width: 3.25rem;
  width: 3.25rem;
  height: 3.25rem;
  min-height: 3.25rem;
  padding: var(--space-1);
  border-radius: 999px;
  background: var(--surface);
}

.cp-flowchart__arrow{
  flex: 0 0 auto;
  color: var(--muted);
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1;
}

.cp-flowchart__caption{
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: .95rem;
  text-align: center;
}

.cp-flowchart__edges{
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--text);
}

.cp-flowchart__edges ul{
  margin: var(--space-2) 0 0 0;
  padding: 0;
  list-style: none;
}

.cp-flowchart__edge{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  color: var(--muted);
}

.cp-flowchart__edge + .cp-flowchart__edge{
  margin-top: var(--space-1);
}

.cp-flowchart__edge-from,
.cp-flowchart__edge-to{
  color: var(--text);
  font-weight: 700;
}

.cp-flowchart__edge-arrow{
  color: var(--primary);
  font-weight: 900;
}

.cp-flowchart__edge-label{
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .85rem;
}

.cp-flowchart__edge--invalid{
  color: var(--tone-danger-border);
}

@media (max-width: 720px){
  .cp-flowchart--dir-lr .cp-flowchart__canvas{
    flex-direction: column;
  }

  .cp-flowchart--dir-lr .cp-flowchart__arrow{
    transform: rotate(90deg);
  }

  .cp-flowchart__node{
    width: 100%;
    max-width: 18rem;
  }
}