/* Chintai Article Data Blocks R1 — server-rendered, JS-free public visualizations. */
.article-block--chart.article-block--layout-wide,
.article-block--stat_strip.article-block--layout-wide { max-width: var(--article-wide); }
.article-block--chart.article-block--layout-full,
.article-block--stat_strip.article-block--layout-full { max-width: var(--article-full); }
.article-block--chart,
.article-block--stat_strip { margin-bottom: 52px; margin-top: 46px; }

.article-chart,
.article-stat-strip {
  --data-0: #0f766e;
  --data-1: #405189;
  --data-2: #b7791f;
  --data-3: #7c3aed;
  margin: 0;
  border: 1px solid rgba(15,23,42,.09);
  border-radius: 22px;
  background: linear-gradient(180deg,#fff 0%,#fbfdfc 100%);
  box-shadow: 0 18px 45px rgba(15,23,42,.055);
  color: var(--article-text,#29374a);
}
.article-chart { padding: 26px 28px 22px; }
.article-chart__head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:22px; }
.article-chart__eyebrow,
.article-stat-strip__head > span { color:var(--article-accent,#0f766e); font-size:11px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.article-chart__head h3,
.article-stat-strip__head h3 { margin:5px 0 0; color:var(--article-heading,#0f172a); font-size:clamp(22px,2.5vw,28px); letter-spacing:-.025em; line-height:1.16; }
.article-chart__head p { max-width:720px; margin:8px 0 0; color:var(--article-muted,#66758a); font-size:14px; line-height:1.6; }
.article-chart__head time { flex:0 0 auto; border:1px solid rgba(15,118,110,.15); border-radius:999px; background:#f2faf7; color:#497267; font-size:11px; font-weight:750; padding:7px 10px; }
.article-chart__legend { display:flex; flex-wrap:wrap; gap:8px 18px; margin:-4px 0 18px; color:#536176; font-size:12px; }
.article-chart__legend span { display:inline-flex; align-items:center; gap:7px; }
.article-chart__swatch { width:10px; height:10px; border-radius:3px; display:inline-block; background:currentColor; }
.article-chart__series-0 { color:var(--data-0); }
.article-chart__series-1 { color:var(--data-1); }
.article-chart__series-2 { color:var(--data-2); }
.article-chart__series-3 { color:var(--data-3); }

.article-chart__hbars { display:grid; gap:16px; }
.article-chart__hbar-group { display:grid; grid-template-columns:minmax(120px,190px) minmax(0,1fr); gap:16px; align-items:start; }
.article-chart__category { color:#334155; font-size:12.5px; font-weight:750; line-height:1.35; }
.article-chart__hbar-stack { display:grid; gap:7px; }
.article-chart__hbar-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; }
.article-chart__hbar-row:has(.article-chart__series-name) { grid-template-columns:110px minmax(0,1fr) auto; }
.article-chart__series-name { color:#718096; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.article-chart__track { height:12px; overflow:hidden; border-radius:999px; background:#edf2f1; }
.article-chart__bar { display:block; width:var(--article-chart-pct); height:100%; min-width:2px; border-radius:inherit; background:currentColor; transition:width .18s ease; }
.article-chart__hbar-row strong,
.article-chart__stacked-row strong { color:#263648; font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.article-chart strong small { color:#8491a2; font-size:10px; font-weight:650; }

.article-chart__bars { display:grid; grid-template-columns:repeat(var(--article-chart-groups),minmax(54px,1fr)); gap:10px; min-height:330px; align-items:end; padding:26px 2px 0; border-bottom:1px solid #dfe7e4; overflow-x:auto; }
.article-chart__bar-group { min-width:54px; display:grid; gap:10px; align-self:stretch; grid-template-rows:minmax(230px,1fr) auto; }
.article-chart__bar-columns { display:flex; gap:5px; align-items:end; justify-content:center; min-height:230px; }
.article-chart__bar-column { flex:1 1 0; max-width:48px; height:100%; min-width:9px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:5px; }
.article-chart__bar-column .article-chart__bar { width:100%; height:var(--article-chart-pct); border-radius:8px 8px 2px 2px; }
.article-chart__bar-column strong { color:#536176; font-size:10px; font-variant-numeric:tabular-nums; }
.article-chart__x-label { min-height:34px; color:#637083; font-size:10.5px; font-weight:650; line-height:1.25; text-align:center; overflow-wrap:anywhere; }

.article-chart__stacked { display:grid; gap:14px; }
.article-chart__stacked-row { display:grid; grid-template-columns:minmax(110px,180px) minmax(0,1fr) auto; gap:12px; align-items:center; }
.article-chart__stacked-track { display:flex; height:18px; overflow:hidden; border-radius:999px; background:#edf2f1; }
.article-chart__stack-segment { width:var(--article-chart-pct); min-width:1px; height:100%; background:currentColor; }

.article-chart__line-wrap { overflow-x:auto; }
.article-chart__line { display:block; min-width:720px; width:100%; height:auto; }
.article-chart__gridline { stroke:#e5ebe9; stroke-width:1; }
.article-chart__line-path { fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.article-chart__line-point { fill:#fff; stroke:currentColor; stroke-width:3; }
.article-chart__y-label,.article-chart__x-svg-label { fill:#7b8797; font-family:Inter,system-ui,sans-serif; font-size:11px; }

.article-chart__donut-layout { display:grid; grid-template-columns:minmax(220px,.85fr) minmax(260px,1.15fr); gap:34px; align-items:center; }
.article-chart__donut-wrap { position:relative; max-width:300px; margin:auto; }
.article-chart__donut { display:block; width:100%; transform:rotate(-90deg); }
.article-chart__donut-base { fill:none; stroke:#edf2f1; stroke-width:7; }
.article-chart__donut-segment { fill:none; stroke:currentColor; stroke-width:7; }
.article-chart__donut-total { position:absolute; inset:0; display:grid; place-content:center; text-align:center; pointer-events:none; }
.article-chart__donut-total strong { color:#0f172a; font-size:28px; letter-spacing:-.035em; }
.article-chart__donut-total span { color:#7a8799; font-size:11px; }
.article-chart__donut-legend { display:grid; gap:10px; }
.article-chart__donut-legend > div { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding-bottom:9px; border-bottom:1px solid #edf1f0; }
.article-chart__donut-legend span { color:#536176; font-size:12.5px; }
.article-chart__donut-legend strong { color:#263648; font-size:12.5px; font-variant-numeric:tabular-nums; }

.article-chart__meta { display:flex; flex-wrap:wrap; gap:5px 16px; margin-top:20px; color:#7c8999; font-size:11px; line-height:1.55; }
.article-chart__meta a,.article-stat-strip__meta a { color:var(--article-accent,#0f766e); text-decoration:underline; text-underline-offset:3px; }
.article-chart__data { margin-top:14px; border-top:1px solid #edf1f0; padding-top:12px; }
.article-chart__data summary { cursor:pointer; color:#526276; font-size:11px; font-weight:750; }
.article-chart__table-scroll { margin-top:10px; overflow:auto; border:1px solid #e5e9e8; border-radius:12px; }
.article-chart__data table { width:100%; min-width:520px; border-collapse:collapse; font-size:11.5px; }
.article-chart__data th,.article-chart__data td { padding:9px 10px; border-bottom:1px solid #edf0ef; text-align:left; }
.article-chart__data thead th { background:#f7faf9; color:#526174; font-weight:800; }
.article-chart__data tbody th { color:#344256; font-weight:700; }
.article-chart__data td { color:#5f6e81; font-variant-numeric:tabular-nums; }

.article-stat-strip { padding:24px 26px 20px; }
.article-stat-strip__head { margin-bottom:18px; }
.article-stat-strip__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid #e5ebe9; border-radius:18px; overflow:hidden; background:#fff; }
.article-stat { min-width:0; padding:19px 18px 17px; border-right:1px solid #e5ebe9; }
.article-stat:last-child { border-right:0; }
.article-stat strong { display:block; color:#0f172a; font-size:clamp(24px,2.8vw,34px); font-weight:820; letter-spacing:-.04em; line-height:1.05; font-variant-numeric:tabular-nums; }
.article-stat span { display:block; margin-top:8px; color:#66758a; font-size:11.5px; font-weight:650; line-height:1.35; }
.article-stat-strip__meta { display:flex; flex-wrap:wrap; gap:5px 16px; margin-top:13px; color:#7c8999; font-size:10.5px; line-height:1.5; }

@media (max-width: 760px) {
  .article-block--chart,.article-block--stat_strip { margin-bottom:38px; margin-top:36px; }
  .article-chart,.article-stat-strip { border-radius:16px; }
  .article-chart { padding:20px 17px 17px; }
  .article-chart__head { display:grid; gap:10px; }
  .article-chart__head time { justify-self:start; }
  .article-chart__hbar-group { grid-template-columns:1fr; gap:7px; }
  .article-chart__hbar-row:has(.article-chart__series-name) { grid-template-columns:82px minmax(0,1fr) auto; }
  .article-chart__bars { min-height:285px; padding-top:18px; }
  .article-chart__bar-group { grid-template-rows:minmax(190px,1fr) auto; }
  .article-chart__bar-columns { min-height:190px; }
  .article-chart__stacked-row { grid-template-columns:1fr auto; }
  .article-chart__stacked-track { grid-column:1/-1; grid-row:2; }
  .article-chart__donut-layout { grid-template-columns:1fr; gap:22px; }
  .article-chart__donut-wrap { max-width:230px; }
  .article-stat-strip { padding:20px 17px 16px; }
  .article-stat-strip__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .article-stat { border-bottom:1px solid #e5ebe9; }
  .article-stat:nth-child(2n) { border-right:0; }
  .article-stat:nth-last-child(-n+2) { border-bottom:0; }
}

@media (max-width: 440px) {
  .article-chart__hbar-row,.article-chart__hbar-row:has(.article-chart__series-name) { grid-template-columns:1fr auto; }
  .article-chart__series-name { grid-column:1/-1; }
  .article-stat-strip__grid { grid-template-columns:1fr; }
  .article-stat { border-right:0; border-bottom:1px solid #e5ebe9 !important; }
  .article-stat:last-child { border-bottom:0 !important; }
}

@media print {
  .article-chart,.article-stat-strip { break-inside:avoid; box-shadow:none; }
  .article-chart__data { display:block; }
  .article-chart__data > summary { display:none; }
  .article-chart__table-scroll { display:block; }
}