/* ============================================================
   Kai dashboards — charts
   Stacked outcome columns, volume bars, sparkline, tooltip.
   Extracted from design/prototype-cobalt/kai.css.
   ============================================================ */
/* ============================================================
   Charts
   ============================================================ */
/* Outfit, not Playfair: on the site the display face only ever sets large
   section titles. A card heading is not one. */
.chart-card h3{
  font-size:17px; font-weight:600; letter-spacing:-.005em;
  color:var(--navy); line-height:1.3; margin-bottom:3px;
}
.chart-sub{ font-size:14px; color:var(--ink-3); margin-bottom:20px; line-height:1.5 }

.cols{ display:flex; align-items:flex-end; gap:10px; height:150px; padding-top:18px }
.col{
  flex:1; display:flex; flex-direction:column-reverse; align-items:stretch;
  max-width:44px; margin:0 auto; position:relative; height:100%;
  justify-content:flex-start;
}
.col .total{
  position:absolute; top:-18px; left:0; right:0; text-align:center;
  font-size:11.5px; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums;
}
.col.today .total{ color:var(--ink) }
.seg{ min-height:3px }
.seg + .seg{ margin-bottom:2px }             /* 2px surface gap between stacked segments */
.col .seg:last-child{ border-radius:4px 4px 0 0 }
.col-track{ flex:1; display:flex; flex-direction:column; justify-content:flex-end }
.cols-x{ display:flex; gap:10px; margin-top:8px; border-top:1px solid var(--line); padding-top:7px }
.cols-x span{
  flex:1; text-align:center; font-size:11.5px; color:var(--ink-3);
}
.cols-x span.today{ color:var(--ink); font-weight:600 }

.bars{ display:flex; align-items:flex-end; gap:2px; height:140px }
.bar{
  flex:1; background:var(--ch-volume); border-radius:3px 3px 0 0; min-height:2px;
  transition:opacity .1s;
}
.bar.ooh{ background:var(--ch-callback) }
.bars:hover .bar{ opacity:.45 }
.bars .bar:hover{ opacity:1 }
.bars-x{ display:flex; gap:2px; margin-top:7px; border-top:1px solid var(--line); padding-top:6px }
.bars-x span{ flex:1; text-align:center; font-size:10.5px; color:var(--ink-3) }

.legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:16px; font-size:12px; color:var(--ink-2) }
.legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px }

.chart-tip{
  position:fixed; z-index:60; pointer-events:none;
  background:var(--ink); color:#F2F5FA; border-radius:var(--r-md);
  padding:8px 12px; font-size:12.5px; line-height:1.45;
  box-shadow:var(--shadow-pop); opacity:0; transition:opacity .1s;
  max-width:240px;
}
.chart-tip.show{ opacity:1 }
.chart-tip .t-head{ font-weight:650; margin-bottom:2px }
.chart-tip .t-row{ display:flex; justify-content:space-between; gap:14px }
.chart-tip .t-row i{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px }

/* skeleton loading */
.skel{ position:relative; overflow:hidden; background:var(--paper-deep); border-radius:var(--r-sm) }
.skel::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation:shimmer 1.4s infinite;
}
@keyframes shimmer{ from{ transform:translateX(-100%) } to{ transform:translateX(100%) } }

/* empty & error states */
.state{
  padding:34px 24px; text-align:center;
}
.state .display{ font-size:18px; color:var(--ink); margin-bottom:6px }
.state p{ font-size:13.5px; color:var(--ink-2); max-width:44ch; margin:0 auto }
.state.error{ border-left:2px solid var(--urgent); text-align:left; padding:18px 20px; background:var(--urgent-wash); border-radius:var(--r-md) }
.state.error .display{ font-size:16px }
.state.error p{ margin:0 }
.state .retry{ margin-top:12px }