/* Article-scoped charts: values remain available as HTML text. */
[data-article-slug="hiring-cost-ringi"] caption { padding: 14px 15px; text-align: left; color: #cbd2d7; font-size: .8rem; }
[data-article-slug="hiring-cost-ringi"] .ringi-chart { margin: 28px 0; padding: 26px; border: 1px solid #35434c; border-radius: 8px; background: #0b1217; }
[data-article-slug="hiring-cost-ringi"] .ringi-chart figcaption { color: #fff; font-weight: 700; line-height: 1.6; }
[data-article-slug="hiring-cost-ringi"] .ringi-chart figcaption span { display: block; margin-top: 5px; color: #9aa8b1; font-size: .75rem; font-weight: 400; }
[data-article-slug="hiring-cost-ringi"] .ringi-chart > p { margin: 18px 0 0; color: #9aa8b1; font-size: .76rem; }
[data-article-slug="hiring-cost-ringi"] .ringi-bars { display: grid; gap: 15px; margin-top: 25px; }
[data-article-slug="hiring-cost-ringi"] .ringi-bars > div { display: grid; grid-template-columns: 110px minmax(0,1fr) 40px; align-items: center; gap: 12px; font-size: .78rem; }
[data-article-slug="hiring-cost-ringi"] .ringi-bars i { display: block; width: var(--bar); height: 17px; background: #71838e; border-radius: 2px; }
[data-article-slug="hiring-cost-ringi"] .ringi-bars .is-accent i { background: #ff5a18; }
[data-article-slug="hiring-cost-ringi"] .ringi-bars b { text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
[data-article-slug="hiring-cost-ringi"] .ringi-stack { display: flex; margin: 25px 0 18px; overflow: hidden; border-radius: 4px; }
[data-article-slug="hiring-cost-ringi"] .ringi-stack span { flex: var(--share) 0 0; padding: 16px 0; text-align: center; background: var(--shade); color: #fff; font-size: .85rem; font-weight: 700; }
[data-article-slug="hiring-cost-ringi"] .ringi-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 0; padding: 0; list-style: none; font-size: .78rem; }
[data-article-slug="hiring-cost-ringi"] .ringi-legend b { margin-right: 10px; color: #fff; }
@media (max-width: 600px) {
  [data-article-slug="hiring-cost-ringi"] .ringi-chart { padding: 18px 14px; }
  [data-article-slug="hiring-cost-ringi"] .ringi-bars > div { grid-template-columns: 94px minmax(0,1fr) 30px; gap: 7px; font-size: .7rem; }
  [data-article-slug="hiring-cost-ringi"] .ringi-legend { grid-template-columns: 1fr; }
  [data-article-slug="hiring-cost-ringi"] .ringi-stack span { font-size: .7rem; }
}