/* Customer Growth Rate Calculator: subscriptions dashboard with a customer bridge and a projection chart. */
.cg{--cg-c:#3D5AFE;--cg-s:rgba(61,90,254,.1)}
.cg[data-cg-tone=great]{--cg-c:#2F7A0B;--cg-s:rgba(47,122,11,.11)}
.cg[data-cg-tone=ok]{--cg-c:#B45309;--cg-s:rgba(180,83,9,.1)}
.cg[data-cg-tone=bad]{--cg-c:#C2410C;--cg-s:rgba(194,65,12,.1)}
.cg-sub{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate);padding-top:14px;border-top:1px solid var(--rule)}
.cg-sub em{font-style:normal;font-size:10px;letter-spacing:.06em;background:var(--paper);border:1px solid var(--rule);border-radius:4px;padding:1px 6px}
.cg-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.cg .cg-unit span{left:auto;right:14px}
.cg .cg-unit .inp{padding-left:14px;padding-right:88px}

/* panels */
.cg-panel{border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.cg-ph{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:14px 16px 8px}
.cg-ph b{font-weight:600;font-size:15px}
.cg-ph small{font-family:var(--mono);font-size:11.5px;color:var(--slate)}

/* customer bridge: floating bars */
.cg-bridge{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:8px 16px 4px}
.cg.cg-three .cg-bridge{grid-template-columns:repeat(3,minmax(0,1fr))}
.cg-col{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;text-align:center}
.cg-col[hidden]{display:none}
.cg-v{font-weight:600;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-col small{font-size:12.5px;color:var(--slate)}
.cg-track{position:relative;height:130px;background:linear-gradient(to top,var(--rule) 1px,transparent 1px)}
.cg-bar{position:absolute;left:14%;right:14%;bottom:0;height:0;border-radius:5px;background:var(--ink);
  transition:height .55s cubic-bezier(.3,.7,.3,1),bottom .55s cubic-bezier(.3,.7,.3,1)}
.cg-up .cg-bar{background:var(--lime)}
.cg-up .cg-v{color:#3F5A06}
.cg-down .cg-bar{background:var(--red)}
.cg-down .cg-v{color:#C2410C}
.cg-end .cg-bar{background:var(--cg-c);transition:height .55s cubic-bezier(.3,.7,.3,1),bottom .55s cubic-bezier(.3,.7,.3,1),background .3s}
.cg-check{margin:8px 16px 12px;padding:8px 12px;border-radius:8px;background:var(--paper);font-size:13px;color:var(--slate);font-variant-numeric:tabular-nums}
.cg-check b{color:var(--ink);font-weight:600}
.cg-check.ok::before{content:"✓ ";color:#2F7A0B;font-weight:600}
.cg-check.warn{background:#FDF1E7;color:#9A3412}
.cg-check.warn::before{content:"! ";font-weight:700}
.cg-check.warn b{color:#9A3412}

/* stats strip */
.cg-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule)}
.cg-stats.cg-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cg-stats div{padding:12px 16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.cg-stats div + div{border-left:1px solid var(--rule)}
.cg-stats small{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
.cg-stats b{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.cg-stats span{font-size:12.5px;color:var(--slate)}

/* projection chart */
.cg-svg{display:block;width:calc(100% - 24px);margin:4px 12px 8px;height:auto;overflow:visible;font-family:var(--sans)}
.cg-svg .cg-grid{stroke:#EEEEE8;stroke-width:1}
.cg-svg .cg-shade{fill:#F8F8F4}
.cg-svg .cg-div{stroke:#CFCFC6;stroke-width:1.2;stroke-dasharray:4 4}
.cg-svg .cg-area{fill:var(--cg-s);transition:d .55s cubic-bezier(.3,.7,.3,1),fill .3s}
.cg-svg .cg-hist{fill:none;stroke:var(--cg-c);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;transition:d .55s cubic-bezier(.3,.7,.3,1),stroke .3s}
.cg-svg .cg-fut{fill:none;stroke:var(--cg-c);stroke-width:2.2;stroke-dasharray:6 5;opacity:.75;transition:d .55s cubic-bezier(.3,.7,.3,1),stroke .3s}
.cg-svg .cg-dot0{fill:#fff;stroke:var(--cg-c);stroke-width:2.2}
.cg-svg .cg-dot{fill:var(--cg-c);stroke:#fff;stroke-width:2.5}
.cg-svg .cg-dotf{fill:#fff;stroke:var(--cg-c);stroke-width:2.2;stroke-dasharray:3 2}
.cg-svg .cg-val{font-size:13px;font-weight:600;fill:var(--ink);font-variant-numeric:tabular-nums}
.cg-svg .cg-valf{fill:var(--slate)}
.cg-svg .cg-x{font-size:13px;fill:var(--slate);font-family:var(--mono)}
.cg-svg .cg-sec{font-size:11px;fill:var(--slate);font-family:var(--mono);letter-spacing:.07em;text-transform:uppercase}
@media(prefers-reduced-motion:reduce){.cg-bar,.cg-svg .cg-area,.cg-svg .cg-hist,.cg-svg .cg-fut{transition:none}}
@media(max-width:600px){
  .cg-bridge{gap:8px;padding:8px 12px 4px}
  .cg-track{height:110px}
  .cg-v{font-size:13.5px}
  .cg-stats{grid-template-columns:minmax(0,1fr)}
  .cg-stats.cg-two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cg-stats:not(.cg-two) div + div{border-left:0;border-top:1px solid var(--rule)}
  .cg-stats:not(.cg-two) div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:baseline}
  .cg-stats:not(.cg-two) b{grid-row:1;grid-column:2;font-size:18px;text-align:right}
  .cg-stats:not(.cg-two) span{grid-column:1/-1}
  .cg-svg .cg-val,.cg-svg .cg-x{font-size:21px}.cg-svg .cg-sec{font-size:17px}
  .cg .cg-unit .inp{padding-right:84px}
}