/* The Overview: the last 7 days in the page head, the figures on one line, what needs the customer, the volume and the
   latest syncs. Every class starts with ov-. It moves like what it shows; base.css stops the motion under reduced motion. */

@keyframes ov-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ov-pop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes ov-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ov-ring { from { stroke-dasharray: 0 100; } }
@keyframes ov-fill { from { transform: scaleX(0); } to { transform: none; } }

/* ---------- The head: a status badge in orange, and the week's figure with its chart on a line of its own ---------- */
.ov-pulse {
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2.4fr); align-items: end; gap: 16px 40px;
  flex: 1 1 100%; margin-top: 14px;
}
.ov-pulse-label { font-size: var(--fs-s); font-weight: 500; color: var(--stage-muted); }
.ov-pulse-big {
  margin-top: 6px; font-family: var(--mono); font-size: 46px; line-height: 1; font-weight: 600; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--stage-ink);
}
.ov-pulse-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0; font-size: var(--fs-s); line-height: 1.45; color: var(--stage-muted); }
.ov-pulse .trend { background: var(--stage-fill); color: var(--stage-ink); }
.ov-pulse .trend.up { color: var(--stage-ok); }
.ov-pulse .trend.down { color: var(--stage-bad); }
.ov-chart { position: relative; min-width: 0; }
.ov-area { display: block; width: 100%; height: 96px; overflow: visible; animation: ov-reveal 1.2s var(--ease) .15s both; }
.ov-area .fill { fill: color-mix(in srgb, var(--stage-flow) 18%, transparent); }
.ov-area .line { fill: none; stroke: var(--stage-flow); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ov-area-x { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--stage-muted); }
/* One record travelling along the week's line (overview.js moves it). */
.ov-runner {
  position: absolute; top: 0; left: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; opacity: 0; pointer-events: none;
  background: var(--stage-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-flow) 40%, transparent), 0 0 16px 4px var(--stage-flow);
}

/* ---------- Figures: a link beside the label, logos and one bar per integration under the number ---------- */
.ov-figs .fig { animation: ov-rise .5s var(--ease) both; }
.ov-figs .fig:nth-child(2) { animation-delay: .06s; }
.ov-figs .fig:nth-child(3) { animation-delay: .12s; }
.ov-fig-link { margin-left: auto; font-size: var(--fs-xs); font-weight: 600; }
.ov-figs .fig-sub .trend { margin-right: 4px; font-size: var(--fs-2xs); }
.ov-figs .fig-ring circle.on { animation: ov-ring 1.1s var(--ease) .2s both; }
.ov-figs .fig-ring circle.on.warn { stroke: var(--warn); }
.ov-logos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ov-logos .brandmark { width: 62px; height: 24px; padding: 0 6px; animation: ov-pop .4s var(--ease) .3s both; }
.ov-logos .brandmark:nth-child(2) { animation-delay: .34s; }
.ov-logos .brandmark:nth-child(3) { animation-delay: .38s; }
.ov-logos .brandmark:nth-child(4) { animation-delay: .42s; }
.ov-logos .brandmark:nth-child(n+5) { animation-delay: .46s; }
.ov-more { display: inline-grid; place-items: center; height: 24px; padding: 0 9px; border-radius: 7px; background: var(--panel-3); color: var(--ink-3); font-size: var(--fs-2xs); font-weight: 600; }
.ov-segments { display: flex; gap: 3px; max-width: 280px; margin-top: 12px; }
.ov-segments i { flex: 1; height: 6px; border-radius: 2px; background: var(--brand-text); transform-origin: left; animation: ov-fill .6s var(--ease) .35s both; }
.ov-segments i.ok { background: var(--ok); }
.ov-segments i.warn { background: var(--warn); }
.ov-segments i.bad { background: var(--bad); }
.ov-segments i.mute { background: var(--line-strong); }
.ov-fig-name { margin-top: 10px; font-size: var(--fs-l); font-weight: 600; letter-spacing: var(--tr-snug); color: var(--ink); }
.ov-start .fig { display: flex; flex-direction: column; }
.ov-fig-do { margin-top: auto; padding-top: 14px; }

/* ---------- Needs you: what is wrong, its kind, and the button that fixes it ---------- */
.ov-needs { --rl-cols: minmax(0, 1fr) 160px 130px; --rl-cols-md: minmax(0, 1fr) 130px; --rl-btn: 112px; }
.ov-need { align-items: start; }
.ov-need .rl-type { align-items: flex-start; }
.ov-need .rl-name b { white-space: normal; }
.ov-note { font-size: var(--fs-s); line-height: 1.5; color: var(--ink-3); }
.ov-kind { padding-top: 3px; font-size: var(--fs-xs); color: var(--ink-3); }
.ov-need .rl-do { padding-top: 2px; }

/* ---------- Latest syncs: the integration first, then one fact per column ---------- */
.ov-latest {
  --rl-cols: minmax(0, 1fr) 148px 214px 200px 64px 64px 56px 80px 132px 16px;
  --rl-cols-md: minmax(0, 1fr) 148px 64px 56px 132px 16px;
}

/* ---------- AI agents ---------- */
.ov-agents { --rl-cols: minmax(0, 1fr) 140px 190px; --rl-cols-md: minmax(0, 1fr) 190px; }

/* Beside the rail on a laptop the widest facts give the integration name its room back. */
@container page (min-width: 1181px) and (max-width: 1440px) {
  .ov-latest { --rl-cols: minmax(0, 1fr) 148px 200px 64px 56px 80px 132px 16px; }
  .ov-latest .ov-wide { display: none; }
}

@container page (max-width: 820px) {
  .ov-pulse { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ov-pulse-big { font-size: 40px; }
}