/* R22 — approved institutional visual identity recovery
   Presentation-level green/purple atmosphere, neutral cards, restored hospital Hero,
   protected Risk/RACI semantics, fishbone/mobile/print refinement. */
:root{
  --qi-r22-canvas:#F6F7F6;
  --qi-r22-green:#0F6545;
  --qi-r22-green-deep:#063B2C;
  --qi-r22-purple:#735093;
  --qi-r22-purple-soft:#AD84C6;
  --qi-r22-green-surface:#EEF6F2;
  --qi-r22-purple-surface:#F4EFF8;
  --qi-r22-card:#FFFFFF;
  --qi-r22-ink:#1D252B;
  --qi-r22-muted:#596771;
  --qi-r22-border:#D7E2DC;
  --qi-r22-shadow:0 12px 34px rgba(28,53,44,.075);
}

html.qi-r22-identity body{
  color:var(--qi-r22-ink);
  background:
    radial-gradient(circle at 7% 7%,rgba(15,101,69,.065),transparent 27rem),
    radial-gradient(circle at 94% 18%,rgba(115,80,147,.065),transparent 25rem),
    var(--qi-r22-canvas);
}
html.qi-r22-identity .main{background:transparent}
html.qi-r22-identity .content{position:relative}

/* Identity belongs to the presentation shell, not blanket card fills. */
html.qi-r22-identity .section{
  position:relative;
  isolation:isolate;
  padding:2px 0;
}
html.qi-r22-identity .section::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-8px -10px;
  border-radius:24px;
  pointer-events:none;
  opacity:.82;
}
html.qi-r22-identity .section.qi-r22-tone-green::before{
  background:linear-gradient(135deg,rgba(238,246,242,.68),rgba(246,247,246,0) 48%);
}
html.qi-r22-identity .section.qi-r22-tone-purple::before{
  background:linear-gradient(225deg,rgba(244,239,248,.72),rgba(246,247,246,0) 48%);
}
html.qi-r22-identity .section.qi-r22-risk-freeze::before,
html.qi-r22-identity .section.qi-r22-raci-freeze::before{display:none}

html.qi-r22-identity .sectionHead{
  position:relative;
  border-bottom:1px solid #DCE4E0!important;
  padding:4px 0 11px!important;
}
html.qi-r22-identity .section:not(.qi-r22-risk-freeze):not(.qi-r22-raci-freeze) .sectionHead::after{
  content:"";
  position:absolute;
  inset-inline-start:0;
  bottom:-2px;
  width:min(240px,42%);
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--qi-r22-green),var(--qi-r22-purple));
}
html[dir=rtl].qi-r22-identity .section:not(.qi-r22-risk-freeze):not(.qi-r22-raci-freeze) .sectionHead::after{
  background:linear-gradient(270deg,var(--qi-r22-green),var(--qi-r22-purple));
}
html.qi-r22-identity .sectionHead h2{color:var(--qi-r22-green-deep)}
html.qi-r22-identity .section:not(.qi-r22-risk-freeze):not(.qi-r22-raci-freeze).qi-r22-tone-purple .sectionNo{
  color:var(--qi-r22-purple);
  background:var(--qi-r22-purple-surface);
  border:1px solid rgba(115,80,147,.16);
}
html.qi-r22-identity .section:not(.qi-r22-risk-freeze):not(.qi-r22-raci-freeze).qi-r22-tone-green .sectionNo{
  color:var(--qi-r22-green);
  background:var(--qi-r22-green-surface);
  border:1px solid rgba(15,101,69,.14);
}

/* Neutral surfaces — identity appears through accents and atmosphere. */
html.qi-r22-identity .section>.card,
html.qi-r22-identity .section .grid2>.card,
html.qi-r22-identity .section .grid3>.card,
html.qi-r22-identity .section .grid4>.card,
html.qi-r22-identity .pathCard,
html.qi-r22-identity .causeCard,
html.qi-r22-identity .wasteCard,
html.qi-r22-identity .pdsaCard,
html.qi-r22-identity .qi-trend-card{
  background:var(--qi-r22-card);
  border-color:var(--qi-r22-border);
  box-shadow:var(--qi-r22-shadow);
}
html.qi-r22-identity .section:not(.qi-r22-risk-freeze):not(.qi-r22-raci-freeze).qi-r22-tone-purple .card h3{
  text-decoration-color:rgba(115,80,147,.28);
}
html.qi-r22-identity .card h3{color:var(--qi-r22-green-deep)}

