/* Charts and report tiles. Colours are the validated categorical order (blue, orange, aqua, yellow, magenta, green, violet, red); dark mode uses its own steps. */
:root { --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300; --c7: #6250d6; --c8: #e34948; --ch-grid: rgba(0,0,0,.08); --ch-good: #0a7d3a; --ch-bad: #c0392b; }
:root[data-theme="dark"] { --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767; --ch-grid: rgba(255,255,255,.12); --ch-good: #3fbf7a; --ch-bad: #ef7b6e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767; --ch-grid: rgba(255,255,255,.12); --ch-good: #3fbf7a; --ch-bad: #ef7b6e; } }
.c1 { --c: var(--c1); } .c2 { --c: var(--c2); } .c3 { --c: var(--c3); } .c4 { --c: var(--c4); } .c5 { --c: var(--c5); } .c6 { --c: var(--c6); } .c7 { --c: var(--c7); } .c8 { --c: var(--c8); }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); flex: none; }
.seg-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin: 10px 0; scrollbar-width: none; } .seg-tabs::-webkit-scrollbar { display: none; }
.seg-tabs .chip { flex: none; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; min-width: 0; }
.kpi span.l { display: block; color: var(--muted); font-size: .82rem; } .kpi b { display: block; font-size: 1.3rem; margin: 2px 0; overflow-wrap: anywhere; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: .8rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--d) 14%, transparent); color: var(--d); } .delta.up { --d: var(--ch-good); } .delta.down { --d: var(--ch-bad); } .delta.flat { --d: var(--muted); }
.donut-wrap { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.donut { width: 190px; height: 190px; flex: none; } .donut text { fill: currentColor; text-anchor: middle; } .donut .big { font-size: 20px; font-weight: 700; } .donut .small { font-size: 11px; fill: var(--muted); }
.donut path, .donut circle { stroke: var(--surface); stroke-width: 2; }
.legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 170px; display: grid; gap: 6px; }
.legend li { display: flex; align-items: center; gap: 8px; font-size: .9rem; } .legend .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .legend .pc { font-weight: 700; } .legend .vl { color: var(--muted); font-size: .8rem; }
.hbars { display: grid; gap: 10px; } .hb .top { display: flex; justify-content: space-between; gap: 8px; font-size: .9rem; } .hb .top .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .hb .top .vl { font-weight: 700; white-space: nowrap; }
.hb .track { height: 10px; border-radius: 6px; background: var(--ch-grid); overflow: hidden; margin-top: 4px; } .hb .fill { height: 100%; border-radius: 6px; background: var(--c); } .hb .sub { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.pill { display: inline-block; font-size: .75rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--muted)) 16%, transparent); color: var(--ink, inherit); border: 1px solid color-mix(in srgb, var(--c, var(--muted)) 55%, transparent); }
.chart-svg { width: 100%; height: auto; display: block; overflow: visible; } .chart-svg text { fill: var(--muted); font-size: 10px; } .chart-svg .grid { stroke: var(--ch-grid); stroke-width: 1; } .chart-svg .lbl { fill: currentColor; font-weight: 700; }
.stackbar { display: flex; height: 22px; border-radius: 8px; overflow: hidden; gap: 2px; background: var(--ch-grid); } .stackbar i { background: var(--c); display: block; min-width: 3px; }
.tip { border-inline-start: 4px solid var(--c, var(--c1)); background: var(--surface); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-inline-end: 1px solid var(--line); }
.tip .ic { flex: none; } .tip b { display: block; } .tip span { font-size: .85rem; color: var(--muted); }
.cheap { color: var(--ch-good); font-weight: 700; } .best { background: color-mix(in srgb, var(--ch-good) 14%, transparent); border-radius: 6px; padding: 0 4px; }
.sup-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: .88rem; border-top: 1px dashed var(--line); } .sup-row:first-child { border-top: 0; }
@media (forced-colors: active) { .sw, .hb .fill, .stackbar i { forced-color-adjust: none; } }
.chart-svg { direction: ltr; }
.rep-g { font-size: 1rem; color: var(--muted); margin: 18px 4px 6px; }
.menu a .pill { display: inline-block; }
.strong { font-weight: 800; } td .neg, .neg { color: var(--ch-bad); }