/* R19 — visual motion, counter pacing, image polish and mobile Ishikawa refinement */

/* Image presentation: preserve approved originals, improve framing only. */
.figma-live-v3 img,
.figma-live-v3 .sourcePage {
  image-rendering:auto;
  backface-visibility:hidden;
}
.figma-live-v3 .sourcePage,
.figma-live-v3 img.qi-project-image,
.figma-live-v3 .qi-evidence-image img {
  display:block;
  max-width:100%;
  height:auto;
  border:1px solid #bfd0c7;
  border-radius:16px;
  box-shadow:0 10px 26px rgba(14,72,51,.09);
  background:#fff;
}

/* Make motion visibly deliberate rather than nearly instantaneous. */
.figma-live-v3.motion-ready .qi-motion.qi-in-view {
  transition:opacity .72s ease,transform .92s cubic-bezier(.16,.78,.22,1) !important;
}

.figma-live-v3.motion-ready .qi-tools-hub.qi-in-view .qi-tool-card,
.figma-live-v3.motion-ready .qi-smart-lens.qi-in-view>div,
.figma-live-v3.motion-ready .qi-kpi-contract.qi-in-view>div,
.figma-live-v3.motion-ready .qi-raci-key.qi-in-view>div,
.figma-live-v3.motion-ready .qi-risk-tool.qi-in-view .qi-risk-cell,
.figma-live-v3.motion-ready .qi-animated-flow.qi-in-view .step,
.figma-live-v3.motion-ready .pathMap.qi-in-view .pathCard,
.figma-live-v3.motion-ready .driverMap.qi-in-view .driverCol,
.figma-live-v3.motion-ready .qi-fishbone-visual.qi-in-view .causeCard,
.figma-live-v3.motion-ready .qi-kaizen-sequence.qi-in-view .kaizenStep {
  animation-duration:.78s !important;
  animation-delay:calc(var(--qi-order,0)*115ms) !important;
}

.figma-live-v3.motion-ready .qi-stakeholder-network.qi-in-view>.grid3>.card {
  animation-duration:.9s !important;
  animation-delay:calc(var(--qi-order,0)*260ms) !important;
}

.figma-live-v3.motion-ready .qi-cycle-analysis.qi-in-view .qi-cycle-track>div {
  animation-duration:.75s !important;
  animation-delay:calc(var(--qi-order,0)*150ms) !important;
}

.figma-live-v3.motion-ready .qi-fishbone-visual.qi-in-view .qi-fish-line {
  animation-duration:1.65s !important;
}

/* Subtle live-card behavior after entrance. */
@media (hover:hover) and (pointer:fine) {
  .figma-live-v3 .card,
  .figma-live-v3 .pathCard,
  .figma-live-v3 .causeCard,
  .figma-live-v3 .wasteCard,
  .figma-live-v3 .pdsaCard,
  .figma-live-v3 .qi-trend-card {
    transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease;
  }
  .figma-live-v3 .card:hover,
  .figma-live-v3 .pathCard:hover,
  .figma-live-v3 .causeCard:hover,
  .figma-live-v3 .wasteCard:hover,
  .figma-live-v3 .pdsaCard:hover,
  .figma-live-v3 .qi-trend-card:hover {
    transform:translateY(-4px);
    border-color:#8fb6a3;
    box-shadow:0 16px 34px rgba(15,79,57,.11);
  }
}

/* Slow counters: source-backed values remain visible even before animation starts. */
.figma-live-v3 [data-qi-count] {
  opacity:1;
  font-variant-numeric:tabular-nums;
}
.figma-live-v3 .qi-r19-counter-live [data-qi-count] {
  opacity:1;
  transition:opacity .28s ease;
  font-variant-numeric:tabular-nums;
}
.figma-live-v3 .qi-r19-counter-live .qi-bar-pair>div {
  animation:qi-r19-bar-rise 2.6s cubic-bezier(.18,.74,.22,1) both;
  animation-delay:calc(var(--qi-counter-order,0)*180ms);
}
.figma-live-v3 .qi-r19-counter-live .qi-sector-track span {
  animation:qi-r19-sector-in 2.25s cubic-bezier(.18,.74,.22,1) both;
  animation-delay:calc(var(--qi-counter-order,0)*150ms);
}
/* Animate height rather than clipping the bar box. The number and year labels are
   positioned outside the bar, so clip-path would permanently cut them off. */
