/* R22 visual-QA corrections discovered from Chromium screenshots. */

/* Desktop Hero: constrain the long executive title to its text column and override
   the legacy hideReview rule that made heroMain span both grid columns. */
@media(min-width:701px){
  html.qi-r22-identity #app.hideReview #s01>.hero{
    display:grid!important;
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
    gap:18px!important;
    align-items:stretch!important;
  }
  html.qi-r22-identity #app.hideReview #s01>.hero>.heroMain,
  html.qi-r22-identity #s01>.qi-r22-hero-shell>.heroMain,
  html.qi-r22-identity .p6-hero .p4-hero-copy{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    width:auto!important;
    max-width:none!important;
    overflow:hidden!important;
  }
  html.qi-r22-identity #app.hideReview #s01>.hero>.qi-r22-hero-media,
  html.qi-r22-identity #s01>.qi-r22-hero-shell>.qi-r22-hero-media,
  html.qi-r22-identity .p6-hero .p6-hero-media{
    grid-column:2!important;
    grid-row:1!important;
    min-width:0!important;
    width:100%!important;
    position:relative!important;
  }
  html.qi-r22-identity #s01 .heroMain h2,
  html.qi-r22-identity #s01 .p4-hero-copy h2{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-inline:0!important;
    font-size:clamp(26px,2.15vw,36px)!important;
    line-height:1.28!important;
    overflow-wrap:break-word;
    word-break:normal;
    text-wrap:balance;
  }

  /* Desktop Ishikawa: create a real central-spine gap between upper/lower causes. */
  html.qi-r22-identity #s16 .causeBoard{
    position:relative!important;
    grid-template-columns:minmax(0,3fr) minmax(250px,1fr)!important;
    gap:20px!important;
    align-items:stretch!important;
  }
  html.qi-r22-identity #s16 .causeGrid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(138px,auto))!important;
    column-gap:14px!important;
    row-gap:72px!important;
    align-content:center!important;
    position:relative!important;
    z-index:2!important;
  }
  html.qi-r22-identity #s16 .causeCard{
    min-height:138px!important;
    align-self:stretch!important;
  }
  html.qi-r22-identity #s16 .causeCard:nth-child(1){--qi-order:0!important}
  html.qi-r22-identity #s16 .causeCard:nth-child(2){--qi-order:1!important}
  html.qi-r22-identity #s16 .causeCard:nth-child(3){--qi-order:2!important}
  html.qi-r22-identity #s16 .causeCard:nth-child(4){--qi-order:3!important}
  html.qi-r22-identity #s16 .causeCard:nth-child(5){--qi-order:4!important}
  html.qi-r22-identity #s16 .causeCard:nth-child(6){--qi-order:5!important}

  /* Never blank the cause cards. Motion is spatial only; the fish skeleton still draws in. */
  html.qi-r22-identity body.figma-live-v3.motion-ready #s16 .qi-fishbone-visual .causeCard{
    opacity:1!important;
    transform:none!important;
  }
  html.qi-r22-identity body.figma-live-v3.motion-ready #s16 .qi-fishbone-visual.qi-in-view .causeCard{
    animation:qi-r22-cause-enter .58s cubic-bezier(.2,.75,.25,1) both!important;
    animation-delay:calc(var(--qi-order,0)*90ms)!important;
  }
  html.qi-r22-identity #s16 .qi-fishbone-svg{
    display:block!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    z-index:1!important;
  }
  html.qi-r22-identity #s16 .effectHead{
    align-self:stretch!important;
    min-height:348px!important;
    border-radius:50% 22px 22px 50%!important;
  }
  html[dir=rtl].qi-r22-identity #s16 .effectHead{
    border-radius:22px 50% 50% 22px!important;
  }
}

@keyframes qi-r22-cause-enter{
  from{transform:translateY(7px) scale(.985)}
  to{transform:translateY(0) scale(1)}
}

/* Mobile Hero returns to one clean column. */
@media(max-width:700px){
  html.qi-r22-identity #app.hideReview #s01>.hero{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  html.qi-r22-identity #app.hideReview #s01>.hero>.heroMain,
  html.qi-r22-identity #app.hideReview #s01>.hero>.qi-r22-hero-media{
    grid-column:1!important;
    grid-row:auto!important;
    width:100%!important;
    min-width:0!important;
  }

  /* Mobile Ishikawa: use the source-backed six cause cards as a vertical cause map.
     Legacy mobile fish drawings are suppressed because they can leave an empty fixed-height canvas. */
  html.qi-r22-identity #s16 .p4-fishbone,
  html.qi-r22-identity #s16 .p4-fish-desktop,
  html.qi-r22-identity #s16 .p4-fish-mobile,
  html.qi-r22-identity #s16 .p6-fish-mobile{
    display:none!important;
  }
  html.qi-r22-identity #s16 .qi-fishbone-scroll{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    padding:0!important;
  }
  html.qi-r22-identity #s16 .causeBoard,
  html.qi-r22-identity #s16 .qi-fishbone-visual{
    display:flex!important;
    flex-direction:column!important;
    gap:14px!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  html.qi-r22-identity #s16 .qi-fishbone-svg{display:none!important}
  html.qi-r22-identity #s16 .causeGrid{
    order:1!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    position:relative!important;
    padding-inline-start:26px!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  html.qi-r22-identity #s16 .causeGrid::before{
    content:"";
    position:absolute;
    inset-block:15px;
    inset-inline-start:8px;
    width:3px;
    border-radius:999px;
    background:linear-gradient(180deg,var(--qi-r22-purple-soft),var(--qi-r22-green));
  }
  html.qi-r22-identity #s16 .causeCard{
    display:block!important;
    position:relative!important;
    width:100%!important;
    min-height:0!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    animation:none!important;
    border-inline-start:4px solid var(--qi-r22-green)!important;
  }
  html.qi-r22-identity #s16 .causeCard:nth-child(2n){border-inline-start-color:var(--qi-r22-purple)!important}
  html.qi-r22-identity #s16 .causeCard::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    top:24px!important;
    inset-inline-start:-22px!important;
    width:18px!important;
    height:3px!important;
    border-radius:999px!important;
    background:var(--qi-r22-green)!important;
  }
  html.qi-r22-identity #s16 .causeCard:nth-child(2n)::before{background:var(--qi-r22-purple)!important}
  html.qi-r22-identity #s16 .effectHead{
    order:2!important;
    display:flex!important;
    min-height:0!important;
    width:100%!important;
    padding:20px 16px!important;
    border-radius:22px!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    background:linear-gradient(135deg,var(--qi-r22-green-deep),var(--qi-r22-green))!important;
  }
}

@media print{
  html.qi-r22-identity #s01 .heroMain h2{font-size:22pt!important;line-height:1.2!important}
  html.qi-r22-identity #s16 .causeGrid{row-gap:10mm!important}
  html.qi-r22-identity #s16 .causeCard{min-height:28mm!important}
}