/* Command View — the money-first scoreboard. Scoped under .cv so it never bleeds
   into the space-themed deck. Default skin = black + gold (client-demoable);
   data-skin="game" softens it back toward the deck for daily personal use. */

.cv { --cv-gold:#ca8a04; --cv-bg:#0b0b0e; --cv-tile:#141417; --cv-line:#27272a;
      --cv-text:#f4f4f5; --cv-muted:#8b8b93; --cv-fwd:#22d3ee;
      --cv-good:#16a34a; --cv-warn:#ca8a04; --cv-bad:#dc2626; --cv-neutral:#6b7280;
      background:var(--cv-bg); border:1px solid #1f1f23; }
.cv[data-skin="game"] { --cv-gold:#D4AF37; --cv-bg:transparent; --cv-tile:rgba(255,255,255,.03); }

.cv-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cv-head h2 { color:var(--cv-gold); letter-spacing:.02em; }
.cv-controls { display:flex; align-items:center; gap:8px; }
.cv-windows { display:flex; gap:2px; background:var(--cv-tile); border:1px solid var(--cv-line); border-radius:8px; padding:2px; }
.cv-w { background:transparent; border:0; color:var(--cv-muted); font:inherit; font-size:12px; padding:4px 10px; border-radius:6px; cursor:pointer; }
.cv-w.active { background:var(--cv-gold); color:#000; font-weight:700; }
.cv-skin { background:var(--cv-tile); border:1px solid var(--cv-line); color:var(--cv-muted); border-radius:8px; padding:4px 8px; cursor:pointer; }

.cv-body { margin-top:14px; }
.cv-loading { padding:20px 0; }

/* "Updating…" cue — on a window/granularity switch the current board stays on-screen and
   dims (never blanks) until the fresh data swaps in. Presentation-only, driven by a
   data-updating attr toggled in command-view.js / funnels.js. */
#cvBody[data-updating], #funnelsGrid[data-updating] { position:relative; }
#cvBody[data-updating] > *, #funnelsGrid[data-updating] > * {
  opacity:.45; pointer-events:none; transition:opacity .15s ease; }
#cvBody[data-updating]::after, #funnelsGrid[data-updating]::after {
  content:"updating…"; position:absolute; top:6px; right:8px; z-index:3;
  font-size:11px; letter-spacing:.03em; color:var(--cv-gold);
  background:var(--cv-tile); border:1px solid var(--cv-line);
  padding:2px 10px; border-radius:999px; box-shadow:0 1px 6px rgba(0,0,0,.35);
  animation:cvPulse 1s ease-in-out infinite; }
@keyframes cvPulse { 0%,100%{ opacity:.6; } 50%{ opacity:1; } }

/* Hero + above-fold */
.cv-hero { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:12px; }
@media (max-width:820px){ .cv-hero { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .cv-hero { grid-template-columns:1fr; } }

.cv-tile { background:var(--cv-tile); border:1px solid var(--cv-line); border-radius:12px; padding:14px 16px;
           display:flex; flex-direction:column; gap:4px; min-height:104px; position:relative; overflow:hidden; }
.cv-tile.hero { grid-row:span 1; border-color:var(--cv-gold); box-shadow:inset 0 0 0 1px rgba(202,138,4,.25); }
.cv-tile .cv-label { color:var(--cv-muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.cv-tile .cv-num { font-size:30px; font-weight:800; line-height:1.05; color:var(--cv-text); }
.cv-tile.hero .cv-num { font-size:46px; color:var(--cv-gold); }
.cv-tile .cv-target { font-size:11px; color:var(--cv-muted); }
.cv-tile .cv-note { font-size:11px; color:var(--cv-muted); margin-top:auto; line-height:1.35; }
.cv-tile-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.cv-tile .cv-label { flex:1; min-width:0; }
.cv-tile .cv-chip { flex-shrink:0; font-size:10px; padding:2px 7px; border-radius:999px;
                    text-transform:uppercase; letter-spacing:.04em; font-weight:700; white-space:nowrap; }

/* status colors */
.st-good   .cv-num{ color:var(--cv-good);} .st-good   .cv-chip{ background:rgba(22,163,74,.15); color:#4ade80;}
.st-warn   .cv-num{ color:var(--cv-warn);} .st-warn   .cv-chip{ background:rgba(202,138,4,.15); color:#facc15;}
.st-bad    .cv-num{ color:var(--cv-bad);}  .st-bad    .cv-chip{ background:rgba(220,38,38,.15); color:#f87171;}
.st-feature .cv-num{ color:var(--cv-gold);} .st-feature .cv-chip{ background:rgba(202,138,4,.18); color:var(--cv-gold);}
.st-baseline .cv-chip,.st-provisional .cv-chip,.st-neutral .cv-chip{ background:rgba(107,114,128,.18); color:#cbd5e1;}
.st-no_data .cv-num,.st-unavailable .cv-num,.st-partial .cv-num{ color:var(--cv-neutral); }
.st-no_data .cv-chip{ background:rgba(107,114,128,.15); color:var(--cv-muted);}
.st-unavailable .cv-chip{ background:rgba(220,38,38,.15); color:#f87171;}

/* Section headers + below-fold grid */
.cv-sub { margin:22px 0 10px; color:var(--cv-muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.cv-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.cv-grid .cv-tile { min-height:88px; }
.cv-grid .cv-num { font-size:22px; }

/* Bars (funnels, events, channels) */
.cv-bars { display:flex; flex-direction:column; gap:7px; }
.cv-bar { display:grid; grid-template-columns:130px 1fr 44px; align-items:center; gap:10px; font-size:12px; }
.cv-bar .cv-bar-label { color:var(--cv-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cv-bar .cv-bar-track { background:var(--cv-line); border-radius:6px; height:14px; overflow:hidden; }
.cv-bar .cv-bar-fill { display:block; height:100%; background:var(--cv-gold); border-radius:6px; min-width:2px; }
.cv-bar .cv-bar-val { color:var(--cv-text); text-align:right; font-variant-numeric:tabular-nums; }
.cv-bars-title { color:#cbd5e1; font-size:12px; margin-bottom:6px; }
.cv-cols { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:700px){ .cv-cols { grid-template-columns:1fr; gap:16px; } }

.cv-stamp { margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.cv-src-ok { color:#4ade80; } .cv-src-bad { color:#f87171; } .cv-src-stale { color:#facc15; }
.cv-empty { color:var(--cv-muted); font-size:13px; padding:8px 0; }

/* ---------- v2: back↔forward time toggle (Past | Upcoming) ---------- */
.cv-windows { flex-wrap:wrap; }
.cv-w-glabel { color:var(--cv-muted); font-size:9px; text-transform:uppercase; letter-spacing:.06em;
               align-self:center; padding:0 5px 0 3px; }
.cv-w-glabel.up { color:var(--cv-fwd); font-weight:700; }
.cv-w-sep { width:1px; align-self:stretch; background:var(--cv-line); margin:2px 4px; }
.cv-w.fwd.active { background:var(--cv-fwd); color:#00232b; }   /* cue #2: upcoming is cyan, not gold */
/* forward banner — cue #1 */
.cv-dir { display:inline-flex; align-items:center; gap:6px; margin-bottom:12px; padding:4px 12px;
          border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.cv-dir-fwd { background:var(--cv-fwd); color:#00232b; }
/* low-prominence Custom range */
.cv-custom { display:flex; align-items:center; gap:6px; margin-top:8px; }
.cv-custom.hidden { display:none; }
.cv-date { background:var(--cv-tile); border:1px solid var(--cv-line); color:var(--cv-text);
           border-radius:6px; padding:3px 6px; font:inherit; font-size:12px; }
.cv-custom span { color:var(--cv-muted); font-size:12px; }

/* New Clients — hero-tier accent (headline outcome, never confused with the hero) */
.cv-tile.accent { border-color:var(--cv-gold); box-shadow:inset 0 0 0 1px rgba(202,138,4,.20); }
.cv-tile.accent .cv-num { color:var(--cv-gold); }

/* ---------- Move 1a: vs-prior trend arrow ---------- */
/* Small ▲/▼ ±% under the number. Up = green, down = red (only higher-is-better money tiles
   carry a trend, so the color rule is always right); flat = muted. No arrow when trend is null. */
.cv-trend { font-size:12px; font-weight:700; line-height:1; margin-top:2px; font-variant-numeric:tabular-nums; }
.cv-trend-up { color:var(--cv-good); }
.cv-trend-down { color:var(--cv-bad); }
.cv-trend-flat { color:var(--cv-muted); }

/* ---------- Move 1b: the crowned "your number" tile ---------- */
/* Adds a ★ caption + a stronger gold glow on top of the .accent treatment. Config-driven — which
   tile wears it comes from the payload's critical_kpi (config.CRITICAL_KPI). */
.cv-tile.crowned { box-shadow:inset 0 0 0 1px rgba(202,138,4,.45), 0 0 22px rgba(202,138,4,.12); }
.cv-crown-cap { font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
                color:var(--cv-gold); margin-bottom:2px; }

/* ============================================================ */
/*  Pipeline tab — the conversion-funnel story (pipeline.js)     */
/*  Reuses the CV tile / hero / grid classes; adds only the      */
/*  moat layout + the dim-not-blank cue for its own body.        */
/* ============================================================ */
.pipe-moat { grid-template-columns:1fr; }          /* the moat is a single full-width hero */
#pipeBody[data-updating] { position:relative; }
#pipeBody[data-updating] > * { opacity:.45; pointer-events:none; transition:opacity .15s ease; }
#pipeBody[data-updating]::after {
  content:"updating…"; position:absolute; top:6px; right:8px; z-index:3;
  font-size:11px; letter-spacing:.03em; color:var(--cv-gold);
  background:var(--cv-tile); border:1px solid var(--cv-line);
  padding:2px 10px; border-radius:999px; box-shadow:0 1px 6px rgba(0,0,0,.35);
  animation:cvPulse 1s ease-in-out infinite; }

/* ============================================================ */
/*  Funnels tab — per-property small-multiple cards (funnels.js) */
/* ============================================================ */
.fn-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:6px; }
.fn-card { background:var(--cv-tile); border:1px solid var(--cv-line); border-radius:12px;
           padding:14px 16px; display:flex; flex-direction:column; gap:11px; }
.fn-name { color:var(--cv-gold); font-size:13px; font-weight:700; letter-spacing:.02em; }
.fn-stats { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.fn-stat { display:flex; flex-direction:column; gap:2px; min-width:0; }
.fn-stat .fn-v { font-size:22px; font-weight:800; line-height:1.05; color:var(--cv-text);
                 font-variant-numeric:tabular-nums; }
.fn-stat .fn-l { font-size:9px; color:var(--cv-muted); text-transform:uppercase; letter-spacing:.04em; }
.fn-stat .fn-gather { font-size:12px; font-style:italic; color:var(--cv-muted); line-height:1.2; }
.fn-spark { width:100%; height:34px; display:block; }
.fn-spark-line { stroke:var(--cv-gold); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.fn-spark-area { fill:rgba(202,138,4,.12); stroke:none; }
.fn-nospark { color:var(--cv-muted); font-size:11px; padding:9px 0; }
.fn-charts { margin-top:22px; }
@media (max-width:520px){ .fn-grid { grid-template-columns:1fr; } }