/* Diagrams — AI Strategic Compass */
:root{--band-low:#1f7a4d;--band-mod:#01696f;--band-high:#9a6312;--band-crit:#964219}
.dg{margin:var(--space-6) 0 0;padding:var(--space-6);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.dg figcaption{margin-top:var(--space-5);font-size:var(--text-sm);color:var(--color-text-muted);max-width:68ch;text-wrap:pretty}
.dg-arrow{width:1.1rem;height:1.1rem;color:var(--color-text-faint);flex:none}
/* Stages: assess → decide → operate */
.stages{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.15fr) auto minmax(0,1fr);gap:var(--space-3);align-items:stretch}
.stg{padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2)}
.stg .fk{display:block;font-weight:700;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:var(--color-text-faint);margin-bottom:.5rem}
.stg h3{margin:0 0 .3rem;font-size:1rem}
.stg p{margin:0;font-size:var(--text-sm);color:var(--color-text-muted)}
.stg.here{background:var(--color-primary-tint);border-color:color-mix(in srgb,var(--color-primary) 40%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 12%,transparent)}
.stg.here .fk{color:var(--color-primary)}
.stg-arrow{display:grid;place-items:center}
.stages-loop{grid-column:1 / -1;display:flex;align-items:center;gap:.6rem;margin-top:var(--space-2);padding:.55rem .9rem;border:1px dashed var(--color-border-strong);border-top:none;border-radius:0 0 var(--radius-md) var(--radius-md);font-size:.8rem;color:var(--color-text-muted)}
@media (max-width:760px){.stages{grid-template-columns:1fr}.stg-arrow{transform:rotate(90deg);height:1.2rem}.stages-loop{border-top:1px dashed var(--color-border-strong);border-radius:var(--radius-md)}}
/* Pillar × dimension matrix */
.mx{min-width:560px}
.mx th,.mx td{text-align:center;vertical-align:middle}
.mx th[scope="row"]{text-align:left;font-weight:600;white-space:nowrap}
.mx thead th:not(:first-child){width:3rem;font:500 1.15rem/1 var(--font-display);color:var(--color-text-muted)}
.mx .dot{display:inline-block;width:.85rem;height:.85rem;border-radius:50%;background:var(--color-primary);box-shadow:0 0 0 4px var(--color-primary-tint)}
.mx td.off::after{content:"";display:inline-block;width:.3rem;height:.3rem;border-radius:50%;background:var(--color-border-strong)}
.mx-legend{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.35rem var(--space-6);font-size:var(--text-sm);color:var(--color-text-muted)}
.mx-legend b{display:inline-block;width:1.4rem;color:var(--color-text);font-weight:700}
/* Score ruler */
.ruler{position:relative;padding-top:2.6rem}
.ruler-bands,.ruler-cells{display:grid;grid-template-columns:repeat(21,minmax(0,1fr))}
.ruler-bands{margin-bottom:.4rem}
.ruler-bands span{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding-left:.3rem;border-left:2px solid currentColor}
.ruler-cells span{height:1.4rem;margin-right:2px;border-radius:3px}
.ruler-cells span:last-child{margin-right:0}
.ruler-nums{display:grid;grid-template-columns:repeat(21,minmax(0,1fr));margin-top:.35rem;font-size:.7rem;color:var(--color-text-faint);text-align:center;font-variant-numeric:tabular-nums}
.ruler-mark{position:absolute;top:0;left:var(--pos);transform:translateX(-50%);display:grid;justify-items:center;gap:.15rem;font-size:.72rem;font-weight:700;white-space:nowrap}
.ruler-mark::after{content:"";width:2px;height:4.3rem;background:var(--color-text)}
.b-low{color:var(--band-low)}.b-mod{color:var(--band-mod)}.b-high{color:var(--band-high)}.b-crit{color:var(--band-crit)}
.bg-low{background:var(--band-low)}.bg-mod{background:var(--band-mod)}.bg-high{background:var(--band-high)}.bg-crit{background:var(--band-crit)}
@media (max-width:560px){.ruler-nums span:nth-child(even){visibility:hidden}.ruler-bands span{font-size:.6rem}}
/* Step rows (flow + chain) */
.dg-groups,.dg-steps{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--space-4)}
.dg-groups{margin-bottom:var(--space-3)}
.dg-groups span{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-faint);padding-bottom:.4rem;border-bottom:2px solid var(--color-border)}
.dg-groups span.pri{color:var(--color-primary);border-color:color-mix(in srgb,var(--color-primary) 55%,transparent)}
.dg-steps{list-style:none;margin:0;padding:0}
.dg-steps li{position:relative;padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-2);display:grid;gap:.2rem;align-content:start}
.dg-steps li b{font-size:.95rem}
.dg-steps li small{font-size:.78rem;color:var(--color-text-muted);line-height:1.4}
.dg-steps li:not(:last-child)::after{content:"";position:absolute;top:50%;right:calc(-1 * var(--space-4) + 2px);width:calc(var(--space-4) - 4px);height:2px;background:var(--color-border-strong)}
.dg-steps li.pri{background:var(--color-primary-tint);border-color:color-mix(in srgb,var(--color-primary) 35%,transparent)}
.dg-steps li.acc{background:color-mix(in srgb,var(--color-accent) 9%,var(--color-surface));border-color:color-mix(in srgb,var(--color-accent) 35%,transparent)}
.dg-loop{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-2)}
.dg-loop div{height:1.6rem;border:2px dashed var(--color-primary);border-top:none;border-radius:0 0 var(--radius-md) var(--radius-md);position:relative;margin:0 1.2rem}
.dg-loop div::before{content:"";position:absolute;left:-7px;top:-2px;border:6px solid transparent;border-bottom:8px solid var(--color-primary);border-top:none}
.dg-loop div span{position:absolute;left:50%;bottom:-.7rem;transform:translateX(-50%);background:var(--color-surface);padding:0 .5rem;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-primary);white-space:nowrap}
.dg-outcomes{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:var(--space-6);font-size:var(--text-sm);color:var(--color-text-muted)}
.dg-outcomes .o{padding:.25rem .75rem;border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-surface-2);font-weight:600;color:var(--color-text);font-size:.8rem}
@media (max-width:820px){.dg-groups,.dg-loop{display:none}.dg-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.dg-steps li::after{display:none}}
/* Radar */
.radar-wrap{display:grid;grid-template-columns:minmax(300px,1.3fr) minmax(0,1fr);gap:var(--space-6);align-items:center}
.radar-wrap.solo{grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){.radar-wrap{grid-template-columns:1fr}}
.radar{min-width:0}.radar svg{width:100%;min-width:300px;height:auto;max-width:440px;display:block;margin:0 auto}
.rd-ring{fill:none;stroke:var(--color-divider);stroke-width:1}
.rd-ring.outer{stroke:var(--color-border)}
.rd-axis{stroke:var(--color-divider);stroke-width:1}
.rd-lbl{fill:var(--color-text-muted);font:600 13.5px/1 var(--font-body,inherit)}
.rd-lvl{fill:var(--color-text-faint);font:600 11px/1 var(--font-body,inherit)}
.rd-val{fill:var(--color-text);font:700 14px/1 var(--font-body,inherit)}
.rd-a{fill:color-mix(in srgb,var(--color-primary) 22%,transparent);stroke:var(--color-primary);stroke-width:2.2;stroke-linejoin:round}
.rd-b{fill:color-mix(in srgb,var(--color-accent) 16%,transparent);stroke:var(--color-accent);stroke-width:2.2;stroke-dasharray:6 4;stroke-linejoin:round}
.rd-dot-a{fill:var(--color-primary)}.rd-dot-b{fill:var(--color-accent)}
.rd-legend{display:grid;gap:var(--space-4)}
.rd-legend div{display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;align-items:start;font-size:var(--text-sm)}
.rd-legend i{width:1.4rem;height:.9rem;border-radius:3px;margin-top:.25rem;grid-row:span 2}
.rd-legend i.a{background:color-mix(in srgb,var(--color-primary) 30%,transparent);border:2px solid var(--color-primary)}
.rd-legend i.b{background:color-mix(in srgb,var(--color-accent) 20%,transparent);border:2px dashed var(--color-accent)}
.rd-legend b{font-weight:600}
.rd-legend span{color:var(--color-text-muted)}
/* Quadrant */
.quad{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:var(--space-3)}
.q-y{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-faint);text-align:center}
.q-x{grid-column:2;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-faint);text-align:center}
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;border-radius:var(--radius-md);overflow:hidden}
.q{padding:var(--space-5);min-height:8.5rem;display:grid;align-content:start;gap:.3rem}
.q b{font-size:.98rem}
.q span{font-size:var(--text-sm);color:var(--color-text-muted)}
.q small{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.q.hl{background:color-mix(in srgb,var(--band-crit) 13%,var(--color-surface))}.q.hl small{color:var(--band-crit)}
.q.hh{background:color-mix(in srgb,var(--band-high) 13%,var(--color-surface))}.q.hh small{color:var(--band-high)}
.q.ll{background:color-mix(in srgb,var(--band-mod) 11%,var(--color-surface))}.q.ll small{color:var(--band-mod)}
.q.lh{background:color-mix(in srgb,var(--band-low) 13%,var(--color-surface))}.q.lh small{color:var(--band-low)}
@media (max-width:560px){.q{min-height:0;padding:var(--space-4)}}
/* Target vs actual */
.tva{display:grid;gap:var(--space-6)}
.tva-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem var(--space-4);align-items:end}
.tva-row .kicker{margin:0 0 .2rem}
.tva-row b{font-size:.95rem;font-weight:600}
.tva-num{font:500 1.8rem/1 var(--font-display);text-align:right}
.tva-num small{font:500 var(--text-sm)/1 inherit;color:var(--color-text-faint)}
.tva-bar{grid-column:1 / -1;position:relative;height:.8rem;border-radius:var(--radius-full);background:var(--color-surface-offset)}
.tva-bar i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--color-primary)}
.tva-bar i.short{background:var(--band-high)}
.tva-bar em{position:absolute;right:0;top:-.35rem;bottom:-.35rem;width:2px;background:var(--color-text)}
.tva-note{grid-column:1 / -1;font-size:.8rem;color:var(--color-text-muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Flowchart */
.fc-wrap{overflow-x:auto}
.fc svg{display:block;width:100%;min-width:600px;max-width:760px;height:auto;margin:0 auto}
.fc-band{fill:transparent}.fc-band.alt{fill:var(--color-surface-2)}
.fc-bl{fill:var(--color-text-faint);font-size:10.5px;font-weight:700;letter-spacing:.08em}
.fc-node{fill:var(--color-surface);stroke:var(--color-border-strong);stroke-width:1.2}
.fc-dec{fill:var(--color-primary-tint);stroke:var(--color-primary);stroke-width:1.5}
.fc-start{fill:var(--color-primary)}
.fc-esc{fill:color-mix(in srgb,var(--band-high) 10%,var(--color-surface));stroke:var(--band-high);stroke-width:1.4}
.fc-stop{fill:color-mix(in srgb,var(--color-accent) 9%,var(--color-surface));stroke:var(--color-accent);stroke-width:1.4}
.fc-t{fill:var(--color-text);font-size:14px;font-weight:600}
.fc-s{fill:var(--color-text-muted);font-size:12px}
.fc-inv{fill:var(--color-text-inverse)}
.fc-d{fill:var(--color-text);font-size:12.5px;font-weight:600}
.fc-l{fill:var(--color-text-muted);font-size:11.5px;font-weight:700}
.fc-e{fill:none;stroke:var(--color-text-faint);stroke-width:1.6;stroke-linejoin:round}
.fc-e.loop{stroke:var(--color-primary)}.fc-e.dash{stroke-dasharray:5 4}
.fc-ah{fill:var(--color-text-faint)}.fc-ahp{fill:var(--color-primary)}
.fc-halo{fill:none;stroke:var(--color-surface-2);stroke-width:7}
.fc-legend{list-style:none;margin:var(--space-5) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:.8rem;color:var(--color-text-muted)}
.fc-legend li{display:flex;align-items:center;gap:.45rem}
.fc-legend i{width:1.1rem;height:.8rem;border-radius:3px;border:1.5px solid}
.fc-legend .k-step{background:var(--color-surface);border-color:var(--color-border-strong)}
.fc-legend .k-dec{background:var(--color-primary-tint);border-color:var(--color-primary);transform:rotate(45deg) scale(.8)}
.fc-legend .k-esc{background:color-mix(in srgb,var(--band-high) 10%,var(--color-surface));border-color:var(--band-high)}
.fc-legend .k-stop{background:color-mix(in srgb,var(--color-accent) 9%,var(--color-surface));border-color:var(--color-accent);border-radius:999px}
.fc-legend .k-loop{border:none;border-top:2px dashed var(--color-primary);height:0;border-radius:0}
/* Proportionality */
.prop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);align-items:end}
.prop-col{display:grid;gap:.35rem;justify-items:start;font-size:var(--text-sm)}
.prop-col .vpill{margin-bottom:.4rem}
.prop-bar{width:100%;height:9rem;position:relative;border-radius:var(--radius-sm);background:var(--color-surface-offset);overflow:hidden}
.prop-bar::after{content:"";position:absolute;inset:auto 0 0 0;height:var(--h);border-radius:var(--radius-sm)}
.prop-col.low .prop-bar::after{background:var(--band-low)}.prop-col.mod .prop-bar::after{background:var(--band-mod)}.prop-col.high .prop-bar::after{background:var(--band-high)}.prop-col.crit .prop-bar::after{background:var(--band-crit)}
.prop-col b{font-size:.95rem;margin-top:.3rem}
.prop-col span:last-child{color:var(--color-text-muted)}
@media (max-width:560px){.prop-bar{height:6rem}.prop-grid{gap:var(--space-2)}}
.prop-tbl{min-width:680px}
.prop-tbl td{font-weight:400;vertical-align:top;font-size:var(--text-sm)}
.prop-tbl td:first-child{font-weight:600;white-space:nowrap}

.sl svg{min-width:780px;max-width:1000px}
.sl-lbl{fill:var(--color-text);font-size:13px;font-weight:700}
.sl-sub{fill:var(--color-text-muted);font-size:11px}
.sl-col{fill:var(--color-text-faint);font-size:11px;font-weight:700;letter-spacing:.08em}
.sl-t{fill:var(--color-text);font-size:12px;font-weight:500}
.sl-div{stroke:var(--color-border-strong);stroke-width:1}
.sl-grid{stroke:var(--color-divider);stroke-width:1;stroke-dasharray:3 4}