/* ============================================================ charts.css · styling for window.TICharts (svg-charts.js) Theme tokens ONLY — every colour is a product.css custom property (var(--accent), var(--text), …) so each chart flips light/dark automatically when changes. No hardcoded hex. No @import. No url() to any external host. product.css loads FIRST and owns the tokens used here: --text --text-dim --accent --accent-deep --surface --surface-2 --border --ok --paper --bg-warm (plus --accent-soft / --accent-pale / --radius* where handy). A recent bug shipped a hardcoded cream that did not flip to dark — these styles avoid that by never naming a colour directly. color-mix is used only to tint existing tokens. ============================================================ */ /* ---- ring -------------------------------------------------- */ .ti-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .ti-ring svg { display: block; } .ti-ring-track { stroke: var(--surface-2); /* a faint edge so the track reads on very light surfaces */ stroke: color-mix(in srgb, var(--border) 70%, var(--surface-2)); } .ti-ring-arc { stroke: var(--accent); transition: stroke-dasharray 900ms cubic-bezier(0.22, 1, 0.36, 1); } /* reduced motion: no draw-in animation */ .ti-ring-arc[data-reduced="true"] { transition: none; } @media (prefers-reduced-motion: reduce) { .ti-ring-arc { transition: none; } } .ti-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; } .ti-ring-pct { font-size: 1.6rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; } .ti-ring-sub { font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; max-width: 80%; } /* ---- donut ------------------------------------------------- */ .ti-donut { display: flex; flex-direction: column; align-items: center; gap: 12px; } .ti-donut-svgwrap { position: relative; display: inline-flex; } .ti-donut-svgwrap svg { display: block; } .ti-donut-track { stroke: color-mix(in srgb, var(--border) 60%, var(--surface-2)); } /* default + emphasis segment colours, overridable by .cls on the segment */ .ti-donut-arc { stroke: var(--accent); } .ti-donut-arc.seg-pi { stroke: var(--accent); } .ti-donut-arc.seg-tax { stroke: var(--accent-deep); } .ti-donut-arc.seg-alt { stroke: color-mix(in srgb, var(--accent) 45%, var(--surface)); } .ti-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; } .ti-donut-cval { font-size: 1.15rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .ti-donut-clabel { font-size: 0.68rem; color: var(--text-dim); margin-top: 1px; } .ti-donut-legend { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 280px; } .ti-donut-legrow { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text); } .ti-donut-swatch { width: 11px; height: 11px; border-radius: 3px; background: var(--accent); flex: 0 0 auto; } .ti-donut-swatch.seg-pi { background: var(--accent); } .ti-donut-swatch.seg-tax { background: var(--accent-deep); } .ti-donut-swatch.seg-alt { background: color-mix(in srgb, var(--accent) 45%, var(--surface)); } .ti-donut-leglabel { color: var(--text-dim); } .ti-donut-legval { margin-left: auto; font-weight: 600; color: var(--text); } /* ---- bars -------------------------------------------------- */ .ti-bars { display: flex; flex-direction: column; gap: 10px; width: 100%; } .ti-bar-row { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 10px; } .ti-bar-label { font-size: 0.82rem; color: var(--text-dim); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ti-bar-track { position: relative; height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--border) 55%, var(--surface-2)); overflow: hidden; } .ti-bar-fill { position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 999px; background: var(--accent); transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1); min-width: 3px; } .ti-bar-fill.is-emph { background: var(--accent-deep); } @media (prefers-reduced-motion: reduce) { .ti-bar-fill { transition: none; } } /* n/a track: a thin dashed neutral line, visibly "no data" */ .ti-bar-na { position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 2px dashed color-mix(in srgb, var(--text-dim) 45%, transparent); } .ti-bar-value { font-size: 0.82rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } .ti-bar-value-na { font-weight: 500; color: var(--text-dim); font-style: italic; } /* screen-reader-only text inside a fill */ .ti-bar-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- gauge ------------------------------------------------- */ .ti-gauge { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; max-width: 260px; } .ti-gauge svg { display: block; width: 100%; height: auto; } .ti-gauge-track { stroke: color-mix(in srgb, var(--border) 60%, var(--surface-2)); } .ti-gauge-arc { stroke: var(--accent); } .ti-gauge-threshold { stroke: var(--accent-deep); } .ti-gauge-needle { stroke: var(--text); } .ti-gauge-hub { fill: var(--text); } .ti-gauge-label { font-size: 0.9rem; font-weight: 600; color: var(--text); text-align: center; } .ti-gauge-note { font-size: 0.72rem; color: var(--text-dim); text-align: center; max-width: 90%; } /* ---- areaLocator ------------------------------------------ */ .ti-arealoc { width: 100%; max-width: 320px; margin-inline: auto; } .ti-arealoc svg { display: block; width: 100%; height: auto; border-radius: var(--radius, 14px); border: 1px solid var(--border); background: var(--surface); } .ti-arealoc-land { fill: var(--bg-warm); } .ti-arealoc-water { fill: color-mix(in srgb, var(--accent) 22%, var(--surface)); stroke: color-mix(in srgb, var(--accent) 38%, transparent); stroke-width: 0.4; } .ti-arealoc-coast { stroke: color-mix(in srgb, var(--accent) 50%, transparent); stroke-width: 0.6; stroke-linecap: round; } .ti-arealoc-halo { fill: color-mix(in srgb, var(--accent) 22%, transparent); } .ti-arealoc-dot { fill: var(--accent-deep); stroke: var(--surface); stroke-width: 0.8; } .ti-arealoc-label { fill: var(--text); font-size: 4.4px; font-weight: 600; font-family: var(--sans, system-ui, sans-serif); paint-order: stroke; stroke: var(--surface); stroke-width: 1.1px; stroke-linejoin: round; } /* ---- shared empty / fallback node ------------------------- */ .ti-chart-empty { min-height: 1px; } /* ============================================================ Responsive pass — shrink gracefully under 480px. ============================================================ */ @media (max-width: 480px) { .ti-ring-pct { font-size: 1.35rem; } .ti-ring-sub { font-size: 0.68rem; } .ti-bar-row { grid-template-columns: 64px 1fr auto; gap: 8px; } .ti-bar-label { font-size: 0.76rem; } .ti-bar-value { font-size: 0.78rem; } .ti-donut-legend { max-width: 100%; } .ti-donut-legrow { font-size: 0.78rem; } .ti-gauge { max-width: 220px; } .ti-gauge-note { font-size: 0.68rem; } .ti-arealoc { max-width: 100%; } } /* Very narrow: stack the bar value under the track if room is tight. */ @media (max-width: 340px) { .ti-bar-row { grid-template-columns: 56px 1fr; grid-template-areas: "label track" "label value"; row-gap: 2px; } .ti-bar-label { grid-area: label; align-self: center; } .ti-bar-track { grid-area: track; } .ti-bar-value { grid-area: value; text-align: left; font-size: 0.72rem; } }