/* scene-specific styles: overview, the front door (the home hero and six
   other placements). Everything here is prefixed dm-ov-; the frame, KPI
   tiles, rows, tags, marks and portraits come from core.css. Entrances
   decelerate only (no spring); exits accelerate; on-screen moves ease in
   and out. Every animated property is transform or opacity. */

.dm-ov { display: grid; gap: 16px; padding: 20px; }
.dm-ov .dm-kpis { gap: 14px; }
.dm-ov .dm-grid2 { gap: 16px; }
.dm-ov .dm-row { padding: 8px 10px; }
.dm-ov .dm-row:last-child { margin-bottom: 0; }
.dm-ov-rows { position: relative; }
.dm-ov-who { flex: 1; min-width: 0; line-height: 1.25; }
.dm-ov-who b { display: block; color: var(--ink); font-weight: 550; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-ov-who small { display: block; color: var(--faint); font-size: 0.64rem; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-ov-who small.dm-swap { display: grid; max-width: 100%; }
.dm-ov-score { color: var(--ink); font-weight: 650; min-width: 34px; }
.dm-ov .num.soon { color: var(--warn); }

/* intro entrances: decelerate, no overshoot */
.dm-ov .dm-kpi { transform: translateY(10px); transition: opacity 0.5s ease, transform 0.55s var(--ease-out), box-shadow 0.9s ease; }
.dm-ov .dm-kpi.in { transform: none; }
.dm-ov .dm-row { transition: border-color 0.3s, background 0.3s, transform 0.45s var(--ease-out), opacity 0.4s ease, box-shadow 0.6s ease; }
.dm-ov .dm-row.rise { transform: translateY(8px); }
.dm-ov .dm-row.rise.in { transform: none; }
/* an arriving row, before its release */
.dm-ov .dm-row.rise.in.pre-top { opacity: 0; transform: translateY(-10px); }
/* two rows trading places */
.dm-ov .dm-row.moving { transition: transform 0.5s var(--ease-inout); }
/* a row on its way out: accelerate */
.dm-ov .dm-row.rise.in.leave { opacity: 0; transform: translateY(6px); transition: opacity 0.3s var(--ease-in), transform 0.3s var(--ease-in); }

/* --- the pipeline strip: two lanes, label | five stages | outcome ---------- */
.dm-ov-pipe {
  position: relative; margin-top: 4px; padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.055); border-radius: 16px;
  background: rgba(255, 255, 255, 0.02); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset;
}
.dm-ov-lane { display: grid; grid-template-columns: 168px minmax(0, 1fr) 196px; column-gap: 24px; align-items: center; min-height: 36px; }
.dm-ov-lane + .dm-ov-lane { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.045); }
.dm-ov-lbl { min-width: 0; line-height: 1.25; opacity: 0; transform: translateY(4px); transition: opacity 0.35s ease, transform 0.35s var(--ease-out); }
.dm-ov-lbl.in { opacity: 1; transform: none; }
.dm-ov-lbl b { display: block; color: var(--faint); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600; }
.dm-ov-lbl .dm-swap { margin-top: 3px; color: var(--ink); font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dm-ov-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 6px; min-width: 0; }
.dm-ov-stage { position: relative; min-width: 0; --v: 1; }
.dm-ov-seg { display: block; position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.dm-ov-seg b { position: absolute; inset: 0; border-radius: inherit; background: var(--seg); transform: scaleX(0); transform-origin: left center; transition: transform 0.6s var(--ease-out); }
[dir="rtl"] .dm-ov-seg b { transform-origin: right center; }
.dm-ov-stage.in .dm-ov-seg b { transform: scaleX(var(--v)); }
/* one hue per stage, cool to warm to won: violet, blue, cyan, amber, green (the validated
   categorical palette in funnel order); the count chip takes a wash of its stage hue */
.dm-ov-stage:nth-child(1) { --seg: #8b7ff0; }
.dm-ov-stage:nth-child(2) { --seg: #3b82f6; }
.dm-ov-stage:nth-child(3) { --seg: #079FBF; }
.dm-ov-stage:nth-child(4) { --seg: #e0a030; }
.dm-ov-stage:nth-child(5) { --seg: var(--good); }
.dm-ov-stage .dm-ov-sl u { background: color-mix(in srgb, var(--seg) 24%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seg) 35%, transparent); }
/* the lane kickers carry their plane hue: raise is the investor violet, bids the tender blue */
.dm-ov-lane .dm-ov-lbl b { color: var(--plane-investor); }
.dm-ov-lane + .dm-ov-lane .dm-ov-lbl b { color: var(--plane-tender); }
/* a stage that just received: one-shot flash on the segment, count bump */
.dm-ov-seg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; opacity: 0; pointer-events: none; }
.dm-ov-stage.lit .dm-ov-seg::after { animation: dm-segflash 0.7s ease-out; }
@keyframes dm-segflash { 0% { opacity: 0.6; } 100% { opacity: 0; } }
.dm-ov-sl { display: flex; align-items: center; gap: 6px; margin-top: 8px; min-width: 0; opacity: 0; transform: translateY(4px); transition: opacity 0.35s ease, transform 0.35s var(--ease-out); }
.dm-ov-stage.in .dm-ov-sl { opacity: 1; transform: none; }
.dm-ov-sl b { color: var(--ink); font-size: 0.7rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-ov-sl u {
  text-decoration: none; flex: none; min-width: 18px; height: 18px; padding: 0 6px; box-sizing: border-box; border-radius: 6px;
  background: rgba(255, 255, 255, 0.08); color: var(--ink); font-size: 0.66rem; font-weight: 650; font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
}
.dm-ov-sl u.bump { animation: dm-bump 0.35s var(--ease-spring); }
@keyframes dm-bump { 50% { transform: scale(1.22); } }
.dm-ov-note { min-width: 0; text-align: end; color: var(--muted); font-size: 0.7rem; line-height: 1.3; opacity: 0; transition: opacity 0.4s ease; }
.dm-ov-note.in { opacity: 1; }
.dm-ov-bar { display: block; height: 3px; margin-top: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; transition: opacity 0.3s ease; }
.dm-ov-bar b { display: block; height: 100%; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #079FBF, #3ddc97); transform: scaleX(0); transform-origin: left center; transition: transform 0.6s var(--ease-out); }
[dir="rtl"] .dm-ov-bar b { transform-origin: right center; background: linear-gradient(270deg, #079FBF, #3ddc97); }
.dm-ov-note.in .dm-ov-bar b { transform: scaleX(var(--p, 0)); }
.dm-ov-bar.off { opacity: 0; }
/* a portrait travelling from one stage to the next, inside the strip only */
.dm-ov-chip {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; z-index: 5; pointer-events: none;
  opacity: 0; transition: opacity 0.2s ease; will-change: transform;
  box-shadow: 0 0 0 2px #0a161a, 0 0 0 3px rgba(255, 255, 255, 0.16), 0 6px 16px rgba(0, 0, 0, 0.5);
}
.dm-ov-chip .dm-avatar, .dm-ov-chip .dm-mark { width: 100%; height: 100%; box-shadow: none; border-radius: 50%; }
.dm-ov-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- widths (set by the scene from the measured frame) ---------------------- */
.dm-ov-narrow .dm-ov-lane { grid-template-columns: 140px minmax(0, 1fr); column-gap: 16px; }
.dm-ov-narrow .dm-ov-note { display: none; }
.dm-ov-stack .dm-ov-pipe { padding: 12px 14px; }
.dm-ov-stack .dm-ov-lane { grid-template-columns: 1fr; row-gap: 8px; min-height: 0; }
.dm-ov-stack .dm-ov-lbl { display: flex; align-items: baseline; gap: 8px; }
.dm-ov-stack .dm-ov-lbl .dm-swap { margin-top: 0; }
.dm-ov-stack .dm-ov-stages { column-gap: 4px; }
/* phones: the chip sits above the stage name so neither truncates, and the
   KPI sparkline gives the sub line its room back */
.dm-ov-stack .dm-ov-sl { flex-direction: column-reverse; align-items: flex-start; gap: 3px; margin-top: 6px; }
.dm-ov-stack .dm-ov-sl b { font-size: 0.56rem; letter-spacing: 0.01em; max-width: 100%; }
.dm-ov-stack .dm-ov-sl u { min-width: 16px; height: 16px; padding: 0 4px; font-size: 0.6rem; }
.dm-ov-stack .dm-spark { display: none; }
/* split and flow columns: one panel only, no strip (the copy beside it is about the tenders) */
:is(.split-visual, .flow-step) .dm-ov-grid > :nth-child(2), :is(.split-visual, .flow-step) .dm-ov-pipe { display: none; }
:is(.split-visual, .flow-step) .dm-ov .dm-kpi { padding: 10px 12px; line-height: 1.25; }
:is(.split-visual, .flow-step) .dm-ov .dm-kpi b { font-size: 1.22rem; }
@media (max-width: 480px) {
  .dm-ov .dm-kpi span { font-size: 0.56rem; letter-spacing: 0.04em; }
  .dm-ov .dm-row { flex-wrap: wrap; row-gap: 5px; }
  .dm-ov .dm-row .dm-ov-who { flex: 1 1 100%; }
  .dm-ov .dm-row .dm-avatar + .dm-ov-who, .dm-ov .dm-row .dm-mark + .dm-ov-who { flex-basis: calc(100% - 34px); }
  .dm-ov .dm-row .num { margin-left: auto; min-width: 0; }
  [dir="rtl"] .dm-ov .dm-row .num { margin-left: 0; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-ov-lbl, .dm-ov-sl, .dm-ov-note, .dm-ov .dm-kpi, .dm-ov .dm-row.rise, .dm-ov .dm-row.rise.in.pre-top, .dm-ov .dm-row.rise.in.leave { opacity: 1; transform: none; transition: none; }
  .dm-ov-seg b, .dm-ov-stage.in .dm-ov-seg b { transform: scaleX(var(--v)); transition: none; }
  .dm-ov-bar b, .dm-ov-note.in .dm-ov-bar b { transform: scaleX(var(--p, 0)); transition: none; }
  .dm-ov-chip { display: none; }
  .dm-ov-sl u.bump, .dm-ov-stage.lit .dm-ov-seg::after { animation: none; }
}