.cc { background: var(--sp-chart-card); border: 1px solid var(--sp-chart-grid); border-radius: var(--sp-radius-seg); padding: 16px 16px 12px; color: var(--sp-chart-ink);
  font-family: var(--sp-font-ui); font-variant-numeric: tabular-nums; min-width: 0; }
.cc-title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }
.cc-what { margin: 2px 0 10px; font-size: 13px; color: var(--sp-chart-text); line-height: 1.35; }
.cc-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 8px; }
.cc-big { font-size: 26px; font-weight: 600; letter-spacing: -0.5px; }
.cc-sub { font-size: 13px; color: var(--sp-chart-text); }
.cc-change { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; border: 1px solid transparent; }
.cc-change.cc-better { background: var(--sp-chart-better-bg); color: var(--sp-chart-text); }
.cc-change.cc-worse { background: var(--sp-chart-worse-bg); border-color: var(--sp-chart-worse-edge); color: var(--sp-chart-worse-ink); }
.cc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cc-foot { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--sp-chart-grid); font-size: 13px; color: var(--sp-chart-text); }
.cc-foot b { color: var(--sp-chart-ink); font-weight: 600; }

                             
.cc-grid { stroke: var(--sp-chart-grid); stroke-width: 1; }
.cc-axis { stroke: var(--sp-chart-axis); stroke-width: 1; }
.cc-tick, .cc-lab { fill: var(--sp-chart-text); font-family: var(--sp-font-ui); font-size: 11px; }
.cc-val { fill: var(--sp-chart-ink); font-family: var(--sp-font-ui); font-size: 11px; font-weight: 600; }
.cc-link { stroke: var(--sp-chart-axis); stroke-width: 1; stroke-dasharray: 2 2; }
.cc-gap { stroke: var(--sp-chart-card); stroke-width: 1.5; }                                                                 
.cc-partial { stroke-width: 1.5; stroke-dasharray: 3 2; fill: var(--sp-chart-card); }                                                                 
.cc-center { fill: var(--sp-chart-ink); font-family: var(--sp-font-ui); font-size: 20px; font-weight: 600; }
.cc-center-sub { fill: var(--sp-chart-text); font-family: var(--sp-font-ui); font-size: 11px; }
.cc-slice { stroke: var(--sp-chart-card); stroke-width: 2; }

                                                                                                                               
.cc-m-sales { fill: var(--sp-chart-sales); }        .cc-m-sales-t { fill: var(--sp-chart-sales-tint); }
.cc-m-food { fill: var(--sp-chart-food); }          .cc-m-food-t { fill: var(--sp-chart-food-tint); }
.cc-m-beverage { fill: var(--sp-chart-beverage); }  .cc-m-beverage-t { fill: var(--sp-chart-beverage-tint); }
.cc-m-labor { fill: var(--sp-chart-labor); }        .cc-m-labor-t { fill: var(--sp-chart-labor-tint); }
.cc-m-fixed { fill: var(--sp-chart-fixed); }        .cc-m-fixed-t { fill: var(--sp-chart-fixed-tint); }
.cc-m-profit { fill: var(--sp-chart-profit); }      .cc-m-profit-t { fill: var(--sp-chart-profit-tint); }
.cc-m-doordash { fill: var(--sp-chart-doordash); }  .cc-m-ubereats { fill: var(--sp-chart-ubereats); }
.cc-m-owner { fill: var(--sp-chart-owner); }        .cc-m-grubhub { fill: var(--sp-chart-grubhub); }
.cc-m-other { fill: var(--sp-chart-other); }          .cc-m-other-t { fill: var(--sp-chart-other-tint); }
                                                                                                      