@keyframes qi-r19-bar-rise {
  0% {height:34px}
  100% {height:var(--h)}
}
@keyframes qi-r19-sector-in {
  0% {opacity:.28;filter:saturate(.7)}
  100% {opacity:1;filter:none}
}

/* Stakeholders: horizontal cards on mobile with automatic, touch-safe movement. */
@media (max-width:760px) {
  .figma-live-v3 .qi-stakeholder-network {
    padding:14px 10px 16px;
    overflow:hidden;
  }
  .figma-live-v3 .qi-network-hub {
    width:min(330px,94%);
    margin-bottom:20px;
  }
  .figma-live-v3 .qi-stakeholder-network>.grid3 {
    display:flex !important;
    grid-template-columns:none !important;
    gap:12px;
    overflow-x:auto;
    overflow-y:visible;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    padding:4px 7vw 12px;
    scrollbar-width:none;
  }
  .figma-live-v3 .qi-stakeholder-network>.grid3::-webkit-scrollbar {display:none}
  .figma-live-v3 .qi-stakeholder-network>.grid3::before {display:none}
  .figma-live-v3 .qi-stakeholder-network>.grid3>.card {
    flex:0 0 78vw;
    max-width:310px;
    min-height:190px;
    scroll-snap-align:center;
  }
  .figma-live-v3 .qi-stakeholder-network>.grid3>.card::before {display:none}

  /* Keep the workload values and year labels unmistakably visible on phones. */
  .figma-live-v3 .qi-bar-pair span {
    font-size:13px;
    line-height:1;
    padding:3px 6px;
    border-radius:999px;
    background:rgba(255,255,255,.96);
    box-shadow:0 3px 10px rgba(15,79,57,.10);
  }
  .figma-live-v3 .qi-bar-pair small {
    font-size:10px;
    font-weight:800;
    color:#4e5b61;
  }
}

