/* Sales KPI dashboard & commission ledger (kpi/*, commissions/*). Built on prototype.css tokens.
   Product-line series colours (validated: lightness band, chroma floor, CVD ΔE ≥ 8 all pairs, normal ΔE ≥ 15, both modes):
   tournament green · club pink · ads blue. Tournament/ads keep the hues the stats page already uses for them. */
:root{--kp-t:#2f9a4a;--kp-c:#e87ba4;--kp-a:#3d6fe0;--kp-e:#d98a1f}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--kp-t:#3fa04f;--kp-c:#d9649a;--kp-a:#5a86ea;--kp-e:#e39a3d}}
:root[data-theme="dark"]{--kp-t:#3fa04f;--kp-c:#d9649a;--kp-a:#5a86ea;--kp-e:#e39a3d}

.kp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.kp-grid > .panel{margin:0}
.kp-stack{display:flex;flex-direction:column;gap:16px;margin-bottom:16px}
@media (max-width:980px){.kp-grid{grid-template-columns:minmax(0,1fr)}}

/* Meter: fill on a lighter step of the same ramp; severity only when it means something */
.kp-meter{position:relative;height:10px;border-radius:99px;background:var(--accent-soft);overflow:visible;margin:10px 0 6px}
.kp-meter > i{display:block;height:100%;border-radius:99px;background:var(--accent);max-width:100%}
.kp-meter.warn{background:var(--warn-soft)}.kp-meter.warn > i{background:var(--warn)}
.kp-meter.bad{background:var(--bad-soft)}.kp-meter.bad > i{background:var(--bad)}
.kp-meter .mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink);border-radius:1px}
.kp-meter-legend{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink-2);flex-wrap:wrap}
.kp-big{font-size:28px;font-weight:600;letter-spacing:-.01em}

/* Multiplier tier ladder */
.kp-ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px;margin:8px 0 4px}
.kp-ladder > div{border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--surface);display:flex;flex-direction:column;gap:2px}
.kp-ladder b{font-size:17px}
.kp-ladder span{font-size:11.5px;color:var(--ink-2)}
.kp-ladder > div[aria-current="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.kp-ladder > div[aria-current="true"] b{color:var(--accent)}

.kp-note{font-size:12.5px;color:var(--ink-2);margin-top:8px}
.kp-links{display:flex;gap:8px;flex-wrap:wrap}
.kp-alerts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.kp-alerts li{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:var(--surface-2);font-size:13px}
.kp-alerts li .t-meta{margin-left:auto;white-space:nowrap}
.kp-ref{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.kp-ref code{font-family:var(--f-mono);font-size:13px;background:var(--surface-2);padding:7px 10px;border-radius:8px;word-break:break-all}
.kp-sec{margin:28px 0 12px}
.kp-sec h2{font-size:22px;font-weight:600}
.kp-sec p{margin:4px 0 0;color:var(--ink-2)}
tr.kp-group td{background:var(--surface-2);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--ink-2)}
tr.kp-total td{background:var(--accent-soft);font-weight:700}
.kp-ok{color:var(--good);font-weight:700}
.kp-diff{color:var(--bad);font-weight:700}

/* Column chart (stacked by product line) */
.kp-chart{overflow-x:auto}
.kp-chart svg{display:block;min-width:420px;width:100%;max-width:760px}
.kp-chart text{fill:var(--ink-2);font-size:11px}
.kp-chart .cap{fill:var(--ink);font-weight:700}
.kp-chart .grid{stroke:var(--line);stroke-width:1}
.kp-chart g.col:hover path,.kp-chart g.col:focus path{filter:brightness(1.08)}
.kp-chart g.col:focus{outline:none}
.kp-chart g.col:focus .hit{stroke:var(--accent);stroke-width:1.5}
.kp-chart .hit{fill:transparent}
.legend i.kp-t{background:var(--kp-t)}.legend i.kp-c{background:var(--kp-c)}.legend i.kp-a{background:var(--kp-a)}.legend i.kp-e{background:var(--kp-e)}
.bar-fill.kp-one{background:var(--accent)}