/* Guide infographics (rendered by tools/lib-infographic.js). Dark site palette; logical properties so RTL works. */
.ig{margin:34px 0;padding:24px 24px 18px;border:1px solid var(--line);border-radius:20px;background:radial-gradient(120% 90% at 0% 0%,rgba(168,80,46,.16),transparent 60%),linear-gradient(160deg,var(--card),var(--bg-2));box-shadow:var(--shadow-1);overflow:hidden;}
.ig-head{display:flex;flex-direction:column;gap:4px;margin-bottom:18px;}
.ig-head b{font-family:'Spectral',serif;font-weight:700;font-size:21px;line-height:1.25;color:var(--text);}
.ig-head span{font-size:14.5px;color:var(--text-2);line-height:1.45;}
.ig-src{margin:16px 0 0;font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.02em;color:var(--text-3);}
.ig-note{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--accent-soft);}
.ig-unit{margin:0 0 10px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);}

/* steps: flow */
.ig-flow,.ig-stairs{list-style:none;margin:0;padding:0;counter-reset:none;}
.ig-flow{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:14px;}
.ig-flow li,.ig-stairs li{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 16px 14px;border:1px solid rgba(232,165,124,.28);border-radius:16px;background:rgba(26,14,15,.55);}
.ig-flow.ig-one li::after{content:'';position:absolute;inset-inline-end:-14px;top:30px;width:14px;height:2px;background:linear-gradient(90deg,var(--accent-soft),transparent);}
.ig-flow.ig-one li:last-child::after{display:none;}
.ig-n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;font-family:'IBM Plex Mono',monospace;font-weight:700;font-size:15px;box-shadow:0 4px 12px rgba(138,63,31,.45);}
.ig li h4{margin:4px 0 0;font-size:16.5px;line-height:1.3;color:var(--text);font-style:normal;font-weight:700;}
.ig li p{margin:0;font-size:14px;line-height:1.5;color:var(--text-2);}
.ig-tag{align-self:flex-start;margin-top:4px;padding:3px 10px;border-radius:999px;border:1px solid var(--gold);font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--gold);}

/* steps: stairs */
.ig-stairs{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:12px;align-items:end;}
.ig-stairs li{min-height:calc(130px + var(--i) * 46px);justify-content:flex-end;background:linear-gradient(180deg,rgba(168,80,46,calc(.10 + var(--i) * .07)),rgba(26,14,15,.6));}
.ig-stairs li:last-child{border-color:var(--gold);}
.ig-stairs .ig-n{position:absolute;inset-block-start:12px;inset-inline-start:12px;}
.ig-stairs h4{margin-top:auto;padding-top:44px;}

/* bars */
.ig-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.ig-bars li{display:grid;grid-template-columns:minmax(96px,168px) 1fr auto;align-items:center;gap:6px 12px;}
.ig-l{font-size:14.5px;color:var(--text);}
.ig-bar{display:block;height:16px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;}
.ig-bar i{display:block;height:100%;width:var(--w);border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-soft));transform-origin:left center;}
[dir="rtl"] .ig-bar i{transform-origin:right center;}
.ig-bars li.hl .ig-bar i{background:linear-gradient(90deg,var(--accent-soft),var(--gold));}
.ig-v{font-family:'IBM Plex Mono',monospace;font-size:14.5px;color:var(--gold);min-width:3.2em;text-align:end;}
.ig-bars small{grid-column:2 / -1;margin-top:-4px;font-size:12.5px;color:var(--text-3);}

