/* A call as the business Calls tab shows it, played from a script
   (call-demo.js). The card itself is biz-calls.css; this keeps it still
   while it plays (fixed heights, so nothing below it moves), and fits the
   compact version into the product carousel. Follows its own width, not the
   window's. */
.cvd{--risk-low:#34D399;--risk-elevated:#FBBF24;--risk-high:#F97316;--risk-critical:#F43F5E;
  container-type:inline-size;position:relative;text-align:left;color:var(--ink,#EEF1FA);font-family:'Geist',system-ui,sans-serif}
.cvd .fb-low{--rc:var(--risk-low)}.cvd .fb-elevated{--rc:var(--risk-elevated)}.cvd .fb-high{--rc:var(--risk-high)}.cvd .fb-critical{--rc:var(--risk-critical)}
.cvd .pill{display:inline-block;font-size:11px;color:var(--muted)}
.cvd .fraud-pill{display:inline-flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap;color:var(--rc,var(--ink))}
.cvd .cv-head .fraud-pill{padding:3px 8px;border-radius:7px;font-size:11.5px;background:color-mix(in srgb,var(--rc) 14%,transparent)}
.cvd-pill:empty{display:none}
.cvd.cvd-pre .cvd-pill,.cvd.cvd-pre .cvd-when{visibility:hidden}
.cvd .cv{background:linear-gradient(180deg,rgba(22,26,52,.86),rgba(12,14,30,.9));box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
.cvd .cv-head{cursor:default}
.cvd .cv-car{display:none}
.cvd .cv-body{transition:opacity .4s ease}
.cvd.cvd-out .cv-body{opacity:0}
/* nothing grows while the call plays; the transcript is the one column under the score */
.cvd .cv-fs{min-height:196px}
.cvd .cv-cols{grid-template-columns:minmax(0,1fr)}
.cvd .cv-lines{height:196px;max-height:none;overflow:hidden}
.cvd .cv-fsum{min-height:3em}
/* the advice keeps its room before there's any (call-demo.js sizes it to the longest) */
.cvd .cv-fsum[hidden]{display:block;visibility:hidden}

/* compact (the carousel card): the head, the score beside its curve, and
   what's being said */
.cvd-compact,.cvd-compact .cv{height:100%}
.cvd-compact .cv{display:flex;flex-direction:column;border-radius:14px;border-color:rgba(45,212,191,.32)}
.cvd-compact .cv-head{padding:12px 16px;flex:0 0 auto}
.cvd-compact .cv-body{flex:1;min-height:0;padding:12px 14px 14px;gap:10px}
.cvd-compact .cv-fr{grid-template-columns:minmax(0,210px) minmax(0,1fr);padding:12px 14px;gap:10px;flex:0 0 auto}
.cvd-compact .cv-fs{min-height:0}
.cvd-compact .cv-fn{margin:9px 0 0}
.cvd-compact .cv-fn b{font-size:38px}
.cvd-compact .cv-fsum{font-size:12px;min-height:4.5em;margin-top:8px}
.cvd-compact .cv-plot{min-height:132px}
.cvd-compact .cv-cols{flex:1;min-height:0}
.cvd-compact .cv-tr{min-height:0}
.cvd-compact .cv-lines{height:auto;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end}
.cvd-compact .cv-lines li{padding:4px 8px;font-size:12px}

@container (max-width:640px){
  .cvd .cv-fr{grid-template-columns:minmax(0,1fr)}
  .cvd .cv-fs{min-height:0}
  .cvd .cv-lines{height:200px}
  .cvd .cv-meta{flex-basis:100%;order:5}
  .cvd .cv-r{order:4;margin-left:auto}
  /* the end's pill beside the number; no room for when */
  .cvd .cvd-when{display:none}
  .cvd .cv-lines li{grid-template-columns:32px minmax(0,1fr)}
  .cvd .cv-lines li b,.cvd .cv-lines li span{grid-column:2}
  /* compact on a phone: the head, the score and its curve */
  .cvd-compact .cv-tr{display:none}
  .cvd-compact .cv-fr{grid-template-columns:minmax(0,1fr);flex:1}
  .cvd-compact .cv-fsum{min-height:0}
  .cvd-compact .cv-fn b{font-size:34px}
  .cvd-compact .cv-plot{min-height:108px}
}
@container (max-width:400px){
  .cvd-compact .cv-fsum{display:none}
  .cvd-compact .cv-meta{display:none}
}
/* the newest row stays in view; whatever has scrolled past fades out at the top */
.cvd .cv-lines.cut{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26px);mask-image:linear-gradient(180deg,transparent 0,#000 26px)}