.cc-m-cmp1 { fill: var(--sp-chart-cmp1); }          .cc-o-cmp1 { stroke: var(--sp-chart-cmp1); }
.cc-m-cmp2 { fill: var(--sp-chart-cmp2); }          .cc-o-cmp2 { stroke: var(--sp-chart-cmp2); }
.cc-m-cmp3 { fill: var(--sp-chart-cmp3); }          .cc-o-cmp3 { stroke: var(--sp-chart-cmp3); }
.cc-o-food { stroke: var(--sp-chart-food); }        .cc-o-beverage { stroke: var(--sp-chart-beverage); }
.cc-o-labor { stroke: var(--sp-chart-labor); }      .cc-o-sales { stroke: var(--sp-chart-sales); }
.cc-o-fixed { stroke: var(--sp-chart-fixed); }      .cc-o-profit { stroke: var(--sp-chart-profit); }
.cc-o-other { stroke: var(--sp-chart-other); }
                                                                                
.cc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cc-l-sales { stroke: var(--sp-chart-sales); }       .cc-l-sales-t { stroke: var(--sp-chart-sales-tint); }
.cc-l-food { stroke: var(--sp-chart-food); }         .cc-l-food-t { stroke: var(--sp-chart-food-tint); }
.cc-l-beverage { stroke: var(--sp-chart-beverage); } .cc-l-beverage-t { stroke: var(--sp-chart-beverage-tint); }
.cc-l-labor { stroke: var(--sp-chart-labor); }       .cc-l-labor-t { stroke: var(--sp-chart-labor-tint); }
.cc-l-fixed { stroke: var(--sp-chart-fixed); }       .cc-l-fixed-t { stroke: var(--sp-chart-fixed-tint); }
.cc-l-profit { stroke: var(--sp-chart-profit); }     .cc-l-profit-t { stroke: var(--sp-chart-profit-tint); }
.cc-l-other { stroke: var(--sp-chart-other); }
.cc-l-cmp1 { stroke: var(--sp-chart-cmp1); }         .cc-l-cmp2 { stroke: var(--sp-chart-cmp2); }
.cc-l-cmp3 { stroke: var(--sp-chart-cmp3); }
.cc-dot { stroke: var(--sp-chart-card); stroke-width: 1; }
.cc-hit { fill: transparent; }
.cc-k-fixed-t { background: var(--sp-chart-fixed-tint); }   .cc-k-profit-t { background: var(--sp-chart-profit-tint); }
.cc-k-other { background: var(--sp-chart-other); }   .cc-k-other-t { background: var(--sp-chart-other-tint); }
                                                                                                        
