/* R24 — visual treatment for source-aligned training journey analysis. */

/* The legacy absolute SVG was drawn against shorter cause cards and cuts through
   the expanded source-grounded content. R24 replaces it with CSS connectors that
   are tied to the current card layout. Hide the legacy SVG unconditionally so
   the replacement remains correct even before/without the figma-live-v3 class. */
#s16 .qi-fishbone-svg,
.figma-live-v3 #s16 .qi-fishbone-svg{display:none!important}

.figma-live-v3 #s16 .causeBoard,
.figma-live-v3 #s16 .qi-fishbone-visual{
  overflow:visible!important;
}

.figma-live-v3 #s16 .causeBoard{
  position:relative;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 210px!important;
  gap:24px!important;
  align-items:stretch!important;
}

.figma-live-v3 #s16 .causeGrid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(210px,auto));
  gap:54px 14px!important;
  position:relative;
  padding:0!important;
  align-items:stretch;
}

.figma-live-v3 #s16 .causeGrid::before{
  content:"";
  position:absolute;
  left:2%;
  right:-26px;
  top:50%;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,#0F6545,#5d967b);
  transform:translateY(-50%);
  z-index:0;
}

.figma-live-v3 #s16 .causeCard{
  min-width:0!important;
  min-height:210px!important;
  height:auto!important;
  position:relative!important;
  z-index:2!important;
  padding:14px 14px 15px!important;
  background:#fff!important;
  border-top:4px solid #0F6545!important;
  border-inline-start:2px solid #AD84C6!important;
  overflow:visible!important;
}

.figma-live-v3 #s16 .causeCard h3{
  font-size:13px!important;
  line-height:1.25!important;
  margin-bottom:8px!important;
}

.figma-live-v3 #s16 .causeCard p{
  font-size:11px!important;
  line-height:1.58!important;
  margin:0!important;
}

.figma-live-v3 #s16 .causeCard::before,
.figma-live-v3 #s16 .causeCard::after{
  content:"";
  position:absolute;
  left:50%;
  width:4px;
  height:34px;
  border-radius:999px;
  background:#4f8c70;
  z-index:-1;
}
.figma-live-v3 #s16 .causeCard:nth-child(-n+3)::before{display:none!important}
.figma-live-v3 #s16 .causeCard:nth-child(-n+3)::after{
  display:block!important;
  bottom:-35px;
  transform:translateX(-50%) rotate(-20deg);
  transform-origin:top center;
}
.figma-live-v3 #s16 .causeCard:nth-child(n+4)::after{display:none!important}
.figma-live-v3 #s16 .causeCard:nth-child(n+4)::before{
  display:block!important;
  top:-35px;
  transform:translateX(-50%) rotate(20deg);
  transform-origin:bottom center;
}

.figma-live-v3 #s16 .effectHead,
html[dir="rtl"] .figma-live-v3 #s16 .effectHead{
  min-width:0!important;
  width:210px!important;
  max-width:210px!important;
  min-height:100%!important;
  height:auto!important;
  margin:0!important;
  padding:24px 17px!important;
  border-radius:52% 20px 20px 52%!important;
  align-self:stretch!important;
}
html[dir="rtl"] .figma-live-v3 #s16 .effectHead{
  border-radius:20px 52% 52% 20px!important;
}

.figma-live-v3 #s16 .effectHead .lang-en,
.figma-live-v3 #s16 .effectHead .lang-ar{
  font-size:15px!important;
  line-height:1.45!important;
  font-weight:900;
}
.figma-live-v3 #s16 .effectHead small{
  font-size:11px!important;
  line-height:1.5!important;
}

/* 5 Whys should read as a causal chain, not as oversized empty cards. */
.figma-live-v3 #s16 .whyChain{
  display:grid!important;
  gap:9px!important;
}
.figma-live-v3 #s16 .whyChain .whyStep{
  min-height:0!important;
  height:auto!important;
  padding:11px 13px!important;
  border-inline-start:4px solid #735093!important;
  background:linear-gradient(90deg,rgba(244,239,248,.55),#fff 22%)!important;
}
html[dir="rtl"] .figma-live-v3 #s16 .whyChain .whyStep{
  background:linear-gradient(270deg,rgba(244,239,248,.55),#fff 22%)!important;
}
.figma-live-v3 #s16 .whyChain .whyStep b{
  display:block!important;
  margin-bottom:4px!important;
  color:#0F6545!important;
}

.figma-live-v3 .qi-r24-shared-training-flow{
  margin:0 0 14px!important;
  border-inline-start:5px solid #735093!important;
  background:linear-gradient(110deg,#EEF6F2 0%,#F4EFF8 100%)!important;
  color:#1f332b!important;
  font-size:12px!important;
  line-height:1.7!important;
}

.figma-live-v3 #s16 .qi-r24-source-table{
  margin-top:14px!important;
}
.figma-live-v3 #s16 .qi-r24-source-table .dataTable th{
  background:#e7efe9!important;
}