/* Ishikawa: stronger desktop head, cleaner connectors, better card contrast. */
.figma-live-v3 .qi-fishbone-visual {
  border:1px solid #c8d8d0;
  border-radius:20px;
  background:linear-gradient(180deg,#fff 0%,#f7fbf9 100%);
  padding:20px 16px;
}
.figma-live-v3 .qi-fishbone-visual .causeCard {
  border-color:#b9cec3;
  border-top-color:#147650;
  box-shadow:0 8px 20px rgba(15,79,57,.07);
}
.figma-live-v3 .qi-fishbone-visual .effectHead {
  min-height:230px;
  display:grid;
  place-content:center;
  text-align:center;
  padding:28px 22px;
  border-radius:52% 18px 18px 52%;
  background:linear-gradient(145deg,#0a5039,#167a54);
  color:#fff;
  box-shadow:0 14px 30px rgba(8,81,56,.19);
}
html[dir="rtl"] .figma-live-v3 .qi-fishbone-visual .effectHead {
  border-radius:18px 52% 52% 18px;
}
.figma-live-v3 .qi-fishbone-visual .effectHead small {
  display:block;
  margin-top:8px;
  line-height:1.7;
}
.figma-live-v3 .qi-fishbone-svg .qi-fish-line {stroke:#247654}
.figma-live-v3 .qi-fishbone-svg .qi-fish-spine {stroke:#0f6545}

/* Mobile Ishikawa: fit the complete diagram in one screen width — no 900px crop. */
@media (max-width:760px) {
  .figma-live-v3 .qi-fishbone-scroll {
    overflow:visible !important;
    padding:0 !important;
  }
  .figma-live-v3 .qi-fishbone-scroll .causeBoard,
  .figma-live-v3 .qi-fishbone-visual {
    min-width:0 !important;
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
    padding:16px 12px 18px !important;
    overflow:hidden !important;
  }
  .figma-live-v3 .qi-fishbone-visual .effectHead,
  html[dir="rtl"] .figma-live-v3 .qi-fishbone-visual .effectHead {
    order:-1;
    width:min(100%,360px);
    min-height:126px !important;
    margin:0 auto 4px;
    padding:18px 20px !important;
    border-radius:52% 52% 22px 22px !important;
    position:relative;
    z-index:3;
  }
  .figma-live-v3 .qi-fishbone-visual .effectHead::after {
    content:"";
    position:absolute;
    left:50%;
    top:100%;
    width:5px;
    height:26px;
    border-radius:999px;
    background:#147650;
    transform:translateX(-50%);
  }
  .figma-live-v3 .qi-fishbone-scroll .causeGrid,
  .figma-live-v3 .qi-fishbone-visual .causeGrid {
    width:100%;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:14px 12px !important;
    position:relative;
    padding-top:10px;
  }
  .figma-live-v3 .qi-fishbone-visual .causeGrid::before {
    content:"";
    position:absolute;
    left:50%;
    top:0;
    bottom:8px;
    width:4px;
    border-radius:999px;
    background:linear-gradient(180deg,#147650,#6ca58a);
    transform:translateX(-50%);
    z-index:0;
  }
  .figma-live-v3 .qi-fishbone-scroll .causeCard,
  .figma-live-v3 .qi-fishbone-visual .causeCard {
    min-width:0 !important;
    min-height:0 !important;
    padding:12px 10px !important;
    position:relative;
    z-index:2;
    background:#fff !important;
  }
  .figma-live-v3 .qi-fishbone-visual .causeCard:nth-child(odd)::before,
  .figma-live-v3 .qi-fishbone-visual .causeCard:nth-child(even)::before {
    content:"";
    position:absolute;
    top:50%;
    width:14px;
    height:3px;
    border-radius:999px;
    background:#5d967b;
  }
  .figma-live-v3 .qi-fishbone-visual .causeCard:nth-child(odd)::before {right:-14px}
  .figma-live-v3 .qi-fishbone-visual .causeCard:nth-child(even)::before {left:-14px}
  .figma-live-v3 .qi-fishbone-visual .causeCard::after {display:none !important}
  .figma-live-v3 .qi-fishbone-svg {display:none !important}
  .figma-live-v3 .qi-fishbone-visual .causeCard h3 {font-size:12.5px}
  .figma-live-v3 .qi-fishbone-visual .causeCard p {font-size:10.8px;line-height:1.72}
}

@media (max-width:420px) {
  .figma-live-v3 .qi-fishbone-scroll .causeGrid,
  .figma-live-v3 .qi-fishbone-visual .causeGrid {
    gap:12px 9px !important;
  }
  .figma-live-v3 .qi-fishbone-visual .causeCard {
    padding:11px 9px !important;
  }
  .figma-live-v3 .qi-fishbone-visual .causeCard h3 {font-size:11.8px}
  .figma-live-v3 .qi-fishbone-visual .causeCard p {font-size:10.2px}
}

@media (prefers-reduced-motion:reduce) {
  .figma-live-v3 [data-qi-count] {opacity:1 !important}
  .figma-live-v3 .qi-r19-counter-live .qi-bar-pair>div,
  .figma-live-v3 .qi-r19-counter-live .qi-sector-track span {animation:none !important}
}

@media print {
  .figma-live-v3 [data-qi-count] {opacity:1 !important}
  .figma-live-v3 .qi-r19-counter-live .qi-bar-pair>div,
  .figma-live-v3 .qi-r19-counter-live .qi-sector-track span {animation:none !important}
  .figma-live-v3 .qi-stakeholder-network>.grid3 {overflow:visible !important}
  .figma-live-v3 .qi-fishbone-visual {background:#fff !important;border-color:#789989 !important}
  .figma-live-v3 .qi-fishbone-visual .causeCard {box-shadow:none !important}
  .figma-live-v3 .qi-fishbone-visual .effectHead {background:#0b553d !important;color:#fff !important;box-shadow:none !important}
}