/* static/css/article_logic_tree.css */

.logic-tree{
  width:100%;
  max-height:50rem;
  overflow:auto;
  margin:1.8rem 0;
  padding-bottom:1rem;
  -webkit-overflow-scrolling:touch;
}

.logic-tree__canvas{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:4.5rem;
  min-width:max-content;
  padding:1rem 2rem;
}

.logic-tree__lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
  z-index:1;
}

.logic-tree__level{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:1.6rem;
}

.logic-tree__node{
  width:15rem;
  border:.08rem solid #d9e6f7;
  border-radius:.9rem;
  background:#f8fbff;
  padding:1rem;
  box-shadow:0 .25rem .8rem rgba(0,0,0,.04);
  scroll-margin-inline:2rem;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease,
    background .2s ease;
}

.logic-tree__node--start{
  background:#f2f8ff;
  border-color:#b8d7f5;
}

.logic-tree__node--result{
  background:#f2fbf4;
  border-color:#98d8a5;
}

.logic-tree__node.is-active{
  border-color:#0175d8;
  background:#eef7ff;
  box-shadow:0 .35rem 1rem rgba(1,117,216,.22);
  transform:translateY(-.15rem);
}

.logic-tree__label{
  display:inline-block;
  width:fit-content;
  margin-bottom:.5rem;
  padding:.18rem .6rem;
  border-radius:999px;
  background:#e8f1ff;
  color:#0175d8;
  font-size:.68rem;
  font-weight:700;
}

.logic-tree__title{
  font-weight:700;
  color:#333;
  line-height:1.6;
  font-size:1.1rem;
}

.logic-tree__description{
  margin-top:.45rem;
  margin-bottom:.9rem;
  color:#6d7682;
  font-size:.9rem;
  line-height:1.75;
  font-weight:400;
}

.logic-tree__branches{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  margin-top:.85rem;
}

.logic-tree__branches button{
  width:100%;
  border:.08rem solid #cfe0ff;
  border-radius:.6rem;
  background:#fff;
  color:#0f5cc0;
  font:inherit;
  font-size:.82rem;
  font-weight:700;
  line-height:1.5;
  padding:.55rem .7rem;
  cursor:pointer;
  text-align:left;
  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease;
}

.logic-tree__branches button:hover{
  background:#e8f1ff;
  border-color:#0175d8;
  color:#0175d8;
}

.logic-tree__branches button.is-selected{
  background:#0175d8;
  border-color:#0175d8;
  color:#fff;
}

@media (max-width:600px){

  .logic-tree{
    max-height:34rem;
    margin:1.4rem 0;
    padding-bottom:1rem;
  }

  .logic-tree__canvas{
    gap:3rem;
    padding:.8rem 1rem;
  }

  .logic-tree__node{
    width:11.5rem;
    padding:.8rem;
    border-radius:.75rem;
  }

  .logic-tree__title{
    font-size:.9rem;
  }

  .logic-tree__description{
    font-size:.8rem;
    line-height:1.7;
    margin-top:.35rem;
    margin-bottom:.7rem;
  }

  .logic-tree__label{
    font-size:.62rem;
  }

  .logic-tree__branches button{
    font-size:.74rem;
    padding:.5rem .55rem;
  }
}