/* Steve's Kidney Journey — information infographics, 2026-11-11 */
.info-panel:has(.viz-panel){background:#fafcf8;padding:clamp(14px,2.6vw,30px);overflow:hidden}
.info-panel .viz-panel[hidden]{display:none}
.info-panel .viz-panel{min-width:0;max-width:100%;color:#294838}
.info-panel .viz-panel *{box-sizing:border-box}
.info-panel .viz-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px}
.info-panel .viz-kicker{font-size:11px;letter-spacing:1.7px;text-transform:uppercase;font-weight:800;color:#9a7744;display:block;margin:0 0 7px}
.info-panel .viz-title{font:500 clamp(26px,3vw,38px)/1.12 'Playfair Display',Georgia,serif;color:#173d34;letter-spacing:-.7px;margin:0}
.info-panel .viz-subtitle{margin:9px 0 0;color:#5d6e61;line-height:1.5;font-size:14px;max-width:690px}
.info-panel .viz-chip{display:inline-flex;align-items:center;gap:8px;flex:none;border-radius:20px;padding:8px 12px;border:1px solid #d7e0d2;background:#f4f7ef;font-size:11px;font-weight:800;color:#2f6247}
.info-panel .viz-chip svg{width:17px;height:17px;flex-shrink:0}
.info-panel .viz-grid{display:grid;gap:12px;min-width:0}
.info-panel .viz-grid-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.info-panel .viz-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.info-panel .viz-grid-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.info-panel .viz-top-metric{background:#fff;border:1px solid #dce6d9;border-radius:12px;padding:17px 16px;min-width:0;min-height:110px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 2px 6px #1c483208}
.info-panel .viz-metric-value{display:block;font:700 clamp(29px,3.6vw,43px)/1 'Playfair Display',Georgia,serif;letter-spacing:-1.1px;color:#165d44;margin-bottom:8px;white-space:nowrap}
.info-panel .viz-metric-label{font-size:12px;line-height:1.4;color:#536659;font-weight:700}
.info-panel .viz-metric-detail{font-size:11px;color:#7a887e;margin-top:3px;line-height:1.4}
.info-panel .viz-metric-green{background:#e9f1e8;border-color:#d4e4d2}
.info-panel .viz-metric-gold{background:#fbf2e2;border-color:#efdfc3}
.info-panel .viz-metric-blue{background:#e9f1f2;border-color:#d9e6e8}
.info-panel .viz-section-label{display:flex;align-items:center;gap:10px;font-size:13px;text-transform:uppercase;letter-spacing:1.2px;font-weight:800;color:#8d7047;margin:23px 0 12px}
.info-panel .viz-section-label:after{content:"";height:1px;background:#dee7db;flex:1}
.info-panel .viz-icon{display:grid;place-items:center;width:41px;height:41px;color:#136346;background:#e4efe6;border-radius:11px;flex:none}
.info-panel .viz-icon svg{display:block;width:24px;height:24px}
.info-panel .viz-function{background:#fff;border:1px solid #dce6dc;border-radius:11px;padding:16px;display:flex;align-items:flex-start;gap:11px;min-width:0;min-height:100px}
.info-panel .viz-function strong,.info-panel .viz-flow-step strong,.info-panel .viz-med strong{font-size:14px;line-height:1.33;color:#214e36;display:block}
.info-panel .viz-function p,.info-panel .viz-flow-step p,.info-panel .viz-med p{color:#5c6d61;line-height:1.45;font-size:12px;margin:5px 0 0}
.info-panel .viz-anatomy{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:16px;align-items:center;background:linear-gradient(125deg,#edf3e9,#f5f6f0);border:1px solid #d9e5d4;border-radius:13px;padding:17px 23px;margin:14px 0 19px}
.info-panel .viz-anatomy-art{max-width:100%;width:260px;height:auto;justify-self:center;display:block}
.info-panel .viz-anatomy-copy strong{display:block;color:#174b37;font:500 23px/1.2 'Playfair Display',Georgia,serif;margin-bottom:7px}
.info-panel .viz-anatomy-copy p{font-size:13px;color:#596c60;line-height:1.6;margin:0}
.info-panel .viz-takeaway{display:flex;align-items:flex-start;gap:12px;margin-top:21px;border-radius:11px;border:1px solid #cbdcc9;background:#e8f0e7;padding:17px 19px;line-height:1.55;font-size:13px;color:#4a6252}
.info-panel .viz-takeaway b{display:block;font-size:15px;color:#15573d;margin-bottom:2px}
.info-panel .viz-takeaway svg{width:25px;height:25px;flex:none;color:#16734b}
.info-panel .viz-takeaway-gold{background:#fbf1df;border-color:#f0dcbd}
.info-panel .viz-takeaway-gold svg{color:#a17b42}
.info-panel .viz-source{border-top:1px solid #dfe8dd;margin:20px 0 0;padding-top:12px;color:#748075!important;line-height:1.55!important;font-size:11px!important}
.info-panel .viz-source a{color:#126142;text-decoration:underline;text-underline-offset:3px}
.info-panel .viz-mini-key{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 15px}
.info-panel .viz-mini-key span{display:inline-flex;align-items:center;gap:8px;background:#f0f4ed;border:1px solid #e1e9de;border-radius:20px;padding:8px 12px;color:#3e614b;font-size:12px;font-weight:700}
.info-panel .viz-mini-key .viz-dot{width:8px;height:8px;background:#b89356;border-radius:50%;display:inline-block}
.info-panel .viz-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin:10px 0 14px;min-width:0}
.info-panel .viz-flow-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1px solid #dae5d8;border-radius:12px;padding:15px 12px 16px;min-width:0;min-height:188px}
.info-panel .viz-flow-step:not(:last-child):after{content:"›";font:700 31px/1 Georgia,serif;position:absolute;right:-17px;top:45%;z-index:1;color:#a68b5c}
.info-panel .viz-flow-number{display:block;align-self:start;background:#e0e9df;padding:4px 9px;border-radius:20px;font-size:10px;letter-spacing:1px;font-weight:800;color:#246343;margin-bottom:10px}
.info-panel .viz-flow-icon{width:64px;height:64px;margin:0 0 9px;border-radius:50%;display:grid;place-items:center;background:#f2eee4}
.info-panel .viz-flow-icon svg{height:46px;width:46px;display:block}
.info-panel .viz-flow-step strong{font-size:13px}
.info-panel .viz-flow-step p{font-size:11px}
.info-panel .viz-injury{display:grid;grid-template-columns:100px minmax(0,1fr);gap:15px;align-items:center;border-radius:12px;background:#f8ece7;border:1px solid #ead7cf;padding:15px 19px;margin-top:16px}
.info-panel .viz-injury svg{width:88px;height:88px;display:block}
.info-panel .viz-injury strong{color:#8a503d;font-size:15px;display:block;margin-bottom:5px}
.info-panel .viz-injury p{font-size:12px;color:#6c5d57;margin:0;line-height:1.5}
.info-panel .viz-two-goals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 20px}
.info-panel .viz-goal{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;background:#edf2e9;border:1px solid #d7e4d4;padding:16px;border-radius:11px}
.info-panel .viz-goal-number{font:600 30px/1 'Playfair Display',Georgia,serif;color:#126344}
.info-panel .viz-goal strong{display:block;color:#23543b;font-size:13px;line-height:1.3}
.info-panel .viz-goal small{color:#627665;font-size:11px;line-height:1.45;display:block;margin-top:4px}
.info-panel .viz-strategy-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:8px}
.info-panel .viz-strategy{border:1px solid #dfe6dc;background:#fff;border-radius:12px;padding:14px 14px 13px;min-width:0}
.info-panel .viz-strategy-top{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.info-panel .viz-strategy-number{font-weight:800;font-size:11px;border-radius:7px;display:grid;place-items:center;width:27px;height:27px;flex:none;color:#fff;background:#155e43}
.info-panel .viz-strategy-title{color:#234d39;font-size:13px;font-weight:800;line-height:1.25}
.info-panel .viz-strategy strong{font-size:14px;color:#183f2d}
.info-panel .viz-strategy p{font-size:11px;line-height:1.55;color:#627365;margin:7px 0 0}
.info-panel .viz-strategy .viz-strategy-tag{background:#f0f5ed;border-radius:6px;padding:7px 9px;margin-top:12px;color:#286345;font-size:11px;font-weight:700}
.info-panel .viz-meds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.info-panel .viz-med{border-radius:11px;border:1px solid #d9e5d5;background:#fff;padding:15px;min-width:0}
.info-panel .viz-med-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.info-panel .viz-med-category{font-size:10px;line-height:1.2;font-weight:800;text-transform:uppercase;letter-spacing:.7px;border-radius:16px;padding:5px 8px;background:#e5eee3;color:#316548}
.info-panel .viz-med:nth-child(2) .viz-med-category{background:#f7ecd9;color:#8f682f}
.info-panel .viz-med:nth-child(3) .viz-med-category,.info-panel .viz-med:nth-child(4) .viz-med-category{background:#e6eef1;color:#426b7a}
.info-panel .viz-med:nth-child(5) .viz-med-category,.info-panel .viz-med:nth-child(6) .viz-med-category{background:#f0e8ed;color:#7e6171}
.info-panel .viz-med strong{font-size:15px}
.info-panel .viz-med small{display:block;font-size:11px;color:#8b968a;margin-top:1px}
.info-panel .viz-med p{font-size:12px}
.info-panel .viz-scale{display:flex;align-items:stretch;min-height:103px;overflow:hidden;border-radius:13px;border:1px solid #dbe2da;margin:14px 0}
.info-panel .viz-stage{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;text-align:center;padding:14px 8px;background:#e7f2e6;color:#27623f;border-right:2px solid #fff}
.info-panel .viz-stage:last-child{border-right:0}
.info-panel .viz-stage span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px}
.info-panel .viz-stage strong{font-size:22px;line-height:1.2;color:#1f5238}
.info-panel .viz-stage small{font-size:10px;color:#4e6958}
.info-panel .viz-stage-four{background:#f8ebd5}
.info-panel .viz-stage-four strong{color:#91632b}
.info-panel .viz-stage-five{background:#fae7e4}
.info-panel .viz-stage-five strong{color:#9c5147}
.info-panel .viz-stage .viz-stage-marker{background:#fff;color:#176144;border-radius:20px;padding:5px 9px;font-weight:800;margin-top:6px;font-size:11px}
.info-panel .viz-chart{background:#fff;border:1px solid #dce5db;padding:14px;border-radius:12px;min-width:0;margin-top:10px}
.info-panel .viz-chart-title{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:11px}
.info-panel .viz-chart-title strong{color:#214835;font-size:15px}
.info-panel .viz-chart-title span{font-size:11px;color:#718174}
.info-panel .viz-chart-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;border-radius:7px}
.info-panel .viz-chart-scroll img{display:block;width:100%;min-width:620px;height:auto;max-width:none}
.info-panel .viz-chart-hint{margin:8px 0 0!important;font-size:11px!important;color:#758275!important}
.info-panel .viz-chart-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.info-panel .viz-chart-note{border:1px solid #dce6dc;border-radius:9px;padding:12px;background:#f8faf7}
.info-panel .viz-chart-note strong{font-size:12px;color:#234c36;display:block}
.info-panel .viz-chart-note p{font-size:11px;margin:5px 0 0;line-height:1.5;color:#667569}
.info-panel .viz-end-cap{border-left:4px solid #b28e50;background:#fbf3e5;padding:14px 18px;margin-top:20px;border-radius:0 8px 8px 0;font-size:13px;color:#675a3f;line-height:1.55}
.info-panel .viz-end-cap strong{color:#725628}
@media(max-width:1050px){
 .info-panel .viz-grid-four,.info-panel .viz-strategy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .info-panel .viz-meds{grid-template-columns:repeat(2,minmax(0,1fr))}
 .info-panel .viz-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .info-panel .viz-flow-step:not(:last-child):after{display:none}
}
@media(max-width:700px){
 .info-panel:has(.viz-panel){padding:15px}
 .info-panel .viz-heading{align-items:start;gap:8px}
 .info-panel .viz-heading>.viz-chip{display:none}
 .info-panel .viz-title{font-size:29px}
 .info-panel .viz-subtitle{font-size:13px}
 .info-panel .viz-top-metric{padding:12px;min-height:92px}
 .info-panel .viz-metric-value{font-size:32px}
 .info-panel .viz-metric-label{font-size:11px}
 .info-panel .viz-anatomy{grid-template-columns:1fr;gap:5px;padding:14px}
 .info-panel .viz-anatomy-art{width:200px}
 .info-panel .viz-anatomy-copy strong{font-size:21px}
 .info-panel .viz-anatomy-copy p{font-size:12px}
 .info-panel .viz-grid-three{grid-template-columns:repeat(2,minmax(0,1fr))}
 .info-panel .viz-function{padding:12px;gap:8px;min-height:98px}
 .info-panel .viz-function strong{font-size:12px}
 .info-panel .viz-function p{font-size:11px}
 .info-panel .viz-icon{width:31px;height:31px;border-radius:8px}
 .info-panel .viz-icon svg{width:19px;height:19px}
 .info-panel .viz-flow-step{min-height:163px;padding:11px 9px}
 .info-panel .viz-flow-icon{width:53px;height:53px}
 .info-panel .viz-flow-icon svg{width:39px;height:39px}
 .info-panel .viz-flow-step strong{font-size:12px}
 .info-panel .viz-injury{grid-template-columns:65px minmax(0,1fr);gap:9px;padding:12px}
 .info-panel .viz-injury svg{width:60px;height:60px}
 .info-panel .viz-injury strong{font-size:13px}
 .info-panel .viz-two-goals{gap:8px}
 .info-panel .viz-goal{grid-template-columns:1fr;gap:8px;padding:12px}
 .info-panel .viz-goal-number{font-size:27px}
 .info-panel .viz-strategy{padding:12px}
 .info-panel .viz-strategy-title{font-size:12px}
 .info-panel .viz-med{padding:12px}
 .info-panel .viz-med p{font-size:11px}
 .info-panel .viz-chart-notes{grid-template-columns:1fr}
 .info-panel .viz-chart-note{padding:10px 12px}
 .info-panel .viz-scale{min-height:90px}
 .info-panel .viz-stage strong{font-size:20px}
}
@media(max-width:420px){
 .info-panel .viz-grid-four,.info-panel .viz-grid-three,.info-panel .viz-meds{grid-template-columns:repeat(2,minmax(0,1fr))}
 .info-panel .viz-metric-value{font-size:29px}
 .info-panel .viz-function{flex-direction:column;gap:9px}
 .info-panel .viz-strategy-grid{grid-template-columns:1fr}
 .info-panel .viz-flow{grid-template-columns:1fr 1fr}
 .info-panel .viz-chart-scroll img{min-width:580px}
}