/* HERO — approved hospital photo restored as a first-class visual anchor. */
html.qi-r22-identity #s01>.hero,
html.qi-r22-identity #s01>.qi-r22-hero-shell,
html.qi-r22-identity .p6-hero{
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  gap:24px!important;
  align-items:stretch!important;
  overflow:visible!important;
}
html.qi-r22-identity #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;
  grid-row:1;
  align-self:stretch!important;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:420px;
  padding:clamp(24px,3.2vw,46px)!important;
  border-radius:28px!important;
  color:#fff;
  background:
    radial-gradient(circle at 88% 13%,rgba(173,132,198,.24),transparent 15rem),
    linear-gradient(145deg,var(--qi-r22-green-deep),var(--qi-r22-green) 72%);
  box-shadow:0 22px 52px rgba(6,59,44,.17);
  border:1px solid rgba(255,255,255,.13);
}
html[dir=rtl].qi-r22-identity #s01>.hero>.heroMain,
html[dir=rtl].qi-r22-identity #s01>.qi-r22-hero-shell>.heroMain{text-align:right}
html.qi-r22-identity #s01 .heroMain h2{color:#fff;line-height:1.22}
html.qi-r22-identity #s01 .heroMain p{color:rgba(255,255,255,.91)}
html.qi-r22-identity #s01 .heroMain .journey div{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.19);
}
html.qi-r22-identity #s01 .heroMain::after{
  content:"";
  display:block;
  width:82px;
  height:4px;
  margin-top:20px;
  border-radius:999px;
  background:linear-gradient(90deg,#C8E5D8,var(--qi-r22-purple-soft));
}

html.qi-r22-identity #s01 .p6-hero-media,
html.qi-r22-identity #s01 .qi-r22-hero-media,
html.qi-r22-identity .p6-hero .p6-hero-media{
  grid-column:2;
  grid-row:1;
  position:relative;
  margin:0;
  overflow:hidden;
  min-height:420px!important;
  height:100%!important;
  border-radius:28px;
  background:var(--qi-r22-green-surface);
  border:1px solid rgba(15,101,69,.13);
  box-shadow:0 22px 52px rgba(28,53,44,.13);
}
html.qi-r22-identity #s01 .p6-hero-media::before,
html.qi-r22-identity #s01 .qi-r22-hero-media::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0 auto 0 0;
  width:5px;
  background:linear-gradient(180deg,var(--qi-r22-purple-soft),var(--qi-r22-green));
  pointer-events:none;
}
html[dir=rtl].qi-r22-identity #s01 .p6-hero-media::before,
html[dir=rtl].qi-r22-identity #s01 .qi-r22-hero-media::before{left:auto;right:0}
html.qi-r22-identity #s01 .p6-hero-media::after,
html.qi-r22-identity #s01 .qi-r22-hero-media::after,
html.qi-r22-identity .p6-hero-media::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(3,39,28,.70));
}
html.qi-r22-identity #s01 .p6-hero-media img,
html.qi-r22-identity #s01 .qi-r22-hero-media img,
html.qi-r22-identity .p6-hero-media img{
  position:absolute;
  inset:0;
  display:block;
  width:100%!important;
  height:100%!important;
  min-height:420px!important;
  object-fit:cover!important;
  object-position:center 58%!important;
  opacity:1!important;
}
html.qi-r22-identity #s01>.hero>.card.reviewOnly,
html.qi-r22-identity #s01>.qi-r22-hero-shell>.card.reviewOnly{
  grid-column:1/-1;
  grid-row:2;
  background:#fff;
}
html.qi-r22-identity #app.hideReview #s01>.hero,
html.qi-r22-identity #app.hideReview #s01>.qi-r22-hero-shell{
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr)!important;
}