.cc-note { margin: 6px 0 0; font-size: 12px; color: var(--sp-chart-text); line-height: 1.35; }
.cc-empty { margin: 8px 0; font-size: 13px; color: var(--sp-chart-text); }
.cc-numbers { margin: 8px 0 0; font-size: 13px; }
.cc-numbers summary { cursor: pointer; color: var(--sp-chart-text); min-height: 24px; }

                                              
.cc-legend { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.cc-legend li { display: grid; grid-template-columns: 12px minmax(min-content, 1fr) auto auto; gap: 8px; align-items: center; }
.cc-key { width: 12px; height: 12px; border-radius: 3px; }
.cc-k-sales { background: var(--sp-chart-sales); }        .cc-k-sales-t { background: var(--sp-chart-sales-tint); }
.cc-k-food { background: var(--sp-chart-food); }          .cc-k-food-t { background: var(--sp-chart-food-tint); }
.cc-k-beverage { background: var(--sp-chart-beverage); }  .cc-k-beverage-t { background: var(--sp-chart-beverage-tint); }
.cc-k-labor { background: var(--sp-chart-labor); }        .cc-k-labor-t { background: var(--sp-chart-labor-tint); }
.cc-k-fixed { background: var(--sp-chart-fixed); }        .cc-k-profit { background: var(--sp-chart-profit); }
.cc-k-doordash { background: var(--sp-chart-doordash); }  .cc-k-ubereats { background: var(--sp-chart-ubereats); }
.cc-k-owner { background: var(--sp-chart-owner); }        .cc-k-grubhub { background: var(--sp-chart-grubhub); }
.cc-k-cmp1 { background: var(--sp-chart-cmp1); }          .cc-k-cmp2 { background: var(--sp-chart-cmp2); }
.cc-k-cmp3 { background: var(--sp-chart-cmp3); }
.cc-k-partial { background: var(--sp-chart-card); border: 1.5px dashed var(--sp-chart-text); }
                                                                                                                                
.cc-key.cc-k-tints { display: inline-flex; width: auto; height: 12px; border-radius: 3px; overflow: hidden; }
.cc-k-tints > span { display: block; width: 7px; height: 12px; }
.cc-legend .cc-pct { color: var(--sp-chart-text); }
.cc-legend .cc-amt { font-weight: 600; text-align: right; }
.cc-legend-row { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.cc-legend-row li { display: inline-flex; align-items: center; gap: 6px; }
.cc-legend-row .cc-amt { font-weight: 600; }
.cc-donut { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 12px; align-items: center; }

@media (max-width: 420px) {
  .cc { padding: 14px 12px 10px; }
  .cc > .cc-svg { margin: 0 -10px; width: calc(100% + 20px); }                                                                                    
  .cc-big { font-size: 22px; }
  .cc-donut { grid-template-columns: minmax(0, 1fr); justify-items: center; }                                             
  .cc-donut .cc-svg { max-width: 170px; }
  .cc-donut .cc-legend { width: 100%; }
}
.cc-lab-s { font-size: 10px; }                                                                 

                                                                        
.cc-m-comps { fill: var(--sp-chart-comps); }            .cc-m-comps-t { fill: var(--sp-chart-comps-tint); }
.cc-m-discounts { fill: var(--sp-chart-discounts); }    .cc-m-discounts-t { fill: var(--sp-chart-discounts-tint); }
.cc-m-voids { fill: var(--sp-chart-voids); }            .cc-m-voids-t { fill: var(--sp-chart-voids-tint); }
.cc-l-comps { stroke: var(--sp-chart-comps); }          .cc-l-comps-t { stroke: var(--sp-chart-comps-tint); }
.cc-l-discounts { stroke: var(--sp-chart-discounts); }  .cc-l-discounts-t { stroke: var(--sp-chart-discounts-tint); }
.cc-l-voids { stroke: var(--sp-chart-voids); }          .cc-l-voids-t { stroke: var(--sp-chart-voids-tint); }
.cc-o-comps { stroke: var(--sp-chart-comps); }          .cc-o-discounts { stroke: var(--sp-chart-discounts); }   .cc-o-voids { stroke: var(--sp-chart-voids); }
.cc-k-comps { background: var(--sp-chart-comps); }      .cc-k-comps-t { background: var(--sp-chart-comps-tint); }
.cc-k-discounts { background: var(--sp-chart-discounts); } .cc-k-discounts-t { background: var(--sp-chart-discounts-tint); }
.cc-k-voids { background: var(--sp-chart-voids); }      .cc-k-voids-t { background: var(--sp-chart-voids-tint); }
.cc-legend li:has(.cc-of) { grid-template-columns: auto minmax(min-content, 1fr) auto auto auto; }
                                                                                                                                                                          
                                                                                                                                                            
.cc-legend li > span:nth-child(2) { min-width: min-content; }
.cc-pct, .cc-amt { white-space: nowrap; }
.cc:has(.cc-donut) { container: cc-card / inline-size; }
.cc-donut .cc-legend { container-type: inline-size; }
@container cc-card (max-width: 439px) {                                                                                           
  .cc-donut { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .cc-donut .cc-svg { max-width: 170px; }
  .cc-donut .cc-legend { width: 100%; }
}
@container (max-width: 339px) {
  .cc-donut .cc-legend li:has(.cc-of) { grid-template-columns: auto auto auto minmax(0, 1fr); row-gap: 0; }
  .cc-donut .cc-legend li:has(.cc-of) > span:nth-child(2) { grid-column: 2 / -1; }
  .cc-donut .cc-legend li:has(.cc-of) > .cc-pct { grid-column: 2; }
}
.cc-legend .cc-of { color: var(--sp-chart-text); text-align: right; white-space: nowrap; }