/* Tablet: transform the dense Fishbone into a clear vertical cause map. */
@media(max-width:900px){
  .figma-live-v3 #s16 .causeBoard,
  .figma-live-v3 #s16 .qi-fishbone-visual{
    min-width:0!important;
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    gap:20px!important;
    padding:16px 14px 18px!important;
  }
  .figma-live-v3 #s16 .effectHead,
  html[dir="rtl"] .figma-live-v3 #s16 .effectHead{
    order:-1!important;
    width:min(100%,420px)!important;
    max-width:420px!important;
    min-height:128px!important;
    height:auto!important;
    align-self:center!important;
    padding:19px 22px!important;
    border-radius:52% 52% 24px 24px!important;
  }
  .figma-live-v3 #s16 .causeGrid{
    width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:none!important;
    gap:15px 16px!important;
    padding-top:14px!important;
  }
  .figma-live-v3 #s16 .causeGrid::before{
    left:50%!important;
    right:auto!important;
    top:0!important;
    bottom:0!important;
    width:4px!important;
    height:auto!important;
    transform:translateX(-50%)!important;
    background:linear-gradient(180deg,#0F6545,#6ca58a)!important;
  }
  .figma-live-v3 #s16 .causeCard{
    min-height:0!important;
    padding:13px 12px!important;
    z-index:2!important;
  }
  .figma-live-v3 #s16 .causeCard::before,
  .figma-live-v3 #s16 .causeCard::after{
    top:50%!important;
    bottom:auto!important;
    width:16px!important;
    height:3px!important;
    transform:none!important;
    background:#5d967b!important;
  }
  .figma-live-v3 #s16 .causeCard:nth-child(odd)::before{
    display:block!important;
    left:auto!important;
    right:-16px!important;
  }
  .figma-live-v3 #s16 .causeCard:nth-child(odd)::after{display:none!important}
  .figma-live-v3 #s16 .causeCard:nth-child(even)::after{
    display:block!important;
    left:-16px!important;
    right:auto!important;
  }
  .figma-live-v3 #s16 .causeCard:nth-child(even)::before{display:none!important}
}

/* Phone: one readable cause per row, with a simple causal spine. */
@media(max-width:520px){
  .figma-live-v3 #s16 .causeGrid{
    grid-template-columns:1fr!important;
    gap:11px!important;
    padding-inline-start:20px!important;
  }
  html[dir="rtl"] .figma-live-v3 #s16 .causeGrid{
    padding-inline-start:0!important;
    padding-inline-end:20px!important;
  }
  .figma-live-v3 #s16 .causeGrid::before{
    left:7px!important;
    transform:none!important;
  }
  html[dir="rtl"] .figma-live-v3 #s16 .causeGrid::before{
    left:auto!important;
    right:7px!important;
  }
  .figma-live-v3 #s16 .causeCard::before,
  .figma-live-v3 #s16 .causeCard::after{
    display:none!important;
  }
  .figma-live-v3 #s16 .causeCard{
    font-size:11px!important;
  }
  .figma-live-v3 #s16 .effectHead,
  html[dir="rtl"] .figma-live-v3 #s16 .effectHead{
    width:100%!important;
    max-width:100%!important;
    border-radius:28px!important;
    min-height:108px!important;
  }
  .figma-live-v3 .qi-r24-shared-training-flow{
    font-size:11px!important;
    line-height:1.65!important;
  }
}

@media print{
  #s16 .qi-fishbone-svg,
  .figma-live-v3 #s16 .qi-fishbone-svg{display:none!important}
  .figma-live-v3 #s16 .causeBoard{
    grid-template-columns:minmax(0,1fr) 175px!important;
    gap:16px!important;
    break-inside:avoid!important;
    page-break-inside:avoid!important;
  }
  .figma-live-v3 #s16 .causeGrid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(160px,auto))!important;
    gap:34px 9px!important;
  }
  .figma-live-v3 #s16 .causeCard{
    min-height:160px!important;
    padding:9px!important;
    box-shadow:none!important;
  }
  .figma-live-v3 #s16 .causeCard h3{font-size:9.5pt!important}
  .figma-live-v3 #s16 .causeCard p{font-size:8.5pt!important;line-height:1.38!important}
  .figma-live-v3 #s16 .effectHead,
  html[dir="rtl"] .figma-live-v3 #s16 .effectHead{
    width:175px!important;
    max-width:175px!important;
    min-height:100%!important;
    border-radius:52% 14px 14px 52%!important;
  }
  html[dir="rtl"] .figma-live-v3 #s16 .effectHead{border-radius:14px 52% 52% 14px!important}
  .figma-live-v3 #s16 .whyChain .whyStep{
    break-inside:avoid!important;
    page-break-inside:avoid!important;
    padding:7px 9px!important;
  }
  .figma-live-v3 .qi-r24-shared-training-flow{
    background:#fff!important;
    border:1.5px solid #735093!important;
    border-inline-start:5px solid #735093!important;
  }
}