/* chart kit styles (WP8). Logical properties only; scoped under .sh-* */
.sh-chart { --sh-c0: var(--water); --sh-c1: var(--brass-500); --sh-c2: var(--veg); --sh-c3: var(--land); --sh-c4: var(--ink-500); --sh-c5: var(--claim-bad); margin: 0; max-inline-size: 100%; }
.sh-line-wrap, .sh-bars, .sh-share, .sh-table-wrap { --sh-c0: var(--water); --sh-c1: var(--brass-500); --sh-c2: var(--veg); --sh-c3: var(--land); --sh-c4: var(--ink-500); --sh-c5: var(--claim-bad); }
.sh-spark { --sh-c0: var(--water); --sh-c1: var(--brass-500); --sh-c2: var(--veg); --sh-c3: var(--land); --sh-c4: var(--ink-500); --sh-c5: var(--claim-bad); }
.sh-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-block-end: 8px; min-block-size: 0; }
.sh-chart-title { font-weight: 700; font-size: var(--fs-body); color: var(--ink-900); min-inline-size: 0; }
.sh-chart-tools { display: flex; gap: 2px; flex-wrap: wrap; }
.sh-chart-body { min-inline-size: 0; }
.sh-chart-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-block-start: 8px; }

/* colour classes shared by line, bars, shares, legend keys */
.c0 { --c: var(--sh-c0); } .c1 { --c: var(--sh-c1); } .c2 { --c: var(--sh-c2); } .c3 { --c: var(--sh-c3); } .c4 { --c: var(--sh-c4); } .c5 { --c: var(--sh-c5); }

/* line */
.sh-line { display: block; inline-size: 100%; block-size: auto; max-block-size: 340px; overflow: visible; }
.sh-grid { stroke: var(--sand-200); stroke-width: 1; }
.sh-grid.zero { stroke: var(--sand-300); stroke-width: 1.5; }
.sh-tick { fill: var(--ink-500); font-size: 12px; font-family: var(--font-sans); }
.sh-unit { fill: var(--ink-700); font-size: 12px; font-weight: 700; font-family: var(--font-sans); }
.sh-path { fill: none; stroke: var(--c); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: sh-draw .9s var(--ease) both; }
.sh-path.dash { stroke-dasharray: 0.02 0.018; animation: none; stroke-width: 2.2; }
.sh-pt { fill: var(--white); stroke: var(--c); stroke-width: 2.2; }
.sh-pt:hover { r: 5.4; }
@keyframes sh-draw { from { stroke-dashoffset: 1; } }

/* legends and keys */
.sh-legend, .sh-share-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-block-start: 8px; font-size: var(--fs-small); color: var(--ink-700); }
.sh-key::before { content: ""; display: inline-block; inline-size: 14px; block-size: 6px; border-radius: 3px; margin-inline-end: 7px; background: var(--c); vertical-align: middle; }
.sh-key.dash::before { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }

/* bars (HTML, direction-aware) */
.sh-bars { display: flex; flex-direction: column; gap: 8px; }
.sh-bar-row { display: grid; grid-template-columns: minmax(80px, 30%) 1fr auto; align-items: center; gap: 12px; font-size: var(--fs-small); }
.sh-bar-row.sub { grid-template-columns: 1fr auto; }
.sh-bar-lbl { color: var(--ink-800); min-inline-size: 0; overflow-wrap: anywhere; }
.sh-group { display: flex; flex-direction: column; gap: 3px; padding-block-end: 8px; border-block-end: 1px solid var(--sand-200); }
.sh-group:last-child { border-block-end: 0; }
.sh-group-lbl { font-weight: 700; }
.sh-bar-track { position: relative; block-size: 18px; background: var(--sand-100); border-radius: 4px; overflow: hidden; }
.sh-bars.grouped .sh-bar-track { block-size: 12px; }
.sh-bar { position: absolute; inset-block: 0; background: var(--c); border-radius: 3px; animation: sh-grow .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); transform-origin: 0 50%; }
html[dir="rtl"] .sh-bar { transform-origin: 100% 50%; }
.sh-zero { position: absolute; inset-block: 0; inline-size: 1px; background: var(--ink-500); }
.sh-bar-val { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
@keyframes sh-grow { from { transform: scaleX(0); } }

/* share */
.sh-share-bar { display: flex; block-size: 26px; border-radius: 6px; overflow: hidden; background: var(--sand-200); gap: 2px; }
.sh-seg { display: block; block-size: 100%; background: var(--c); transition: flex-grow .4s var(--ease); }
.sh-share-legend { flex-direction: column; gap: 4px; }
.sh-share-item { display: flex; justify-content: space-between; gap: 12px; border-block-end: 1px dotted var(--sand-300); padding-block: 2px; }

/* table */
.sh-table-wrap { overflow-x: auto; max-inline-size: 100%; border: 1px solid var(--sand-200); border-radius: var(--radius-sm); }
.sh-table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.sh-table th, .sh-table td { padding: 6px 12px; text-align: start; border-block-end: 1px solid var(--sand-200); }
.sh-table th { background: var(--sand-100); font-weight: 700; white-space: nowrap; }
.sh-table td.num { font-variant-numeric: tabular-nums; }
.sh-table tr:last-child td { border-block-end: 0; }
.sh-unit-note { padding: 4px 12px; }

/* sparkline */
.sh-spark { display: inline-block; vertical-align: middle; overflow: visible; }
.sh-spark-line { fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.sh-spark-fill { fill: var(--c); opacity: .12; stroke: none; }
.sh-spark-dot { fill: var(--c); }

@media (prefers-reduced-motion: reduce) {
  .sh-path, .sh-bar { animation: none; }
}
@media (max-width: 720px) { .sh-bar-row { grid-template-columns: 1fr auto; } .sh-bar-row .sh-bar-lbl { grid-column: 1 / -1; } }