/* Risk and RACI are semantic palettes: R22 explicitly isolates them from identity recoloring. */
html.qi-r22-identity .qi-r22-risk-freeze,
html.qi-r22-identity .qi-r22-raci-freeze{isolation:isolate}
html.qi-r22-identity .qi-r22-risk-freeze::before,
html.qi-r22-identity .qi-r22-raci-freeze::before{display:none!important}
/* Existing institutional risk colors intentionally retained exactly. */
html.qi-r22-identity .qi-r22-risk-freeze .riskGrid .rg{background:#70b34d}
html.qi-r22-identity .qi-r22-risk-freeze .riskGrid .ry{background:#f5db4b}
html.qi-r22-identity .qi-r22-risk-freeze .riskGrid .ro{background:#ef8c1b}
html.qi-r22-identity .qi-r22-risk-freeze .riskGrid .rr{background:#e42b22;color:#fff}

/* Fishbone: one strong diagram, readable effect head, no clipping. */
html.qi-r22-identity .master-fishbone-card,
html.qi-r22-identity .fishbone,
html.qi-r22-identity .causeBoard{overflow:visible!important}
html.qi-r22-identity .master-fishbone-card .p4-fishbone{overflow:visible!important}
html.qi-r22-identity .master-fishbone-card .p4-fish-svg,
html.qi-r22-identity .fishbone svg{width:100%!important;max-width:100%;height:auto;overflow:visible}
html.qi-r22-identity .master-fishbone-card .p4-fish-svg .spine,
html.qi-r22-identity .master-fishbone-card .p4-fish-svg .bone,
html.qi-r22-identity .fish-line,
html.qi-r22-identity .fish-spine{
  stroke:var(--qi-r22-green)!important;
  opacity:1!important;
  stroke-linecap:round;
}
html.qi-r22-identity .causeBoard{
  grid-template-columns:minmax(0,3fr) minmax(230px,1fr)!important;
  gap:18px!important;
  align-items:stretch;
}
html.qi-r22-identity .effectHead{
  min-height:190px;
  padding:26px 24px;
  border-radius:50% 18px 18px 50%;
  background:linear-gradient(145deg,var(--qi-r22-green-deep),var(--qi-r22-green));
  color:#fff;
  box-shadow:0 16px 34px rgba(6,59,44,.15);
  font-size:15px;
  line-height:1.65;
}
html[dir=rtl].qi-r22-identity .effectHead{border-radius:18px 50% 50% 18px}
html.qi-r22-identity .causeCard{
  position:relative;
  border-inline-start:4px solid var(--qi-r22-green)!important;
}
html.qi-r22-identity .causeCard:nth-child(2n){border-inline-start-color:var(--qi-r22-purple)!important}
html.qi-r22-identity .causeCard:nth-child(3n){border-inline-start-color:var(--qi-r22-purple-soft)!important}
html.qi-r22-identity .p8-rounded-fish-head,
html.qi-r22-identity .fish-head{fill:var(--qi-r22-green)!important}

/* Tables: strong office-print/screen contrast, excluding frozen semantic RACI/Risk sections. */
html.qi-r22-identity .section:not(.qi-r22-risk-freeze):not(.qi-r22-raci-freeze) .dataTable{
  border:1px solid #C7D2CC;
}
html.qi-r22-identity .section:not(.qi-r22-risk-freeze):not(.qi-r22-raci-freeze) .dataTable th{
  color:var(--qi-r22-green-deep);
  background:linear-gradient(180deg,#EAF2EE,#E2ECE7);
  border-color:#C7D2CC;
}
html.qi-r22-identity .section:not(.qi-r22-risk-freeze):not(.qi-r22-raci-freeze) .dataTable td{border-color:#D3DDD8}

@media(max-width:1050px){
  html.qi-r22-identity #s01>.hero,
  html.qi-r22-identity #s01>.qi-r22-hero-shell,
  html.qi-r22-identity .p6-hero{
    grid-template-columns:minmax(0,1fr) minmax(320px,.88fr)!important;
    gap:16px!important;
  }
  html.qi-r22-identity .causeBoard{grid-template-columns:1fr!important}
  html.qi-r22-identity .effectHead{min-height:120px;border-radius:22px!important}
}

@media(max-width:700px){
  html.qi-r22-identity body{
    background:
      radial-gradient(circle at 0 2%,rgba(15,101,69,.055),transparent 18rem),
      radial-gradient(circle at 100% 12%,rgba(115,80,147,.05),transparent 17rem),
      var(--qi-r22-canvas);
  }
  html.qi-r22-identity .section::before{inset:-5px -3px;border-radius:18px}
  html.qi-r22-identity #s01>.hero,
  html.qi-r22-identity #s01>.qi-r22-hero-shell,
  html.qi-r22-identity #app.hideReview #s01>.hero,
  html.qi-r22-identity #app.hideReview #s01>.qi-r22-hero-shell,
  html.qi-r22-identity .p6-hero{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
  }
  html.qi-r22-identity #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-height:0!important;
    padding:22px 18px!important;
    border-radius:20px!important;
  }
  html.qi-r22-identity #s01 .p6-hero-media,
  html.qi-r22-identity #s01 .qi-r22-hero-media,
  html.qi-r22-identity .p6-hero .p6-hero-media{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    max-width:100%!important;
    height:235px!important;
    min-height:235px!important;
    max-height:235px!important;
    border-radius:20px;
  }
  html.qi-r22-identity #s01 .p6-hero-media img,
  html.qi-r22-identity #s01 .qi-r22-hero-media img,
  html.qi-r22-identity .p6-hero-media img{
    height:235px!important;
    min-height:235px!important;
    max-height:235px!important;
    object-position:center 58%!important;
  }
  html.qi-r22-identity #s01>.hero>.card.reviewOnly,
  html.qi-r22-identity #s01>.qi-r22-hero-shell>.card.reviewOnly{grid-column:1!important;grid-row:3!important}
  html.qi-r22-identity .master-fishbone-card .p4-fish-desktop{display:none!important}
  html.qi-r22-identity .master-fishbone-card .p4-fish-mobile,
  html.qi-r22-identity .master-fishbone-card .p6-fish-mobile{display:block!important}
  html.qi-r22-identity .causeBoard{display:flex!important;flex-direction:column;gap:10px!important}
  html.qi-r22-identity .effectHead{order:-1;min-height:0;border-radius:22px!important;padding:20px 16px;font-size:14px}
  html.qi-r22-identity .causeGrid{grid-template-columns:1fr!important}
  html.qi-r22-identity .tableWrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media print{
  html.qi-r22-identity body{background:#fff!important;color:#111!important}
  html.qi-r22-identity .section::before{display:none!important}
  html.qi-r22-identity .sectionHead{border-bottom:2px solid #53615A!important}
  html.qi-r22-identity .section:not(.qi-r22-risk-freeze):not(.qi-r22-raci-freeze) .sectionHead::after{
    width:120px;height:3px;background:#315B4A!important;
  }
  html.qi-r22-identity #s01>.hero,
  html.qi-r22-identity #s01>.qi-r22-hero-shell,
  html.qi-r22-identity .p6-hero{
    grid-template-columns:1.08fr .92fr!important;
    gap:10mm!important;
    break-inside:avoid;
  }
  html.qi-r22-identity #s01>.hero>.heroMain,
  html.qi-r22-identity #s01>.qi-r22-hero-shell>.heroMain{
    min-height:82mm!important;
    background:#0F6545!important;
    box-shadow:none!important;
    border:1px solid #0A4F39!important;
  }
  html.qi-r22-identity #s01 .p6-hero-media,
  html.qi-r22-identity #s01 .qi-r22-hero-media{
    min-height:82mm!important;
    height:82mm!important;
    box-shadow:none!important;
    break-inside:avoid;
  }
  html.qi-r22-identity #s01 .p6-hero-media img,
  html.qi-r22-identity #s01 .qi-r22-hero-media img{
    min-height:82mm!important;
    height:82mm!important;
    object-position:center 58%!important;
  }
  html.qi-r22-identity .card,
  html.qi-r22-identity .causeCard,
  html.qi-r22-identity .pathCard,
  html.qi-r22-identity .pdsaCard{box-shadow:none!important;border-color:#9EAAA4!important}
  html.qi-r22-identity .master-fishbone-card,
  html.qi-r22-identity .master-fishbone-card .p4-fishbone,
  html.qi-r22-identity .fishbone,
  html.qi-r22-identity .causeBoard,
  html.qi-r22-identity .effectHead{break-inside:avoid!important}
  html.qi-r22-identity .master-fishbone-card .p4-fish-desktop{display:block!important}
  html.qi-r22-identity .master-fishbone-card .p4-fish-mobile,
  html.qi-r22-identity .master-fishbone-card .p6-fish-mobile{display:none!important}
  html.qi-r22-identity .effectHead{min-height:38mm;background:#0F6545!important;box-shadow:none!important}
  html.qi-r22-identity .dataTable thead{display:table-header-group}
  html.qi-r22-identity .dataTable tr{break-inside:avoid}
  html.qi-r22-identity .section:not(.qi-r22-risk-freeze):not(.qi-r22-raci-freeze) .dataTable th{
    background:#E4ECE8!important;color:#15392D!important;border:1px solid #87958E!important;
  }
  html.qi-r22-identity .section:not(.qi-r22-risk-freeze):not(.qi-r22-raci-freeze) .dataTable td{border:1px solid #AAB4AF!important}
  html.qi-r22-identity .qi-r22-risk-freeze,
  html.qi-r22-identity .qi-r22-raci-freeze{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}

@media(prefers-reduced-motion:reduce){
  html.qi-r22-identity *,html.qi-r22-identity *::before,html.qi-r22-identity *::after{
    scroll-behavior:auto!important;
  }
}