/* waterfall */
.ig-wf{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px;align-items:stretch;}
.ig-col{display:grid;grid-template-rows:22px 190px auto;gap:6px;text-align:center;}
.ig-val{font-family:'IBM Plex Mono',monospace;font-size:13.5px;font-weight:700;color:var(--text);align-self:end;}
.ig-track{position:relative;border-bottom:1px solid var(--line);}
.ig-track i{position:absolute;inset-inline:16%;bottom:var(--b);height:var(--h);min-height:3px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--accent-soft),var(--accent));transform-origin:bottom;}
.ig-col.minus .ig-track i{background:linear-gradient(180deg,#c9553a,#8a3328);}
.ig-col.minus .ig-val{color:#ef8f78;}
.ig-col.plus .ig-track i{background:linear-gradient(180deg,#8fbf86,#4f8a4a);}
.ig-col.end .ig-track i{background:linear-gradient(180deg,var(--gold),#b88b3a);}
.ig-col.end .ig-val{color:var(--gold);font-size:15.5px;}
.ig-col label{font-size:12.5px;line-height:1.3;color:var(--text-2);}

/* matrix */
.ig-mwrap{overflow-x:auto;padding-bottom:4px;}
.ig-matrix{display:grid;grid-template-columns:minmax(150px,1.1fr) repeat(var(--c),minmax(150px,1fr));gap:8px;min-width:640px;}
.ig-mrow{display:contents;}
.ig-mh{padding:2px 6px 6px;font-family:'IBM Plex Mono',monospace;font-size:12.5px;letter-spacing:.04em;color:var(--gold);}
.ig-rl{display:flex;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);font-size:14.5px;font-weight:600;color:var(--text);}
.ig-cell{display:flex;align-items:flex-start;gap:9px;padding:10px 12px;border-radius:12px;border:1px solid transparent;font-size:13.5px;line-height:1.4;color:var(--text);}
.ig-cell b,.ig-legend b{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;font-size:13px;line-height:1;}
.ig-cell.yes,.ig-legend .yes b{background:rgba(110,170,100,.16);border-color:rgba(110,170,100,.45);}
.ig-cell.yes b,.ig-legend .yes b{background:#4f8a4a;color:#fff;}
.ig-cell.no{background:rgba(201,85,58,.14);border-color:rgba(201,85,58,.45);}
.ig-cell.no b,.ig-legend .no b{background:#a8402c;color:#fff;}
.ig-cell.cond{background:rgba(212,175,106,.13);border-color:rgba(212,175,106,.45);}
.ig-cell.cond b,.ig-legend .cond b{background:var(--gold);color:#1a0e0f;}
.ig-legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;padding:0;font-size:13px;color:var(--text-2);}
.ig-legend li{display:flex;align-items:center;gap:7px;}
.ig-legend .yes b{background:#4f8a4a;}

/* motion: only when cards.js-style observer armed them */
.ig.armed .ig-flow li,.ig.armed .ig-stairs li,.ig.armed .ig-bars li,.ig.armed .ig-col,.ig.armed .ig-rl,.ig.armed .ig-cell{opacity:0;transform:translateY(14px);}
.ig.armed.on .ig-flow li,.ig.armed.on .ig-stairs li,.ig.armed.on .ig-bars li,.ig.armed.on .ig-col,.ig.armed.on .ig-rl,.ig.armed.on .ig-cell{opacity:1;transform:none;transition:opacity .55s ease,transform .55s ease;transition-delay:calc(var(--i,0) * 90ms);}
.ig.armed .ig-bar i{transform:scaleX(0);}
.ig.armed.on .ig-bar i{transform:scaleX(1);transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms + 150ms);}
.ig.armed .ig-track i{transform:scaleY(0);}
.ig.armed.on .ig-track i{transform:scaleY(1);transition:transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 110ms + 150ms);}
@media (prefers-reduced-motion:reduce){.ig.armed *{transition:none !important;opacity:1 !important;transform:none !important;}}

@media (max-width:760px){
  .ig{padding:20px 16px 14px;}
  .ig-flow{grid-template-columns:1fr;gap:10px;padding-inline-start:18px;border-inline-start:2px solid rgba(232,165,124,.3);margin-inline-start:12px;}
  .ig-flow li::after{display:none;}
  .ig-flow li::before{content:'';position:absolute;inset-inline-start:-31px;top:24px;width:12px;height:12px;border-radius:50%;background:var(--accent-soft);}
  .ig-stairs{grid-template-columns:1fr;gap:10px;align-items:stretch;}
  .ig-stairs li{min-height:0;margin-inline-start:calc(var(--i) * 14px);justify-content:flex-start;}
  .ig-stairs h4{padding-top:40px;margin-top:0;}
  .ig-bars li{grid-template-columns:minmax(80px,120px) 1fr auto;}
  .ig-col{grid-template-rows:22px 150px auto;}
  .ig-col label{font-size:11px;}
  .ig-val{font-size:11.5px;}
}
