/*
 * The4thPeopleVerse 7 — charts (front end + admin).
 * Dependency-free HTML/SVG charts rendered by inc/charts.php.
 * Colour rules: one hue for single-series charts; section charts always use the
 * section's own hue (fixed order, never cycled); text never wears a series colour.
 */
.tpv-chart{
  --c-s0:#D9661A; --c-s1:#1F5BC9; --c-s2:#0E8C76; --c-s3:#6F58C9; --c-s4:#C93D64;
  --c-x:#8794AB;
  --chart-1:#1F5BC9; --chart-hi:#E0761F;
  --chart-text:var(--heading,#0E1F3D); --chart-muted:var(--muted,#5D6A82);
  --chart-grid:var(--line,#E0E6EF); --chart-track:var(--mist,#F3F6FA); --chart-surface:var(--surface,#fff);
  position:relative;
}
[data-theme="dark"] .tpv-chart,.pulse-section .tpv-chart,.tpv-roi-results .tpv-chart,.tpv-chart.on-dark{
  --c-s0:#EE8A45; --c-s1:#6EA2F2; --c-s2:#3CC2A6; --c-s3:#A693F2; --c-s4:#EC7499;
  --c-x:#7D8CA8; --chart-1:#6EA2F2; --chart-hi:#F59A55;
  --chart-text:#F1F5FB; --chart-muted:#93A6C6; --chart-grid:rgba(255,255,255,.09); --chart-track:rgba(255,255,255,.07); --chart-surface:#0A1730;
}
[data-theme="dark"] .tpv-chart{--chart-surface:var(--surface)}
.s0{--c:var(--c-s0)} .s1{--c:var(--c-s1)} .s2{--c:var(--c-s2)} .s3{--c:var(--c-s3)} .s4{--c:var(--c-s4)}
.c0{--c:var(--c-s1)} .c1{--c:var(--c-s0)} .c2{--c:var(--c-s2)} .c3{--c:var(--c-s3)} .c4{--c:var(--c-s4)} .c5{--c:var(--c-x)}
.tpv-chart [data-tip]{cursor:default}

/* ---------- vertical bars ---------- */
.tpv-vbars{display:flex;align-items:stretch;gap:8px;height:220px;padding-top:6px;position:relative}
.vb-grid{position:absolute;inset:6px 0 26px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.vb-grid i{border-top:1px dashed var(--chart-grid)}
.vb-grid i:last-child{border-top-style:solid}
.vb{position:relative;flex:1;display:flex;flex-direction:column;min-width:0}
.vb-col{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.vb-bar{display:block;width:min(100%,38px);height:var(--h);min-height:2px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,color-mix(in srgb,var(--bar,var(--chart-1)) 80%,#fff),var(--bar,var(--chart-1)));transform-origin:50% 100%;transform:scaleY(0);transition:transform 1s cubic-bezier(.16,1,.3,1),filter .2s,opacity .2s;transition-delay:calc(var(--i) * 60ms)}
.vb.is-current .vb-bar{--bar:var(--chart-hi)}
.vb-val{position:absolute;bottom:calc(var(--h) + 4px);font-size:.74rem;font-weight:650;color:var(--chart-text);font-variant-numeric:tabular-nums;opacity:0;transition:opacity .4s;transition-delay:calc(.5s + var(--i) * 60ms)}
.vb-lab{height:26px;padding-top:7px;text-align:center;font-size:.72rem;color:var(--chart-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vb:hover .vb-bar{filter:brightness(1.12)}
.tpv-vbars:hover .vb:not(:hover) .vb-bar{opacity:.55}
.vbars--mini{height:96px;gap:4px}
.vbars--mini .vb-lab{font-size:.62rem;height:20px;padding-top:4px}
.vbars--mini .vb-grid{inset:6px 0 20px}
.vbars--mini .vb-grid i:not(:last-child){border-color:transparent}
.glance .vbars--mini{--bar:var(--sec,var(--chart-1))}

/* ---------- horizontal bars ---------- */
.tpv-hbars{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tpv-hbars li{display:grid;gap:6px;min-width:0}
.hb-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.86rem;min-width:0}
.hb-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--chart-text);font-weight:550}
.hb-label a{color:inherit;text-decoration:none}
.hb-label a:hover{text-decoration:underline;text-underline-offset:3px}
.hb-top b{flex:none;font-variant-numeric:tabular-nums;color:var(--chart-text);font-weight:650}
.hb-track{display:block;height:8px;border-radius:8px;background:var(--chart-track);overflow:hidden}
.hb-track i{display:block;height:100%;width:var(--w);border-radius:8px;background:var(--bar,var(--chart-1));transform-origin:0 50%;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 80ms)}
.tpv-hbars li[data-sec="hr"] .hb-track i{background:var(--c-s0)}
.tpv-hbars li[data-sec="solutions"] .hb-track i{background:var(--c-s1)}
.tpv-hbars li[data-sec="cio-insights"] .hb-track i{background:var(--c-s2)}
.tpv-hbars li[data-sec="cso-insights"] .hb-track i{background:var(--c-s3)}
.tpv-hbars li[data-sec="news"] .hb-track i{background:var(--c-s4)}
.hr-hub .tpv-hbars,.sb-hr .tpv-hbars,.tpv-hr-bars{--bar:var(--c-s0)}
.glance .tpv-hbars{--bar:var(--sec,var(--chart-1))}
.hbars--compact{gap:10px}
.hbars--compact .hb-top{font-size:.82rem}
.hbars--compact .hb-track{height:6px}
.tpv-hbars li:hover .hb-track i{filter:brightness(1.1)}

/* ---------- donut ---------- */
.tpv-donut{display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:22px;align-items:center}
.donut-fig{position:relative}
.donut-fig svg{display:block;width:100%;height:auto;overflow:visible}
.donut-fig .track{fill:none;stroke:var(--chart-track);stroke-width:5}
.donut-fig .seg{fill:none;stroke:var(--c);stroke-width:5;stroke-linecap:butt;stroke-dasharray:0 100;stroke-dashoffset:var(--o);transition:stroke-dasharray 1.2s cubic-bezier(.16,1,.3,1),stroke-width .2s;transition-delay:calc(var(--i) * 120ms)}
.donut-fig .seg:hover{stroke-width:6.6}
.donut-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.donut-center b{font-family:var(--font-display,inherit);font-size:1.7rem;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--chart-text);font-variant-numeric:tabular-nums}
.donut-center small{font-size:.74rem;color:var(--chart-muted)}
.donut-legend{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.donut-legend li{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;font-size:.86rem;color:var(--chart-text)}
.donut-legend i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.donut-legend a{color:inherit;text-decoration:none}
.donut-legend a:hover{text-decoration:underline;text-underline-offset:3px}
.donut-legend b{font-variant-numeric:tabular-nums;font-weight:650}
.donut--small{grid-template-columns:96px 1fr;gap:14px}
.donut--small .donut-center b{font-size:1.15rem}
.donut--small .donut-legend li{font-size:.8rem}
@media (max-width:420px){.tpv-donut:not(.donut--small){grid-template-columns:1fr;justify-items:center}.tpv-donut:not(.donut--small) .donut-fig{width:170px}.donut-legend{width:100%}}

/* ---------- area / line ---------- */
.tpv-area{color:var(--chart-1)}
.ar-plot{position:relative;height:210px}
.ar-plot svg{display:block;width:100%;height:100%;overflow:visible}
.ar-grid line{stroke:var(--chart-grid);stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.ar-line{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1)}
.ar-fill{opacity:0;transition:opacity 1s ease .7s}
.ar-hits{position:absolute;inset:0}
.ar-hits span{position:absolute;top:0;bottom:0;left:var(--x);width:28px;margin-left:-14px}
.ar-hits span:before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed var(--chart-muted);opacity:0;transition:opacity .15s}
.ar-hits span:after{content:"";position:absolute;left:50%;top:var(--y);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px var(--chart-surface);opacity:0;transform:scale(.4);transition:opacity .15s,transform .2s}
.ar-hits span:hover:before,.ar-hits span:hover:after,.ar-hits span.is-on:before,.ar-hits span.is-on:after{opacity:1;transform:none}
.ar-hits span:first-child{margin-left:0}
.ar-hits span:last-child{margin-left:-28px}
.ar-axis{position:relative;height:24px;margin-top:6px}
.ar-axis span{position:absolute;left:var(--x);transform:translateX(-50%);font-size:.72rem;color:var(--chart-muted);white-space:nowrap}
.ar-axis span:first-child{transform:none}
.ar-axis span:last-child:not(:first-child){transform:translateX(-100%)}
.c-teal{--chart-1:#0E8C76}
[data-theme="dark"] .c-teal{--chart-1:#3CC2A6}

/* ---------- sparkline ---------- */
.tpv-spark{display:block;width:100%;height:30px;margin-top:10px}
.tpv-spark polyline{fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:tpvc-draw 1.6s cubic-bezier(.65,0,.35,1) .3s forwards}

/* ---------- lollipop (country comparison) ---------- */
.tpv-lolli{position:relative;padding-top:22px}
.tpv-lolli ol{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.ll-row{display:grid;grid-template-columns:minmax(120px,170px) 1fr 70px;align-items:center;gap:14px;padding:5px 6px;border-radius:8px;transition:background .2s}
.ll-row:hover{background:var(--chart-track)}
.ll-country{display:flex;align-items:center;gap:9px;min-width:0;font-size:.86rem;color:var(--chart-text)}
.ll-country b{flex:none;display:inline-grid;place-items:center;min-width:28px;height:20px;padding:0 5px;border-radius:6px;background:var(--chart-track);font-size:.7rem;font-weight:750;color:var(--chart-muted)}
.ll-country span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ll-track{position:relative;height:14px}
.ll-stem{position:absolute;left:0;top:50%;height:2px;width:var(--w);margin-top:-1px;background:color-mix(in srgb,var(--chart-1) 55%,transparent);transform-origin:0 50%;transform:scaleX(0);transition:transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 55ms)}
.ll-dot{position:absolute;top:50%;left:var(--w);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--chart-1);box-shadow:0 0 0 3px var(--chart-surface);transform:scale(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.45s + var(--i) * 55ms)}
.ll-row.is-max .ll-dot{background:var(--chart-hi)}
.ll-row.is-home .ll-dot{background:var(--chart-hi);box-shadow:0 0 0 3px var(--chart-surface),0 0 0 6px color-mix(in srgb,var(--chart-hi) 30%,transparent)}
.ll-row.is-zero .ll-dot{background:var(--chart-surface);border:2px solid var(--chart-muted)}
.ll-row.is-na .ll-track:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--chart-grid)}
.ll-val{text-align:right;font-weight:700;color:var(--chart-text);font-variant-numeric:tabular-nums;font-size:.92rem}
.ll-val small{margin-left:4px;font-weight:500;font-size:.72rem;color:var(--chart-muted)}
.ll-median{position:absolute;top:0;bottom:0;left:calc(min(170px,30%) + 6px + 14px);right:calc(70px + 14px + 6px);pointer-events:none}
.ll-median:before{content:"";position:absolute;top:18px;bottom:0;left:var(--med);border-left:1px dashed var(--chart-muted);opacity:.6}
.ll-median em{position:absolute;top:0;left:var(--med);transform:translateX(-50%);font-style:normal;font-size:.7rem;color:var(--chart-muted);white-space:nowrap}
.bench--compact .ll-row{grid-template-columns:minmax(100px,140px) 1fr 62px;gap:10px}
.bench--compact .ll-median{left:calc(min(140px,30%) + 6px + 10px);right:calc(62px + 10px + 6px)}
@media (max-width:560px){.ll-row,.bench--compact .ll-row{grid-template-columns:44px 1fr 56px;gap:8px}.ll-country span{display:none}.ll-median,.bench--compact .ll-median{left:calc(44px + 6px + 8px);right:calc(56px + 8px + 6px)}}

/* ---------- treemap ---------- */
.tm-box{position:relative;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden}
.tm-cell{position:absolute;display:block;padding:2px;text-decoration:none;opacity:0;transform:scale(.92);transition:opacity .6s,transform .7s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 45ms)}
.tm-in{display:flex;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:8px 10px;border-radius:8px;background:var(--g,var(--chart-1));color:#fff;overflow:hidden;transition:filter .2s}
.tm-cell:hover .tm-in{filter:brightness(1.12) saturate(1.1)}
.tm-in b{font-size:.8rem;font-weight:650;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.tm-in small{font-family:var(--font-display,inherit);font-size:1.05rem;font-weight:700;opacity:.9}
.tm-cell.is-small b{font-size:.7rem;-webkit-line-clamp:2}
.tm-cell.is-small small{font-size:.8rem}
.tm-cell.is-tiny b{display:none}
.tm-cell.is-tiny .tm-in{justify-content:center;align-items:center;padding:2px}

/* ---------- article figures & stats ---------- */
.tpv-figure{margin:2em 0;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.tf-title{display:flex;align-items:center;gap:9px;margin-bottom:18px;font-weight:700;color:var(--heading);font-size:1rem;text-align:left}
.tf-title .tpv-icon{color:var(--muted)}
.tf-foot{margin:14px 0 0;font-size:.8rem;color:var(--muted)}
.tf-foot span{margin-left:4px}
.tpv-stat{display:grid;gap:6px;margin:2em 0;padding:22px 26px;border-left:4px solid var(--sec,var(--orange));border-radius:0 16px 16px 0;background:var(--mist)}
.ts-num{font-family:var(--font-display,inherit);font-size:clamp(2.4rem,5vw,3.4rem);font-weight:750;line-height:1;color:var(--heading);letter-spacing:-.03em}
.ts-label{font-size:1.02rem;color:var(--text);line-height:1.5}
.ts-src{font-size:.8rem;color:var(--muted)}

/* ---------- reveal (charts animate when they scroll into view) ---------- */
.in .vb-bar,.tpv-chart.in .vb-bar,.autoplay .vb-bar{transform:scaleY(1)}
.in .vb-val,.tpv-chart.in .vb-val,.autoplay .vb-val{opacity:1}
.in .hb-track i,.tpv-chart.in .hb-track i,.autoplay .hb-track i{transform:scaleX(1)}
.in .seg,.tpv-chart.in .seg,.autoplay .seg{stroke-dasharray:var(--p) calc(100 - var(--p))}
.in .ar-line,.tpv-chart.in .ar-line,.autoplay .ar-line{stroke-dashoffset:0}
.in .ar-fill,.tpv-chart.in .ar-fill,.autoplay .ar-fill{opacity:1}
.in .ll-stem,.tpv-chart.in .ll-stem,.autoplay .ll-stem{transform:scaleX(1)}
.in .ll-dot,.tpv-chart.in .ll-dot,.autoplay .ll-dot{transform:scale(1)}
.in .tm-cell,.tpv-chart.in .tm-cell,.autoplay .tm-cell{opacity:1;transform:none}
html:not(.js) .vb-bar,html:not(.js) .hb-track i,html:not(.js) .ll-stem{transform:none}
html:not(.js) .ll-dot,html:not(.js) .tm-cell{transform:none;opacity:1}
html:not(.js) .vb-val,html:not(.js) .ar-fill{opacity:1}
html:not(.js) .seg{stroke-dasharray:var(--p) calc(100 - var(--p))}
html:not(.js) .ar-line{stroke-dashoffset:0}
@keyframes tpvc-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .vb-bar,.hb-track i,.seg,.ar-line,.ar-fill,.vb-val,.ll-stem,.ll-dot,.tm-cell{transition:none!important}
  .vb-bar,.hb-track i,.ll-stem,.ll-dot,.tm-cell{transform:none!important}
  .vb-val,.ar-fill,.tm-cell{opacity:1!important}
  .seg{stroke-dasharray:var(--p) calc(100 - var(--p))!important}
  .ar-line,.tpv-spark polyline{stroke-dashoffset:0!important;animation:none!important}
}
.vbars--regions .vb-lab{white-space:normal;line-height:1.15;height:34px;font-size:.68rem}
.vbars--regions .vb-grid{inset:6px 0 34px}