/* Article bar charts (figure.native-chart). The one stylesheet for every chart in
   every post: posts ship chart markup only, never chart CSS (kv blog lint refuses
   it). The extra .blog-post class outranks the copies two older posts still carry
   inline, so this file wins at every width without editing their content.
   Phone first and compact: label and bar share one line. Flat, house colours. */
.blog-post .article .col .native-chart{margin:24px 0;padding:14px 12px;background:#fff;color:#0a0a0a;font-family:Inter,Arial,sans-serif;max-width:100%;min-width:0}
.blog-post .article .col .native-chart *{box-sizing:border-box}
.blog-post .article .col .native-chart h3{font-size:21px;font-weight:500;letter-spacing:-.5px;line-height:1.15;margin:0 0 6px;max-width:none}
.blog-post .article .col .native-chart .nc-intro{font-size:13.5px;line-height:1.4;color:#666;margin:0 0 10px;max-width:none}
.blog-post .article .col .native-chart .nc-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 10px;font-size:12.5px;line-height:1.45;color:#666}
.blog-post .article .col .native-chart .nc-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}
.blog-post .article .col .native-chart .nc-row{display:grid;grid-template-columns:minmax(0,36%) minmax(0,1fr);gap:10px;align-items:center;margin:6px 0}
.blog-post .article .col .native-chart .nc-label{font-size:13.5px;line-height:1.25;color:#666}
.blog-post .article .col .native-chart .nc-plot{position:relative;height:18px;margin-right:64px;min-width:0}
.blog-post .article .col .native-chart .nc-bar{width:var(--nc-width);height:100%;background:var(--nc-color);border-radius:0 3px 3px 0}
.blog-post .article .col .native-chart .nc-value{position:absolute;left:calc(var(--nc-width) + 6px);top:0;font-size:13.5px;line-height:18px;font-weight:500;white-space:nowrap}
.blog-post .article .col .native-chart .nc-group{margin:14px 0}
.blog-post .article .col .native-chart h4{font-size:15px;font-weight:500;letter-spacing:-.2px;line-height:1.3;margin:0 0 2px}
.blog-post .article .col .native-chart .nc-detail{font-size:12.5px;color:#666;line-height:1.4;margin:0 0 6px;max-width:none}
.blog-post .article .col .native-chart .nc-empty{font-size:13.5px;line-height:1.3;color:#0a0a0a}
.blog-post .article .col .native-chart .nc-quote{font-size:15.5px;line-height:1.35;margin:10px 0 0;max-width:none}
.blog-post .article .col .native-chart .nc-quote span{font-size:12px;color:#666}
.blog-post .article .col .native-chart .nc-foot{display:flex;align-items:end;gap:12px;margin-top:10px}
.blog-post .article .col .native-chart .nc-foot figcaption{font-size:11px;line-height:1.4;color:#666;flex:1;min-width:0}
.blog-post .article .col .native-chart .nc-logo{display:block;width:24px!important;height:24px!important;max-height:none;margin:0!important;border-radius:0;flex:none}

@media(min-width:601px){
.blog-post .article .col .native-chart{margin:30px 0;padding:16px 18px}
.blog-post .article .col .native-chart h3{font-size:26px;letter-spacing:-.8px;line-height:1.2;margin:0 0 12px;max-width:38ch}
.blog-post .article .col .native-chart .nc-intro{font-size:14px;line-height:1.5;margin:0 0 12px}
.blog-post .article .col .native-chart .nc-legend{gap:10px 22px;margin:0 0 16px;font-size:13px;line-height:1.5}
.blog-post .article .col .native-chart .nc-legend i{width:11px;height:11px;border-radius:3px;margin-right:7px}
.blog-post .article .col .native-chart .nc-row{grid-template-columns:minmax(150px,30%) minmax(0,1fr);gap:18px;margin:8px 0}
.blog-post .article .col .native-chart .nc-label{font-size:16px;line-height:1.35}
.blog-post .article .col .native-chart .nc-plot{height:22px;margin-right:112px}
.blog-post .article .col .native-chart .nc-bar{border-radius:0 4px 4px 0}
.blog-post .article .col .native-chart .nc-value{left:calc(var(--nc-width) + 10px);font-size:17px;line-height:22px}
.blog-post .article .col .native-chart .nc-group{margin:18px 0}
.blog-post .article .col .native-chart h4{font-size:17px;letter-spacing:-.3px;line-height:1.35;margin:0 0 6px}
.blog-post .article .col .native-chart .nc-detail{font-size:13px;line-height:1.5;margin:0 0 10px}
.blog-post .article .col .native-chart .nc-empty{font-size:16px;line-height:1.5}
.blog-post .article .col .native-chart .nc-quote{font-size:17px;line-height:1.45;margin:16px 0 0}
.blog-post .article .col .native-chart .nc-quote span{font-size:13px}
.blog-post .article .col .native-chart .nc-foot{gap:20px;margin-top:16px}
.blog-post .article .col .native-chart .nc-foot figcaption{font-size:11px;line-height:1.5}
.blog-post .article .col .native-chart .nc-logo{width:30px!important;height:30px!important}
}