/* ============================================================================
   The QI toolkit around a QIP (v10-qi-tools.js): SPC charts, stakeholders,
   fishbone, the portfolio card and the printable documents.
   ========================================================================== */

/* ------------------------------------------------------------------ SPC */
.qip-chart .target-lab.spc-tl{text-anchor:start}
.qip-chart .spc-line{fill:none;stroke:#B4BCCB;stroke-width:1.8;stroke-linejoin:round}
.qip-chart .spc-mean{stroke:#4A5568;stroke-width:1.5}
.qip-chart .spc-lim{stroke:#8C96A8;stroke-width:1.3;stroke-dasharray:5 4}
.qip-chart .spc-mean-lab{fill:#3A4556;font-weight:700}
.qip-chart .spc-lim-lab{fill:#6B778C;font-weight:600}
.qip-chart .spc-rebase{stroke:#3A4556;stroke-width:1.2;stroke-dasharray:1 3}
.qip-chart .spc-rebase-lab{fill:#3A4556;font-weight:700;font-size:9.5px}
.qip-chart .spc-pt{stroke:#fff;stroke-width:1.4}
.qip-chart .spc-pt.none{fill:#8C96A8}
.qip-chart .spc-pt.good{fill:#1C6FC4}
.qip-chart .spc-pt.bad{fill:#E07B00}
html[data-tone=dark] .qip-chart .spc-mean{stroke:#C9D2E0}
html[data-tone=dark] .qip-chart .spc-mean-lab,html[data-tone=dark] .qip-chart .spc-rebase-lab{fill:#DDE4EE}
html[data-tone=dark] .qip-chart .spc-lim-lab{fill:#AEB8C8}
html[data-tone=dark] .qip-chart .spc-pt{stroke:var(--surface,#1b2230)}

.qip-signal.spc-sum{font-size:12.5px}
.qip-signal.spc-sum.v-improve b,.qip-signal.spc-good{color:#1C6FC4}
.qip-signal.spc-sum.v-concern b,.qip-signal.spc-bad{color:#B86400}
.qip-signal.spc-sum.v-common b{color:var(--text,#172A3F)}
.qip-signal.spc-ass{color:var(--text,#172A3F)}
.qip-signal.spc-ass.a-pass b{color:#1C6FC4}
.qip-signal.spc-ass.a-fail b{color:#B86400}

.spc-icons{display:inline-flex;gap:6px;align-items:center;margin-right:4px}
.spc-ic{display:inline-grid;justify-items:center;gap:1px}
.spc-ic small{font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#8494AD)}
.spc-ico{width:30px;height:30px;display:block}
.qip-zoom-box .spc-ico{width:40px;height:40px}

.spc-switch{display:inline-flex;padding:2px;border-radius:9px;background:var(--line2,#eef2f8);margin-right:2px}
.spc-switch button{font:inherit;font-size:11.5px;font-weight:700;padding:4px 9px;border:0;border-radius:7px;background:none;color:var(--muted,#6B7A90);cursor:pointer}
.spc-switch button[aria-pressed=true]{background:var(--surface,#fff);color:var(--qv,#6d4fd8);box-shadow:0 1px 3px rgba(28,45,95,.16)}
.qip-measure-actions{align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* the full view: a "save image" pill beside the close button */
.qip-zoom-head .qip-zoom-png{width:auto;height:36px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:650;white-space:nowrap}
.qip-zoom-head .qip-zoom-png + .qip-zoom-x{margin-left:0}
.qip-zoom-head .qip-zoom-png:hover{background:color-mix(in srgb,var(--qv,#6d4fd8) 14%,var(--line2,#eef2f8))}

/* a checkbox with a title and a line of explanation, in the QIP forms */
.qip-check{display:grid!important;grid-template-columns:auto 1fr;gap:10px!important;align-items:start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;font-weight:400!important}
.qip-check input{width:auto!important;margin:3px 0 0;accent-color:#6d4fd8}
.qip-check b{display:block;font-size:13.5px}
.qip-check small{display:block;font-size:12px;color:var(--muted)}
.qip-check:has(input:checked){border-color:#6d4fd8;background:color-mix(in srgb,#6d4fd8 6%,transparent)}

/* an off-screen, light copy of a chart, drawn to make its picture */
.qx-offscreen{position:fixed!important;left:-10000px;top:0;width:900px;--surface:#fff;--text:#172A3F;--muted:#66748F;--line2:#eef2f8;--qa:#1E7FD0;--qv:#6d4fd8}

/* --------------------------------------------------------- stakeholders */
.qx-grid-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:6px 8px}
.qx-axis-y{grid-row:1;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.qx-axis-x{grid-column:2;text-align:center;font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.qx-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qx-quad{border-radius:14px;padding:10px 12px 12px;border:1px solid var(--line);min-height:92px;background:var(--surface,#fff)}
.qx-quad.q-high-high{background:color-mix(in srgb,#6d4fd8 7%,var(--surface,#fff));border-color:color-mix(in srgb,#6d4fd8 26%,var(--line))}
.qx-quad.q-high-low{background:color-mix(in srgb,#1C6FC4 5%,var(--surface,#fff))}
.qx-quad.q-low-high{background:color-mix(in srgb,#2FA96B 5%,var(--surface,#fff))}
.qx-quad-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.qx-quad-h b{font-size:13.5px}
.qx-quad-h small{font-size:11.5px;color:var(--muted)}
.qx-chips{display:flex;flex-wrap:wrap;gap:6px}
.qx-none{font-size:12px;color:var(--muted);opacity:.7}
.qx-chip{display:grid;gap:1px;text-align:left;font:inherit;max-width:260px;padding:7px 10px;border-radius:11px;border:1px solid var(--line);background:var(--surface,#fff);color:var(--text);cursor:pointer;transition:border-color .2s,transform .2s}
.qx-chip:hover:not([disabled]){border-color:var(--qv,#6d4fd8);transform:translateY(-1px)}
.qx-chip[disabled]{cursor:default}
.qx-chip b{font-size:12.5px;line-height:1.3}
.qx-chip small{font-size:11px;color:var(--muted)}
.qx-chip em{font-style:normal;font-size:11px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
.qx-stance{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:750;letter-spacing:.03em;margin-top:2px;color:var(--st)}
.qx-stance i{width:8px;height:8px;border-radius:50%;background:var(--st)}
.qx-chip.st-champion{--st:#1F7A4C}.qx-chip.st-supporter{--st:#2E9A62}.qx-chip.st-neutral{--st:#7A869C}
.qx-chip.st-unsure{--st:#B7790C}.qx-chip.st-resistant{--st:#C0392B}
.qx-chip.st-resistant{border-color:color-mix(in srgb,#C0392B 35%,var(--line))}
.qx-seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--line2,#eef2f8);gap:2px}
.qx-seg label{display:block!important;margin:0!important;cursor:pointer}
.qx-seg input{position:absolute;opacity:0;pointer-events:none}
.qx-seg span{display:block;padding:6px 16px;border-radius:8px;font-size:13px;font-weight:650;color:var(--muted)}
.qx-seg input:checked+span{background:var(--surface,#fff);color:var(--text);box-shadow:0 1px 3px rgba(28,45,95,.16)}
.qx-seg input:focus-visible+span{outline:2px solid var(--qv,#6d4fd8)}
.qx-lands{margin:-4px 0 0;padding:8px 12px;border-radius:10px;background:var(--line2,#eef2f8);font-size:13px;color:var(--muted)}
.qx-lands b{color:var(--text)}
@media(max-width:560px){.qx-grid{grid-template-columns:1fr}.qx-axis-y,.qx-axis-x{display:none}.qx-grid-wrap{display:block}}

/* ------------------------------------------------------------- fishbone
   The board (rows of causes) in the app; the classic drawing on a shared
   link, in print and in the documents; Pareto of the team's votes. */
.qx-head-acts{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.qx-fb-problem{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;margin-bottom:12px;
  background:color-mix(in srgb,#6d4fd8 8%,var(--surface,#fff));border:1px solid color-mix(in srgb,#6d4fd8 22%,var(--line))}
.qx-fb-problem span{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--qv,#6d4fd8)}
.qx-fb-problem b{font-size:14.5px}
.qx-fb-problem em{margin-left:auto;font-style:normal;font-size:12px;color:var(--muted)}
.qx-board{display:grid}
.qx-bd-row{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--line2,#eef2f8)}
.qx-bd-row:first-child{border-top:0}
.qx-bd-h{display:flex;align-items:baseline;gap:6px;padding-top:4px}
.qx-bd-h button,.qx-bd-h b{all:unset;font-size:13.5px;font-weight:700;color:var(--text);cursor:pointer}
.qx-bd-h b{cursor:default}
.qx-bd-h button:hover{color:var(--qv,#6d4fd8)}
.qx-bd-h span{font-size:12px;color:var(--muted)}
.qx-bd-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.qx-bd-chip{display:inline-flex;align-items:stretch;border-radius:10px;border:1px solid var(--line);background:var(--surface,#fff);overflow:hidden}
.qx-bd-t{font:inherit;font-size:13px;line-height:1.35;padding:6px 10px;border:0;background:none;color:var(--text);cursor:pointer;text-align:left}
.qx-bd-t[disabled]{cursor:default}
.qx-bd-t i{font-style:normal;color:var(--qv,#6d4fd8);margin-right:4px}
.qx-bd-t em{font-style:normal;font-size:11.5px;color:var(--qv,#6d4fd8);margin-left:6px;font-weight:650}
.qx-bd-t em.d{color:#0F6E56}
.qx-bd-chip:hover{border-color:var(--qv,#6d4fd8)}
.qx-bd-chip.top{border:1.5px solid var(--qv,#6d4fd8);background:color-mix(in srgb,#6d4fd8 8%,var(--surface,#fff))}
.qx-bd-chip.top .qx-bd-t{font-weight:650}
.qx-bd-chip.drv{border-color:color-mix(in srgb,#1D9E75 55%,var(--line));background:color-mix(in srgb,#1D9E75 7%,var(--surface,#fff))}
.qx-bd-chip.top.drv{border-color:var(--qv,#6d4fd8)}
.qx-bd-v{font:inherit;font-size:14px;font-weight:800;width:30px;border:0;background:var(--line2,#eef2f8);color:var(--qv,#6d4fd8);cursor:pointer}
.qx-bd-v:hover:not([disabled]){background:color-mix(in srgb,#6d4fd8 16%,transparent)}
.qx-bd-v[disabled]{opacity:.35;cursor:default}
.qx-fb-top{margin:12px 0 0;font-size:13px;color:var(--text)}
.qx-fb-top span{color:var(--qv,#6d4fd8);font-size:12px}
.qx-fb-wide{overflow-x:auto;border-radius:12px;border:1px solid var(--line2,#eef2f8);background:#fff}
/* On a phone the drawing scrolls inside its box; the card and the page keep the screen's width (7 Oct). */
.qx-fish{min-width:0;max-width:100%}.qx-fish .qx-fb-wide{max-width:100%}
.qx-fb-swipe{display:none;margin:0 0 6px;font-size:12px;font-weight:700;color:var(--muted,#64748b)}
@media (max-width:760px){.qx-fb-swipe{display:block}}@media print{.qx-fb-swipe{display:none!important}}
.qx-fb-wide .qx-fbsvg{display:block;width:100%;height:auto;min-width:760px}
.qx-rib{cursor:pointer}
.qx-rib:hover text{fill:#6d4fd8}
.qx-fb-narrow{display:none}
.qx-par{display:grid;gap:4px}
.qx-par-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 34px 44px;gap:10px;align-items:center;padding:6px 10px;border-radius:10px}
.qx-par-row.vital{background:color-mix(in srgb,#6d4fd8 7%,transparent)}
.qx-par-l b{display:block;font-size:13px;font-weight:600}
.qx-par-l small{font-size:11.5px;color:var(--muted)}
.qx-par-bar{height:12px;border-radius:6px;background:var(--line2,#eef2f8);overflow:hidden}
.qx-par-bar i{display:block;height:100%;border-radius:6px;background:#A3ACBD}
.qx-par-row.vital .qx-par-bar i{background:#6d4fd8}
.qx-par-n{font-size:13px;font-weight:700;text-align:right}
.qx-par-c{font-size:12px;color:var(--muted);text-align:right}
.qx-proot{margin:0;padding-left:18px}
.qx-proot span{color:#6d4fd8;font-size:11px}
/* read only: the drawing on a wide screen and in print, the board on a phone */
@media screen and (max-width:760px){
  .qip-sheet .qx-fb-wide{display:none}
  .qip-sheet .qx-fb-narrow{display:block}
  .qx-bd-row{grid-template-columns:1fr;gap:6px}
  .qx-par-row{grid-template-columns:minmax(0,1fr) 60px 30px 40px}
}
@media print{.qx-fb-wide{overflow:visible;border:0}.qx-fb-wide .qx-fbsvg{min-width:0}.qx-fb-narrow{display:none!important}}

/* ------------------------------------------------ portfolio & write-up */
.qx-port-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:900px){.qx-port-grid{grid-template-columns:1fr}}
.qx-qipat-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.qx-qipat-head b{display:block;font-size:15px}
.qx-qipat-head small{display:block;font-size:12px;color:var(--muted);margin-top:2px;max-width:48ch}
.qx-score{flex:none;font-size:12px;font-weight:700;color:var(--muted);padding:6px 12px;border-radius:999px;background:var(--line2,#eef2f8)}
.qx-score b{display:inline;font-size:18px;color:var(--qv,#6d4fd8);margin-right:1px}
.qx-score.full{background:color-mix(in srgb,#2FA96B 14%,transparent)}
.qx-score.full b{color:#1f7a4c}
.qx-areas{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.qx-areas>li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line)}
.qx-areas>li>i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13px;background:var(--line2,#eef2f8);color:var(--muted)}
.qx-areas>li.st-ok{border-color:color-mix(in srgb,#2FA96B 32%,var(--line))}
.qx-areas>li.st-ok>i{background:#2FA96B;color:#fff}
.qx-areas>li.st-part>i{background:color-mix(in srgb,#6d4fd8 16%,transparent);color:var(--qv,#6d4fd8)}
.qx-areas b{display:block;font-size:13.5px}
.qx-areas small{display:block;font-size:11.5px;color:var(--muted);margin:1px 0 5px}
.qx-areas ul{margin:0;padding:0;list-style:none;display:grid;gap:2px;font-size:12.5px}
.qx-areas li.ok{color:#1f7a4c}
.qx-areas li.miss a{color:var(--text);text-decoration:none;border-bottom:1px dashed color-mix(in srgb,var(--qv,#6d4fd8) 45%,transparent)}
.qx-areas li.miss a:hover{color:var(--qv,#6d4fd8)}
.qx-exports{display:grid;gap:10px}
.qx-export{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;text-align:left;font:inherit;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface,#fff);color:var(--text);cursor:pointer;transition:border-color .25s,box-shadow .25s,transform .25s}
.qx-export:hover{border-color:var(--qv,#6d4fd8);box-shadow:0 12px 26px -20px var(--qv,#6d4fd8);transform:translateY(-1px)}
.qx-export span{grid-row:1 / span 2;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:17px;color:#fff;background:linear-gradient(145deg,#7c5cf0,#5a3fc4)}
.qx-export b{font-size:14px}
.qx-export small{font-size:12px;line-height:1.45;color:var(--muted)}
.qx-figs{padding:12px 14px;border-radius:14px;border:1px dashed var(--line)}
.qx-figs>b{font-size:13.5px}
.qx-figs>small{font-size:12px;color:var(--muted);margin-left:6px}
.qx-figs>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* ====================================================== the documents
   A sheet over the app, like the handover: light, whatever the app's
   theme, and the only thing that prints. */
html.v10-qx-on{overflow:hidden}
.v10-qx{position:fixed;inset:0;z-index:9300;overflow:auto;background:#EEF2F6;
  --surface:#fff;--surface-2:#F4F7FA;--text:#22304A;--muted:#7A869C;--line:#E2E8F0;--line2:#EEF2F7;--qv:#6d4fd8;--qa:#1E7FD0;color:#22304A}
.v10-qx-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 20px;background:rgba(255,255,255,.94);border-bottom:1px solid #DCE5EB;backdrop-filter:blur(14px)}
.v10-qx-bar strong{font-size:15px}
.v10-qx-bar small{font-size:12px;color:#7A869C}
.v10-qx-bar .spacer{flex:1}
.v10-qx-sheet{padding:28px 18px 80px}
.v10-qx svg.qip-chart{pointer-events:none;cursor:default}
.v10-qx .qip-chart .lab{stroke:#fff}

.qx-doc{max-width:900px;margin:0 auto;background:#fff;border-radius:14px;padding:clamp(24px,4vw,52px);box-shadow:0 2px 6px rgba(28,45,95,.05),0 24px 60px -30px rgba(28,45,95,.3);font-size:14px;line-height:1.6}
.qx-dhead{padding-bottom:18px;margin-bottom:8px;border-bottom:2px solid #22304A}
.qx-kick{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#6d4fd8}
.qx-doc h1{margin:8px 0 10px;font-size:clamp(26px,3.6vw,36px);line-height:1.12;letter-spacing:-.025em}
.qx-aim{margin:0;padding:12px 16px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#7c5cf0,#5a3fc4);font-weight:600}
.qx-aim b{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.qx-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;margin:14px 0 0}
.qx-meta div.wide{grid-column:1 / -1}
.qx-meta dt{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8494AD}
.qx-meta dd{margin:2px 0 0;font-size:13.5px}
.qx-meta dd span{color:#6d4fd8;font-size:12px}
.qx-sec{padding-top:10px}
.qx-sec h2{display:flex;align-items:center;gap:12px;margin:26px 0 2px;font-size:20px;letter-spacing:-.015em}
.qx-sec h2>span{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:14px;color:#fff;background:#6d4fd8}
.qx-sec h2>i{margin-left:auto;font-style:normal;font-size:12px;font-weight:800;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#EEF2F7;color:#7A869C}
.qx-sec h2>i.st-ok{background:#2FA96B;color:#fff}
.qx-desc{margin:0 0 12px 42px;font-size:12.5px;font-style:italic;color:#7A869C}
.qx-sec h3{margin:14px 0 4px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#5A6880}
.qx-sec p{margin:0 0 8px}
.qx-sec ul{margin:4px 0 8px;padding-left:18px}
.qx-prompt{color:#9AA5B8;font-style:italic}
.qx-table{width:100%;border-collapse:collapse;font-size:12.5px;margin:6px 0 10px}
.qx-table th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8494AD;border-bottom:1.5px solid #D5DDE8;padding:6px 8px 6px 0}
.qx-table td{vertical-align:top;border-bottom:1px solid #EEF2F7;padding:7px 8px 7px 0}
.qx-table small{color:#8494AD}
.qx-mapline{margin:4px 0 10px}
.qx-mapline>p span.pain{color:#B0392B;font-weight:650}
.qx-driver{overflow-x:auto;margin:6px 0 8px}
.qx-driver svg{display:block;width:100%;height:auto;min-width:640px}
.qx-charts{display:grid;gap:14px}
.qx-fig{margin:0;padding:12px 14px;border:1px solid #E2E8F0;border-radius:12px;break-inside:avoid}
.qx-fig figcaption b{display:block;font-size:14px}
.qx-fig figcaption small{font-size:12px;color:#7A869C}
.qx-fig .qip-chart{margin-top:6px}
.qx-foot{margin-top:30px;padding-top:14px;border-top:1px solid #E2E8F0;font-size:11.5px;color:#8494AD}

/* the poster: A3 landscape, 420 × 297 mm */
.qx-poster{width:min(1500px,100%);margin:0 auto;aspect-ratio:1.414;background:#fff;border-radius:10px;padding:26px 28px 16px;
  box-shadow:0 2px 6px rgba(28,45,95,.05),0 24px 60px -30px rgba(28,45,95,.3);display:flex;flex-direction:column;font-size:12.5px;line-height:1.45}
.qx-phead{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:22px;align-items:center;padding:18px 22px;border-radius:14px;color:#fff;background:linear-gradient(120deg,#4B33B8,#6d4fd8 55%,#1E7FD0)}
.qx-phead h1{margin:0;font-size:clamp(24px,2.7vw,40px);line-height:1.08;letter-spacing:-.025em}
.qx-pteam{margin:8px 0 0;font-size:13px;opacity:.9}
.qx-pteam span{opacity:.75;font-size:11.5px}
.qx-paim{padding:12px 16px;border-radius:12px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);font-size:14.5px;font-weight:650;line-height:1.4}
.qx-paim b{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.8;margin-bottom:3px}
.qx-pgrid{flex:1;display:grid;grid-template-columns:1fr 2.6fr 1fr;gap:14px;margin-top:14px;min-height:0}
.qx-pcharts{display:grid;gap:12px}
.qx-pcharts.n2{grid-template-columns:1fr 1fr}.qx-pcharts.n3{grid-template-columns:1fr 1fr 1fr}
.qx-pcharts .qx-fig{border-bottom:0!important}
.qx-pcharts .qx-fig figcaption small{display:none}
.qx-pcol{display:flex;flex-direction:column;gap:12px;min-width:0}
.qx-pbox{border:1px solid #E2E8F0;border-radius:12px;padding:12px 14px;break-inside:avoid}
.qx-pbox h2{margin:0 0 8px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6d4fd8}
.qx-pbox p{margin:0 0 6px}
.qx-pbox ul{margin:0;padding-left:16px}
.qx-pbox.quiet{border-style:dashed}
.qx-poster .qx-driver svg{min-width:0}
/* The poster is one page, always: its columns cannot grow it, and the driver
   diagram scales to the room left in the middle column (the SVG keeps its
   proportions inside whatever box it is given), however many ideas it has. */
.qx-poster{overflow:hidden}
.qx-pgrid{grid-template-rows:minmax(0,1fr)}
.qx-pcol{min-height:0;overflow:hidden}
.qx-pcol.wide>.qx-pdrv{flex:1 1 0;min-height:120px;display:flex;flex-direction:column}
.qx-pdrv .qx-driver{flex:1 1 0;min-height:0;margin:0;overflow:hidden}
.qx-pdrv .qx-driver svg{width:100%;height:100%}
.qx-poster .qx-fig{padding:6px 0 8px;border:0;border-bottom:1px solid #EEF2F7;border-radius:0}
.qx-poster .qx-fig:last-child{border-bottom:0}
.qx-poster .qip-signal{font-size:11px;margin-top:2px}
.qx-pcycles{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.qx-pcycles li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px}
.qx-pcycles li>span{font-size:10.5px;font-weight:800;color:#fff;background:#6d4fd8;border-radius:7px;padding:3px 7px;height:fit-content;white-space:nowrap}
.qx-pcycles p{margin:2px 0 0;font-size:11.5px;color:#5A6880}
.qx-pcycles em{display:inline-block;margin-top:3px;font-style:normal;font-size:10.5px;font-weight:800;padding:1px 8px;border-radius:999px;background:#EEF2F7}
.qx-pcycles em.a-adopt{background:#DDF3E6;color:#1f7a4c}.qx-pcycles em.a-adapt{background:#FFF1D6;color:#8A5A00}.qx-pcycles em.a-abandon{background:#FBE1DE;color:#A33326}
.qx-pfoot{margin-top:8px;text-align:right;font-size:10.5px;color:#8494AD}
/* screen only: printing measures against the default paper (A4 portrait, ~790px) before the poster's own A3 page applies, and would print the phone layout */
@media screen and (max-width:900px){.qx-poster{aspect-ratio:auto}.qx-pgrid,.qx-phead{grid-template-columns:1fr}}

@media print{
  html,body{background:#fff!important;height:auto!important;overflow:visible!important}
  html.v10-qx-on body > *:not(.v10-qx){display:none!important}
  .v10-qx{position:static!important;overflow:visible!important;background:#fff!important}
  .v10-qx-bar{display:none!important}
  .v10-qx-sheet{padding:0!important}
  .v10-qx,.v10-qx *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .qx-doc{max-width:none;box-shadow:none;border-radius:0;padding:0;font-size:10pt}
  .qx-doc h1{font-size:20pt}
  .qx-sec h2{font-size:13pt;break-after:avoid}
  .qx-sec h3{break-after:avoid}
  .qx-table tr,.qx-fig,.qx-driver{break-inside:avoid}
  .qx-driver svg{min-width:0}
  .qx-poster{width:404mm;height:279mm;aspect-ratio:auto;box-shadow:none;border-radius:0;padding:0;font-size:10pt;overflow:hidden}
  .qx-phead h1{font-size:28pt}
}

/* The fishbone in a dark theme (5 Oct). fishSVG draws with fixed light colours
   because the same drawing goes into the PNG, the documents and print, which
   stay white. On screen in a dark theme, CSS repaints it (CSS wins over the
   SVG's own colour attributes); the exports are untouched. */
:is([data-theme="dark"],[data-tone="dark"]) .qx-fb-wide{background:var(--surface,#1d2735);border-color:var(--line,#344354)}
:is([data-theme="dark"],[data-tone="dark"]) .qx-fb-wide .qx-fbsvg > rect:first-child{fill:transparent}
:is([data-theme="dark"],[data-tone="dark"]) .qx-fb-wide .qx-fbsvg line[stroke="#A3ACBD"]{stroke:#7f8ba0}
:is([data-theme="dark"],[data-tone="dark"]) .qx-fb-wide .qx-fbsvg line[stroke="#6d4fd8"]{stroke:#a993ff}
:is([data-theme="dark"],[data-tone="dark"]) .qx-fb-wide .qx-fbsvg polygon[fill="#6d4fd8"]{fill:#a993ff}
:is([data-theme="dark"],[data-tone="dark"]) .qx-fb-wide .qx-fbsvg polygon[fill="#EEEDFE"]{fill:rgba(169,147,255,.16);stroke:#a993ff}
:is([data-theme="dark"],[data-tone="dark"]) .qx-fb-wide .qx-fbsvg text[fill="#6d4fd8"]{fill:#b9a7ff}
:is([data-theme="dark"],[data-tone="dark"]) .qx-fb-wide .qx-fbsvg text[fill="#3C3489"]{fill:#ece6ff}
:is([data-theme="dark"],[data-tone="dark"]) .qx-fb-wide .qx-fbsvg text[fill="#4A5568"]{fill:#d3dbe6}
:is([data-theme="dark"],[data-tone="dark"]) .qx-fb-wide .qx-fbsvg circle[fill="#1D9E75"]{fill:#3fd3a0}