/* =============================================================================
   VO CRM - "Operations Console" cockpit design-system layer
   Source of truth: docs/design/cockpit-concepts/d-hybrid.html (Concept D)
   Refactored into the reusable .cpx-* instrument component kit.

   Division of labor: Tailwind CDN owns LAYOUT (flex/grid/spacing/responsive);
   this file owns the INSTRUMENT LOOK via semantic .cpx-* classes. Pure CSS, so
   styling survives htmx partial swaps with no JS dependency.

   Color discipline (two metals, two jobs):
     --gold (structural)      = ambient chrome: instrument frames, hero numerals,
                                donut/funnel/gauge ink, panel corner accents. Faint,
                                STATIC, everywhere. "This is an instrument."
     --signal-priority (amber)= the needs-you SIGNAL: a near deadline, an awaiting
                                reply, a focal node, a selection ring. Scarce and the
                                ONLY glow that animates. "This needs you."
   Gold and amber are kept as separate tokens on purpose; do not collapse them.
   --signal-nominal (green) = nominal/healthy. --signal-critical (red) = critical.
   --signal-dream (purple) = dream-client marker. Never decorative amber.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Self-hosted fonts (no external CDN - offline-capable, self-hostable on VPS)
   --------------------------------------------------------------------------- */
@font-face{
  font-family:"Saira";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/static/fonts/saira-400.woff2") format("woff2");
}
@font-face{
  font-family:"Saira";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/static/fonts/saira-600.woff2") format("woff2");
}
@font-face{
  font-family:"Spline Sans Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/static/fonts/spline-sans-mono-400.woff2") format("woff2");
}
@font-face{
  font-family:"Spline Sans Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/static/fonts/spline-sans-mono-500.woff2") format("woff2");
}

/* ---------------------------------------------------------------------------
   Design tokens
   Text runs BRIGHT by user preference: --txt is pure white, --txt-dim is a
   near-white light gray. Higher contrast on the dark substrate = strictly more
   accessible; do not darken these back down.
   --------------------------------------------------------------------------- */
:root{
  /* substrate - base shifted toward the command-center deep teal-black field
     (mockup --field hsl(203 25% 4.5%)) so the translucent glass panels read over
     a cooler ground. The lighter substrate steps are unchanged. */
  --ink:hsl(203 25% 4.5%); --charcoal:#15161a; --gunmetal:#23252b; --steel:#2e3138;

  /* signal logic - amber=priority/attention, green=nominal, red=critical, info=muted accent */
  --signal-priority:#f5b301; --signal-priority-2:#ffcf4d;
  --signal-nominal:#3f9956; --signal-critical:#c2453a; --signal-info:#b3bec9;

  /* text - bright by user preference: white primary, near-white dim */
  --txt:#ffffff; --txt-dim:#e6eaf0;

  /* structure */
  --bezel:#34373f; --hairline:#23252b; --inset:#0e0f12;

  /* ---------------------------------------------------------------------------
     STRUCTURAL GOLD (chrome) - ported from the command-center mockup (Concept E).
     This is ambient *structure*: faint, static gold for instrument frames, hero
     numerals, donut/funnel/gauge ink, and panel corner accents. It is NOT the
     amber needs-you signal. Gold = "this is an instrument"; amber
     (--signal-priority, below) = "this needs you". Keep them separate: gold never
     animates or pulses, amber does. (See the design-system doc, "Gold as ambient
     structure vs amber as signal".)
     --------------------------------------------------------------------------- */
  --gold:hsl(48 84% 50%); --gold-2:hsl(46 96% 62%); --gold-deep:hsl(42 72% 34%);
  --gold-gradient:linear-gradient(180deg, var(--gold-2), var(--gold) 52%, var(--gold-deep));
  --gold-ambient:rgba(235,178,30,0.09);     /* faint gold fill behind structural chips */
  --gold-edge:rgba(245,200,90,0.40);        /* the structural gold hairline / corner tick */
  --gold-edge-soft:rgba(245,200,90,0.16);   /* softest gold hairline (lead rules) */

  /* GLOW utilities (chrome bloom vs the loud needs-you signal) */
  --glow-bloom:drop-shadow(0 0 6px rgba(245,200,66,.30)) drop-shadow(0 0 15px rgba(245,200,66,.13)); /* soft gold bloom for hero instruments (static); restrained to match the reference */
  --glow-bezel:inset 0 1px 0 rgba(160,190,220,0.05);  /* faint inner top highlight on lit glass */
  --glow-amber-signal:0 0 8px rgba(255,207,77,0.5), 0 0 18px -2px rgba(255,207,77,0.6); /* the LOUD amber signal glow - needs-you only, the only glow that animates */

  /* gauge backplate - recessed tinted well behind reply-rate / score tapes */
  --gauge-backplate:rgba(245,200,90,0.05);

  /* ---------------------------------------------------------------------------
     BACKDROP / TEAL FIELD - the luminous cyber-city map substrate ONLY. Teal is
     a backdrop color, never a data color. Used by .cpx-body__city / __field /
     __vignette and the rail/panel field-bleed. --blue-map is the desaturated teal
     the contour map is stroked in; the edges are translucent tints of it.
     --------------------------------------------------------------------------- */
  --blue-map:#6fb0c8;                       /* desaturated teal the city map glows in */
  --blue-edge:rgba(111,176,200,0.14);       /* teal field-bleed at the rail / panel edge */
  --blue-haze:rgba(40,98,128,0.20);         /* teal atmospheric haze under the top bar */
  --teal-edge:var(--blue-edge);             /* alias: the teal hairline edge tint */
  --rail-glass:rgba(15,21,27,0.40);         /* translucent left-rail veil - the cyber-city reads crisply through the rail (no blur); lower the alpha to show more city, raise it for more nav-label contrast */

  /* derived signal tints (translucent, for fills/glows) */
  --priority-dim:rgba(245,179,1,.12);
  --nominal-dim:rgba(63,153,86,.14);
  --critical-dim:rgba(194,69,58,.16);
  --info-dim:rgba(91,100,114,.14);

  /* dream-client designation - a SPECIAL category marker, NOT a health signal.
     The only purple in the system; kept outside amber/green/red so it never reads
     as priority/nominal/critical. */
  --signal-dream:#a779e8; --signal-dream-2:#d4b8ff; --dream-dim:rgba(167,121,232,.18);

  /* warmth ramp: engagement recency on the relationship graph, hot (orange) to cold
     (blue) in 5 steps. A data spectrum (heatmap convention), distinct from the amber
     priority signal. 4=hot recent contact ... 0=cold/never (may need re-introduction). */
  --warmth-4:#ff8a4c; --warmth-3:#f4b15e; --warmth-2:#a9b1bd; --warmth-1:#6699d6; --warmth-0:#4070b5;

  /* ---------------------------------------------------------------------------
     INSTRUMENT DATA RAMP - the single gold->bronze->steel monochrome chart palette
     for the dashboard instruments (funnel bands, audition donut). It is ambient
     gold STRUCTURE, not the amber needs-you signal: it never animates. Ordered
     ramp-1 (brightest gold) .. ramp-5 (cool steel). (See the design-system doc,
     "Instrument data ramp".)
     --------------------------------------------------------------------------- */
  --ramp-1:hsl(46 96% 62%); --ramp-2:hsl(44 84% 50%); --ramp-3:hsl(38 70% 44%);
  --ramp-4:hsl(34 40% 42%); --ramp-5:hsl(205 12% 44%);
  /* desaturated steel-blue greys (decorative instrument substrate) */
  --steel-info:hsl(203 14% 67%);
  /* soft amber text-shadow for hero instrument numerals (static, not the signal) */
  --num-bloom:0 0 8px rgba(245,200,66,.20), 0 0 4px rgba(255,236,170,.14);

  --font-display:"Saira",sans-serif; --font-mono:"Spline Sans Mono",monospace;
  --r:6px; --gap:16px;
}

/* ---------------------------------------------------------------------------
   Substrate - body background, phosphor grid, scanline (decorative, not signal)
   --------------------------------------------------------------------------- */
.cpx-body{
  background:
    radial-gradient(1200px 700px at 78% -8%, var(--priority-dim), transparent 60%),
    radial-gradient(1000px 640px at 6% 112%, var(--charcoal) 0%, transparent 58%),
    var(--ink);
  color:var(--txt);
  font-family:var(--font-display);
  font-size:13px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
/* faint phosphor grid texture */
.cpx-body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(154,161,171,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,161,171,0.018) 1px, transparent 1px);
  background-size:33px 33px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 4%, #000 52%, transparent 100%);
  mask-image:radial-gradient(120% 100% at 50% 4%, #000 52%, transparent 100%);
}
/* subtle scanline + vignette */
.cpx-body::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 1px, transparent 1px, transparent 3px);
  opacity:0.30; mix-blend-mode:multiply;
}

.cpx-mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ===========================================================================
   .cpx-statusbar - persistent top telemetry bar
   =========================================================================== */
.cpx-statusbar{
  display:flex; align-items:center; gap:18px; min-height:48px; padding:0 20px;
  border-bottom:1px solid var(--hairline);
  background:linear-gradient(180deg, #16181d, #101216);
  box-shadow:0 1px 0 rgba(255,255,255,0.02) inset, 0 8px 18px -12px #000;
  font-size:11px; position:relative; z-index:5; flex-wrap:wrap;
}
.cpx-statusbar__brand{
  font-family:var(--font-display); font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt); font-size:12px; display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.cpx-statusbar__brand b{ color:var(--signal-nominal); }
.cpx-statusbar__online{
  display:flex; align-items:center; gap:7px; color:var(--signal-nominal);
  font-family:var(--font-mono); letter-spacing:.14em; font-size:10px;
}
.cpx-statusbar__online .cpx-lamp{
  width:8px; height:8px; border-radius:50%; background:var(--signal-nominal);
  box-shadow:0 0 8px var(--signal-nominal), 0 0 2px #fff inset;
}
.cpx-statusbar__div{ width:1px; height:18px; background:var(--hairline); }
.cpx-statusbar__stat{
  display:flex; align-items:center; gap:7px; font-family:var(--font-mono);
  color:var(--txt-dim); letter-spacing:.1em; font-size:10px; white-space:nowrap;
}
.cpx-statusbar__stat b{ color:var(--txt); }
.cpx-statusbar__stat b.cpx-am{ color:var(--signal-priority); }   /* amber = attention metric */
.cpx-statusbar__right{ margin-left:auto; display:flex; align-items:center; gap:14px; }
.cpx-clock{
  font-family:var(--font-mono); color:var(--txt); letter-spacing:.06em; font-size:12px;
  padding:5px 11px; border:1px solid var(--hairline); border-radius:5px; background:var(--inset);
  box-shadow:0 0 0 1px rgba(0,0,0,0.4) inset;
}
.cpx-clock .cpx-z{ color:var(--txt-dim); }

/* ===========================================================================
   .cpx-cmdbar - command-line bar with phosphor caret + quick-jump
   =========================================================================== */
.cpx-cmdbar{
  border:1px solid var(--bezel); border-radius:8px; overflow:hidden;
  background:linear-gradient(180deg, #14161b, #0b0c0f);
  box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 16px 30px -24px #000, 0 0 0 1px rgba(0,0,0,0.5);
}
.cpx-cmdbar__top{
  display:flex; align-items:center; gap:8px; padding:7px 13px; border-bottom:1px solid var(--hairline);
  font-family:var(--font-mono); font-size:9px; letter-spacing:.2em; color:var(--txt-dim); background:var(--inset);
}
.cpx-cmdbar__top .cpx-corner{ color:var(--gold-2); }
.cpx-cmdbar__preview{ margin-left:auto; color:var(--signal-info); letter-spacing:.18em; }
.cpx-cmdbar__line{ display:flex; align-items:center; gap:13px; padding:14px 18px; }
.cpx-cmdbar__chev{
  color:var(--gold-2); font-family:var(--font-mono); font-size:20px; font-weight:700; line-height:1;
  text-shadow:0 0 10px rgba(245,200,66,.5);
}
.cpx-cmdbar__input{
  flex:1 1 auto; min-width:0; background:transparent; border:0; outline:none;
  font-family:var(--font-mono); font-size:16px; color:var(--txt); letter-spacing:.01em;
}
.cpx-cmdbar__input::placeholder{ color:var(--txt-dim); }
/* static prompt fallback when no <input> is used */
.cpx-cmdbar__prompt{ font-family:var(--font-mono); font-size:16px; color:var(--txt); letter-spacing:.01em; white-space:nowrap; }
.cpx-cmdbar__prompt .cpx-q{ color:var(--txt-dim); }
.cpx-caret{
  display:inline-block; width:9px; height:19px; vertical-align:-3px; margin-left:2px;
  background:var(--gold-2); box-shadow:0 0 9px var(--gold-2);
}
.cpx-cmdbar__kbd{ margin-left:auto; display:flex; gap:6px; }
.cpx-cmdbar__kbd span{
  font-family:var(--font-mono); font-size:10px; color:var(--txt-dim);
  border:1px solid var(--bezel); border-radius:3px; padding:3px 7px; background:var(--charcoal);
}
/* quick-jump results dropdown */
.cpx-cmdbar__results{
  list-style:none; margin:0; padding:4px; border-top:1px solid var(--hairline); background:var(--inset);
}
.cpx-cmdbar__results:empty{ display:none; }
.cpx-cmdbar__result{
  display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:5px;
  font-family:var(--font-display); font-size:13px; color:var(--txt-dim); cursor:pointer;
}
.cpx-cmdbar__result[aria-selected="true"],
.cpx-cmdbar__result:hover{ background:var(--charcoal); color:var(--txt); }
.cpx-cmdbar__result .cpx-mono{ margin-left:auto; font-size:10px; color:var(--txt-dim); }

/* ===========================================================================
   .cpx-rail / .cpx-rail-group / .cpx-rail-item - grouped ops-console nav
   =========================================================================== */
.cpx-rail{
  border-right:1px solid var(--hairline);
  background:var(--rail-glass);    /* translucent glass: the lit cyber-city reads crisply through the rail (no blur) */
  display:flex; flex-direction:column; position:relative;
  flex:0 0 auto;  /* fixed-width sidebar - never shrink, regardless of main-content width */
}
.cpx-rail::after{
  content:""; position:absolute; top:0; right:-1px; bottom:0; width:1px;
  background:linear-gradient(180deg, transparent, rgba(245,179,1,.22), transparent);
}
.cpx-rail__brand{
  padding:16px 16px 14px; border-bottom:1px solid var(--hairline);
  display:flex; flex-direction:column; gap:9px;
}
.cpx-rail__brand h1{
  font-family:var(--font-display); font-weight:600; font-size:13.5px; letter-spacing:.13em; line-height:1; color:var(--txt);
}
.cpx-rail__brand span{
  font-size:9px; letter-spacing:.26em; color:var(--txt-dim); text-transform:uppercase;
}
.cpx-rail__tag{
  font-family:var(--font-mono); font-size:8.5px; letter-spacing:.22em; color:var(--signal-priority);
  border:1px solid rgba(245,179,1,.32); background:var(--priority-dim);
  padding:3px 6px; align-self:flex-start; border-radius:2px;
}
.cpx-rail-group{ padding:13px 11px 6px; }
.cpx-rail-group__lbl{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.24em; color:var(--txt-dim); padding:0 8px 8px;
}
.cpx-rail-item{
  display:flex; align-items:center; gap:11px;
  padding:8px 10px; margin:1px 0; border-radius:5px;
  color:var(--txt-dim); text-decoration:none;
  font-family:var(--font-display); font-weight:400; letter-spacing:.03em; font-size:13px;
  border:1px solid transparent; position:relative;
  transition:background .15s, color .15s, border-color .15s;
}
.cpx-rail-item .cpx-ic{ width:15px; height:15px; flex:0 0 auto; opacity:.72; stroke:currentColor; fill:none; stroke-width:1.7; }
.cpx-rail-item:hover{ background:var(--gunmetal); color:var(--txt); border-color:var(--steel); }
.cpx-rail-item:focus-visible{ outline:2px solid var(--signal-priority); outline-offset:1px; }
.cpx-rail-item--active{
  background:linear-gradient(90deg, rgba(63,153,86,0.15), rgba(63,153,86,0.02));
  color:var(--txt); border-color:rgba(63,153,86,.24);
}
.cpx-rail-item--active::before{
  content:""; position:absolute; left:-11px; top:6px; bottom:6px; width:2px;
  background:var(--signal-nominal); box-shadow:0 0 8px var(--signal-nominal);
}
.cpx-rail-item--active .cpx-ic{ opacity:1; color:var(--signal-nominal); }
.cpx-rail-item--locked{ color:var(--txt-dim); cursor:not-allowed; opacity:.72; }
.cpx-rail-item--locked .cpx-ic{ opacity:.4; }
.cpx-rail-item--locked:hover{ background:transparent; border-color:transparent; }
.cpx-rail-item__ver{
  margin-left:auto; font-family:var(--font-mono); font-size:8px; letter-spacing:.14em; color:var(--signal-priority);
  border:1px solid rgba(245,179,1,.32); padding:2px 5px; border-radius:2px; background:var(--priority-dim);
}
.cpx-rail__sep{ height:1px; background:var(--hairline); margin:8px 9px; }

/* ===========================================================================
   .cpx-panel - framed bezel instrument panel (+ corner brackets, header, tag)
   =========================================================================== */
/* Command-center glass: a lit translucent rectangle. The cyber-city map field
   (z0) reads THROUGH the rgba background, so the panel reads as glass over a
   brighter teal ground. One thin hairline, faint inner top highlight, a small
   radius, and a single faint gold corner tick (top-left via ::after). Ported from
   the mockup .panel. Templates may still add four .cpx-panel__bracket corner ticks;
   both coexist. */
.cpx-panel{
  position:relative; border:1px solid var(--hairline); border-radius:var(--r);
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(245,200,90,0.03), transparent 60%),
    rgba(10,16,24,0.74);
  backdrop-filter:blur(5px) saturate(115%); -webkit-backdrop-filter:blur(5px) saturate(115%);
  box-shadow:
    var(--glow-bezel),               /* faint inner top highlight - lit glass */
    0 14px 30px -26px #000;
  overflow:hidden;
}
/* a single subtle gold corner accent (top-left), the mockup's clean-chrome tick.
   Sits under any explicit .cpx-panel__bracket ticks a template adds. */
.cpx-panel::after{
  content:""; position:absolute; top:-1px; left:-1px; width:14px; height:14px;
  pointer-events:none; z-index:3;
  border-top:1px solid var(--gold-edge); border-left:1px solid var(--gold-edge);
  border-top-left-radius:var(--r); opacity:.7;
}
.cpx-panel__bracket{ position:absolute; width:11px; height:11px; border:1.5px solid rgba(245,179,1,.42); pointer-events:none; }
.cpx-panel__bracket--tl{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.cpx-panel__bracket--tr{ top:-1px; right:-1px; border-left:0; border-bottom:0; }
.cpx-panel__bracket--bl{ bottom:-1px; left:-1px; border-right:0; border-top:0; }
.cpx-panel__bracket--br{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.cpx-panel__hd{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--hairline); }
.cpx-panel__hd .cpx-dot{ width:6px; height:6px; border-radius:50%; background:var(--signal-info); box-shadow:0 0 6px var(--signal-info); }
.cpx-panel__hd .cpx-dot--am{ background:var(--signal-priority); box-shadow:0 0 6px var(--signal-priority); }
.cpx-panel__title{
  font-family:var(--font-display); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:15px; color:var(--txt);
  white-space:nowrap;  /* headers stay on one row; never wrap to a second line */
}
.cpx-panel__hd{ flex-wrap:nowrap; }
.cpx-panel__hd .cpx-panel__sub{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.cpx-panel__sub{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--txt-dim); text-transform:uppercase; }
.cpx-panel__tag{
  margin-left:auto; font-family:var(--font-mono); font-weight:500; font-size:9px; letter-spacing:.14em; color:var(--signal-priority);
  border:1px solid rgba(245,179,1,.45); padding:2px 6px; border-radius:2px; background:var(--priority-dim);
}
/* info + nominal chips brightened/saturated so they pop as readouts (amber stays the loudest) */
.cpx-panel__tag--info{ color:#aeb9c7; border-color:rgba(174,185,199,.5); background:rgba(174,185,199,.14); }
.cpx-panel__tag--nominal{ color:#5fcf87; border-color:rgba(95,207,135,.5); background:rgba(95,207,135,.16); }
/* Dream-client chip - the single dream indicator. ~1.5x the standard chip, purple
   (the special-designation color, never amber), with margin for breathing room. The
   "shimmer" is a SATURATION wave: a band of richer purple drifts across the chip
   BEHIND the text (a z-index:-1 ::before, so it never overlays or washes out the
   label) once per ~2.4s. No white at any point, so the text stays readable. */
.cpx-panel__tag--dream{
  position:relative; overflow:hidden; isolation:isolate;
  margin:3px 0 3px auto;
  font-size:13.5px; font-weight:600; letter-spacing:.08em; padding:3px 11px; border-radius:5px;
  text-transform:none; color:var(--signal-dream-2);
  border:1px solid var(--signal-dream); background:var(--dream-dim);
  box-shadow:0 0 11px rgba(167,121,232,.28), 0 0 2px rgba(212,184,255,.4) inset;
}
.cpx-panel__tag--dream::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg, transparent 34%, rgba(159,84,242,.6) 50%, transparent 66%);
  transform:translateX(-130%);
  animation:cpx-dream-sat 2.4s ease-in-out infinite;
}
@keyframes cpx-dream-sat{ 0%{ transform:translateX(-130%); } 60%,100%{ transform:translateX(130%); } }
/* Reduced motion: stop the wave, park the band off-chip -> a clean, evenly purple
   chip (no movement, no overlay). The border + glow still mark it as special. */
@media (prefers-reduced-motion: reduce){ .cpx-panel__tag--dream::before{ animation:none; } }
.cpx-panel__body{ padding:14px; }

/* ===========================================================================
   .cpx-annunciator - status lamp (label + state shape, never color-only)
   =========================================================================== */
.cpx-annunciator{
  border:1px solid var(--hairline); border-radius:5px; padding:9px 10px;
  background:var(--inset); display:flex; flex-direction:column; gap:6px;
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset;
}
.cpx-annunciator__row{ display:flex; align-items:center; gap:7px; }
.cpx-annunciator__lamp{ width:9px; height:9px; border-radius:2px; flex:0 0 auto; background:#252a30; }
.cpx-annunciator__name{ font-family:var(--font-display); font-weight:600; font-size:10px; letter-spacing:.07em; color:var(--txt); text-transform:uppercase; }
.cpx-annunciator__state{ font-family:var(--font-mono); font-size:9px; letter-spacing:.06em; color:var(--txt-dim); }
.cpx-annunciator__state b{ color:var(--txt); }
/* states */
.cpx-annunciator--nominal .cpx-annunciator__lamp{ background:var(--signal-nominal); box-shadow:0 0 8px var(--signal-nominal); }
.cpx-annunciator--priority .cpx-annunciator__lamp{ background:var(--signal-priority); box-shadow:0 0 8px var(--signal-priority); }
.cpx-annunciator--critical .cpx-annunciator__lamp{ background:var(--signal-critical); box-shadow:0 0 8px var(--signal-critical); }

/* ===========================================================================
   .cpx-readout - segmented monospace value-with-units
   =========================================================================== */
.cpx-readout{
  background:linear-gradient(180deg, var(--charcoal), #0e1114); padding:13px 14px;
  display:flex; flex-direction:column; gap:7px; min-height:90px;
}
.cpx-readout__k{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-dim);
  display:flex; justify-content:space-between; align-items:center;
}
.cpx-readout__k .cpx-u{ color:var(--txt-dim); letter-spacing:.05em; }
.cpx-readout__val{ font-family:var(--font-mono); font-weight:500; font-size:27px; color:var(--txt); line-height:1; }
.cpx-readout__val .cpx-u2{ font-size:12px; color:var(--txt-dim); font-weight:400; }
.cpx-readout--lg .cpx-readout__val{ font-size:34px; }
.cpx-readout--priority .cpx-readout__val{ color:var(--signal-priority); }
.cpx-readout--nominal .cpx-readout__val{ color:var(--signal-nominal); }
.cpx-readout--critical .cpx-readout__val{ color:var(--signal-critical); }
.cpx-readout__delta{ font-family:var(--font-mono); font-size:10px; letter-spacing:.03em; color:var(--txt-dim); }
.cpx-readout__delta .cpx-up{ color:var(--signal-nominal); }
.cpx-readout__delta .cpx-dn{ color:var(--signal-critical); }
/* grid wrapper for readout clusters (hairline-separated) */
.cpx-readouts{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--hairline);
  border:1px solid var(--hairline); border-radius:5px; overflow:hidden;
}
/* contact-card Relationship Vitals: 3 across so 5 cells read 3 + (1 + wide) */
.cpx-readouts--vitals { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .cpx-readouts--vitals { grid-template-columns: repeat(2, 1fr); } }
/* reply-rate gauge tape with target marker */
.cpx-gauge{ position:relative; width:100%; height:8px; border-radius:4px; background:var(--inset); border:1px solid var(--hairline); overflow:hidden; }
.cpx-gauge__fill{ position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg, var(--signal-nominal), #5fcf87); box-shadow:0 0 8px var(--signal-nominal); }
.cpx-gauge__ticks{ position:absolute; inset:0; background-image:repeating-linear-gradient(90deg, transparent 0 9px, rgba(11,11,13,.7) 9px 10px); }
.cpx-gauge__target{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--signal-priority); box-shadow:0 0 6px var(--signal-priority); }
.cpx-readout__gmini{ font-family:var(--font-mono); font-size:8.5px; color:var(--txt-dim); display:flex; justify-content:space-between; }
.cpx-readout__gmini .cpx-tgt{ color:var(--signal-priority); }

/* ===========================================================================
   .cpx-tape - segmented funnel / gauge bar (the Pipeline Command instrument)
   =========================================================================== */
.cpx-funnel{ display:flex; flex-direction:column; gap:13px; }
.cpx-tape-row{ display:grid; grid-template-columns:130px 1fr 48px; gap:13px; align-items:center; }
.cpx-tape-row__nm{ display:flex; flex-direction:column; gap:2px; }
.cpx-tape-row__nm .cpx-s{ font-family:var(--font-display); font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:11px; color:var(--txt); }
.cpx-tape-row__nm .cpx-c{ font-family:var(--font-mono); font-size:9px; color:var(--txt-dim); letter-spacing:.1em; }
.cpx-tape{
  height:24px; border:1px solid var(--hairline); border-radius:3px; background:var(--inset); position:relative; overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset;
}
.cpx-tape__scale{ position:absolute; inset:0; background-image:repeating-linear-gradient(90deg, transparent 0 23px, rgba(255,255,255,.05) 23px 24px); }
.cpx-tape__fill{
  position:absolute; top:0; left:0; bottom:0; border-radius:2px 0 0 2px; width:0;
  background:repeating-linear-gradient(90deg, var(--bar, var(--signal-info)) 0 8px, color-mix(in srgb, var(--bar, var(--signal-info)) 62%, #000) 8px 10px);
  box-shadow:0 0 18px -4px var(--bar, var(--signal-info)) inset;
}
.cpx-tape__pct{ position:absolute; right:8px; top:50%; transform:translateY(-50%); font-family:var(--font-mono); font-size:10px; color:var(--txt-dim); }
.cpx-tape-row__v{ font-family:var(--font-mono); font-weight:500; font-size:18px; text-align:right; color:var(--txt); }
/* segment fills: neutral steel through to nominal at the booked end; amber only at attention stage */
.cpx-tape-row--s1{ --bar:#6b7882; } .cpx-tape-row--s2{ --bar:#8a949b; }
.cpx-tape-row--s3{ --bar:var(--signal-priority); }
.cpx-tape-row--s4{ --bar:var(--signal-nominal); }
.cpx-tape-row--s4 .cpx-tape-row__v{ color:var(--signal-nominal); }
/* pinch - the steepest interior fall-off, flagged for attention (amber = signal) */
.cpx-tape-row--pinch{ --bar:var(--signal-priority); }
.cpx-tape-row--pinch .cpx-tape-row__nm .cpx-s{ color:var(--signal-priority); }
.cpx-tape-row--pinch .cpx-tape-row__v{ color:var(--signal-priority); }
.cpx-funnel__pinch{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:11px; color:var(--txt-dim);
  margin-top:12px; padding:9px 11px; border:1px solid rgba(245,179,1,.28);
  border-left:2px solid var(--signal-priority); border-radius:3px; background:var(--priority-dim);
}
.cpx-funnel__pinch b{ color:var(--txt); }
.cpx-funnel__pinch .cpx-mono{ color:var(--signal-priority); }
.cpx-funnel__pinch-k{
  font-family:var(--font-display); font-weight:600; letter-spacing:.14em; font-size:9px;
  color:var(--signal-priority); border:1px solid rgba(245,179,1,.4); padding:1px 6px; border-radius:2px;
}
.cpx-funnel__foot{
  display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-family:var(--font-mono); font-size:10px; color:var(--txt-dim);
  margin-top:12px; border-top:1px solid var(--hairline); padding-top:11px;
}
.cpx-funnel__foot b{ color:var(--txt); }
.cpx-funnel__foot b.cpx-ok{ color:var(--signal-nominal); }
.cpx-funnel__foot b.cpx-am{ color:var(--signal-priority); }
/* annunciator lamp cluster wrapper */
.cpx-lampcluster{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:14px 0 2px; }

/* ===========================================================================
   .cpx-pill - status pill (the upgraded priority_pill macro)
   =========================================================================== */
.cpx-pill{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  padding:3px 7px; border-radius:2px; border:1px solid var(--hairline);
  color:var(--txt-dim); background:var(--inset); white-space:nowrap;
}
.cpx-pill--priority{ color:var(--signal-priority); border-color:rgba(245,179,1,.4); background:var(--priority-dim); }
.cpx-pill--nominal{ color:#5fcf87; border-color:rgba(63,153,86,.4); background:var(--nominal-dim); }
.cpx-pill--critical{ color:var(--signal-critical); border-color:rgba(194,69,58,.42); background:var(--critical-dim); }
.cpx-pill--info{ color:var(--signal-info); border-color:rgba(91,100,114,.4); background:var(--info-dim); }
/* Neutral chips for low-salience categorical states, so a column reads as consistent
   chips without spending a signal color. Two steps for a cold->warm ramp:
   --ghost (faintest, no fill: e.g. relationship Lead) and --muted (filled grey: Prospect). */
.cpx-pill--ghost{ color:var(--txt-dim); border-color:var(--hairline); background:transparent; opacity:.62; }
.cpx-pill--muted{ color:var(--txt); border-color:var(--hairline); background:var(--inset); }

/* .cpx-note - framed multi-line note block; tone variant tints the frame (mirrors .cpx-pill tones). */
.cpx-note{ font-family:var(--font-mono); font-size:12px; line-height:1.5; color:var(--txt-dim); border:1px solid var(--hairline); border-radius:var(--r); padding:10px 12px; }
.cpx-note--priority{ border-color:rgba(245,179,1,.4); background:var(--priority-dim); }

/* ===========================================================================
   .cpx-row - annunciator action-queue row
   =========================================================================== */
.cpx-row{
  display:grid; grid-template-columns:26px 92px 1fr auto; gap:12px; align-items:center;
  padding:11px 13px; border-radius:7px; position:relative; overflow:hidden;
  background:linear-gradient(90deg, var(--charcoal), #0f1114); border:1px solid var(--hairline);
  margin:3px 0;
}
.cpx-row__rank{ font-family:var(--font-mono); font-size:12px; color:var(--txt-dim); text-align:center; }
.cpx-row__annun{
  font-family:var(--font-display); font-weight:600; letter-spacing:.07em; font-size:10.5px;
  text-align:center; padding:5px 4px; border-radius:4px; text-transform:uppercase; border:1px solid transparent; line-height:1.05;
}
.cpx-row__annun--critical{ color:#fff; background:var(--signal-critical); box-shadow:0 0 14px -2px var(--signal-critical); }
.cpx-row__annun--priority{ color:var(--ink); background:var(--signal-priority); box-shadow:0 0 14px -2px var(--signal-priority); }
.cpx-row__annun--warn{ color:var(--signal-priority-2); background:var(--priority-dim); border-color:rgba(245,179,1,.32); }
.cpx-row__annun--info{ color:var(--signal-nominal); background:var(--nominal-dim); border-color:rgba(63,153,86,.4); }
.cpx-row__body .cpx-row__name{ font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--txt); letter-spacing:.01em; }
.cpx-row__body .cpx-row__name .cpx-role{ color:var(--txt-dim); font-weight:400; font-size:12.5px; }
.cpx-row__body .cpx-row__meta{ font-family:var(--font-mono); font-size:10.5px; color:var(--txt-dim); margin-top:3px; letter-spacing:.01em; }
.cpx-row__chip{ font-family:var(--font-mono); font-size:11px; color:var(--txt-dim); text-align:right; white-space:nowrap; }
.cpx-row__chip b{ display:block; font-size:14px; margin-top:2px; color:var(--txt); }
.cpx-row__chip b.cpx-t-crit{ color:var(--signal-critical); }
.cpx-row__chip b.cpx-t-warn{ color:var(--signal-priority-2); }
.cpx-row__chip b.cpx-t-ok{ color:var(--signal-nominal); }
/* left edge accent */
.cpx-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent; }
.cpx-row--critical::before{ background:var(--signal-critical); box-shadow:0 0 12px var(--signal-critical); }
.cpx-row--priority::before{ background:var(--signal-priority); box-shadow:0 0 12px var(--signal-priority); }

/* ===========================================================================
   Briefing header
   =========================================================================== */
.cpx-briefing{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:2px; flex-wrap:wrap; }
.cpx-briefing__h{ font-family:var(--font-display); font-weight:600; font-size:30px; letter-spacing:.01em; color:var(--txt); line-height:1.05; }
.cpx-briefing__h .cpx-sub{ color:var(--txt-dim); font-weight:400; }
.cpx-briefing__line{ margin-top:8px; font-family:var(--font-mono); font-size:12.5px; color:var(--txt-dim); letter-spacing:.01em; }
.cpx-briefing__line .cpx-b{ color:var(--txt); font-weight:600; }
.cpx-briefing__line .cpx-am{ color:var(--signal-priority); }
.cpx-briefing__line .cpx-ok{ color:var(--signal-nominal); }
.cpx-briefing__stamp{ text-align:right; font-family:var(--font-mono); font-size:10px; color:var(--txt-dim); letter-spacing:.08em; line-height:1.8; }
.cpx-briefing__stamp b{ color:var(--txt); }
.cpx-briefing__stamp b.cpx-hi{ color:var(--signal-nominal); }

/* ===========================================================================
   .cpx-radar - Opportunity Radar (v3 PREVIEW). Cyan-free: uses --signal-info.
   =========================================================================== */
.cpx-radar__strip{
  font-family:var(--font-mono); font-size:10px; color:var(--txt-dim); padding:10px 14px;
  border-bottom:1px solid var(--hairline); letter-spacing:.06em; display:flex; align-items:center; gap:9px;
}
.cpx-radar__strip .cpx-scan-lamp{ width:8px; height:8px; border-radius:50%; background:var(--signal-nominal); box-shadow:0 0 9px var(--signal-nominal); animation:cpx-scan-pulse 2.4s ease-in-out infinite; }
.cpx-radar__strip b{ color:#5fcf87; }
.cpx-radar__list{ display:flex; flex-direction:column; }
.cpx-radar__item{ display:grid; grid-template-columns:34px 1fr auto; gap:13px; align-items:center; padding:14px 14px; border-bottom:1px solid var(--hairline); border-left:2px solid transparent; position:relative; transition:background .15s ease; }
.cpx-radar__item:last-child{ border-bottom:0; }
a.cpx-radar__item:hover{ background:rgba(255,255,255,.025); }
.cpx-radar__ic{ width:30px; height:30px; flex:0 0 auto; position:relative; display:grid; place-items:center; border-radius:50%; }
.cpx-radar__ic svg{ width:26px; height:26px; stroke:var(--signal-info); fill:none; stroke-width:1.5; opacity:.95; }
.cpx-radar__txt{ font-size:13.5px; color:var(--txt-dim); line-height:1.45; }
.cpx-radar__txt .cpx-k{ font-family:var(--font-display); font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:10px; color:var(--signal-info); margin-right:8px; padding:1px 6px; border:1px solid currentColor; border-radius:2px; }
.cpx-radar__txt b{ color:var(--txt); font-weight:600; }
.cpx-radar__txt .cpx-when, .cpx-radar__when{ display:block; margin-top:3px; font-family:var(--font-mono); font-size:10.5px; color:var(--txt-dim); letter-spacing:.06em; }
.cpx-radar__txt .cpx-am{ color:var(--signal-priority); }
.cpx-radar__age{ font-family:var(--font-mono); font-size:10px; color:var(--txt-dim); white-space:nowrap; letter-spacing:.1em; }

/* row differentiation by kind - amber = audition DEADLINE (priority), info = follow-up */
.cpx-radar__item--priority{ border-left-color:var(--signal-priority); }
.cpx-radar__item--priority .cpx-k{ color:var(--signal-priority); }
.cpx-radar__item--priority .cpx-radar__ic{ background:var(--priority-dim); }
.cpx-radar__item--priority .cpx-radar__ic svg{ stroke:var(--signal-priority); opacity:1; }
.cpx-radar__item--info{ border-left-color:var(--signal-info); }
.cpx-radar__item--info .cpx-radar__ic{ background:rgba(174,185,199,.12); }
.cpx-radar__item--info .cpx-radar__ic svg{ stroke:#aeb9c7; opacity:1; }
.cpx-radar__age--live{ color:#5fcf87; font-weight:500; }
.cpx-radar__age--live::before{ content:"●"; margin-right:5px; font-size:8px; vertical-align:middle; }
.cpx-radar__item--future{ opacity:.5; border-left-color:var(--bezel); }
/* overflow affordances - "+N more -> breakout page" when a capped section truncates */
.cpx-radar__more, .cpx-queue__more{
  display:block; text-decoration:none; text-align:center;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt-dim); padding:10px 14px; border-top:1px solid var(--hairline);
  transition:color .15s, background .15s;
}
.cpx-radar__more:hover, .cpx-queue__more:hover{ color:var(--signal-priority); background:rgba(255,255,255,.025); }

/* ===========================================================================
   .cpx-tip - hover/focus tooltip that defines a term (e.g. audition status).
   CSS-only; aria-label carries the same text for screen readers.
   =========================================================================== */
.cpx-tip{ position:relative; display:inline-block; cursor:help; outline:none; }
.cpx-tip[data-tip]::after{
  content:attr(data-tip);
  position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%) translateY(4px);
  width:max-content; max-width:250px; white-space:normal; text-align:left;
  background:var(--gunmetal); color:var(--txt); border:1px solid var(--bezel); border-radius:5px;
  padding:8px 10px; font-family:var(--font-mono); font-size:11px; line-height:1.5; letter-spacing:.01em;
  box-shadow:0 12px 26px -12px #000; z-index:60;
  opacity:0; pointer-events:none; transition:opacity .14s ease, transform .14s ease;
}
.cpx-tip[data-tip]::before{   /* arrow */
  content:""; position:absolute; left:50%; bottom:calc(100% + 4px); transform:translateX(-50%) rotate(45deg);
  width:9px; height:9px; background:var(--gunmetal); border-right:1px solid var(--bezel); border-bottom:1px solid var(--bezel);
  z-index:61; opacity:0; pointer-events:none; transition:opacity .14s ease;
}
.cpx-tip[data-tip]:hover::after, .cpx-tip[data-tip]:focus-visible::after{ opacity:1; transform:translateX(-50%) translateY(0); }
.cpx-tip[data-tip]:hover::before, .cpx-tip[data-tip]:focus-visible::before{ opacity:1; }
@media (prefers-reduced-motion: reduce){ .cpx-tip[data-tip]::after{ transition:opacity .14s ease; } }
@keyframes cpx-scan-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* ===========================================================================
   .cpx-advisor - Strategic Advisor (rule-based analyst briefing)
   =========================================================================== */
.cpx-advisor__strip{ font-family:var(--font-mono); font-size:9.5px; color:var(--txt-dim); padding:9px 14px; border-bottom:1px solid var(--hairline); letter-spacing:.06em; }
.cpx-advisor__strip b{ color:var(--signal-priority); }
.cpx-advisor__row{ display:grid; grid-template-columns:24px 1fr auto; gap:11px; padding:13px 14px; border-bottom:1px solid var(--hairline); align-items:start; }
.cpx-advisor__row:last-child{ border-bottom:0; }
.cpx-advisor__gly{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center; margin-top:1px; flex:0 0 auto;
  border:1px solid var(--signal-nominal); color:var(--signal-nominal); font-family:var(--font-mono); font-size:10px;
  box-shadow:0 0 10px -4px var(--signal-nominal) inset;
}
.cpx-advisor__row--flag .cpx-advisor__gly{ border-color:rgba(245,179,1,.5); color:var(--signal-priority); box-shadow:0 0 10px -4px var(--signal-priority) inset; }
.cpx-advisor__txt{ font-size:12.5px; color:var(--txt-dim); line-height:1.5; }
.cpx-advisor__txt b{ color:var(--txt); font-weight:600; }
.cpx-advisor__txt .cpx-am{ color:var(--signal-priority); font-family:var(--font-mono); }
.cpx-advisor__txt .cpx-ph{ color:var(--signal-nominal); font-family:var(--font-mono); }
.cpx-advisor__foot{ padding:9px 14px; border-top:1px solid var(--hairline); font-family:var(--font-mono); font-size:9.5px; color:var(--txt-dim); letter-spacing:.06em; display:flex; align-items:center; gap:8px; }
.cpx-advisor__foot .cpx-lamp{ width:6px; height:6px; border-radius:50%; background:var(--signal-nominal); box-shadow:0 0 7px var(--signal-nominal); }

/* ===========================================================================
   .cpx-pipeline - kanban stage board (composes panel/tape/mono tokens)
   Sortable.js drag is preserved via .kanban-col / .kanban-card hooks.
   =========================================================================== */
.cpx-pipeline{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; }
.cpx-pipeline__col{ flex:0 0 248px; display:flex; flex-direction:column; min-width:0; }
.cpx-pipeline__head{
  border:1px solid var(--hairline); border-radius:6px 6px 0 0; border-bottom:0;
  background:linear-gradient(180deg, var(--gunmetal), var(--charcoal));
  padding:9px 11px 11px; box-shadow:0 0 0 1px rgba(0,0,0,.4) inset;
}
.cpx-pipeline__head-top{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.cpx-pipeline__stage-nm{
  font-family:var(--font-display); font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  font-size:11px; color:var(--txt);
}
.cpx-pipeline__stage-ct{ margin-left:auto; font-size:18px; font-weight:500; color:var(--txt-dim); }
.cpx-pipeline__head--won .cpx-pipeline__stage-ct{ color:var(--signal-nominal); }
/* drop zone - Sortable.js target */
.cpx-pipeline__zone{
  border:1px solid var(--hairline); border-radius:0 0 6px 6px;
  background:var(--inset); padding:8px; min-height:180px;
  display:flex; flex-direction:column; gap:8px; flex:1 1 auto;
}
.cpx-pipeline__empty{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; color:var(--txt-dim);
  text-align:center; padding:18px 0; opacity:.5;
}
/* card tile */
.cpx-pipeline__card{ cursor:grab; }
.cpx-pipeline__card:active{ cursor:grabbing; }
.cpx-pipeline__card--ghost{ opacity:.4; }
.cpx-pipeline__card-body{ padding:10px 11px; display:flex; flex-direction:column; gap:3px; }
.cpx-pipeline__card-name{
  font-family:var(--font-display); font-weight:600; font-size:13.5px; letter-spacing:.01em;
  color:var(--txt); text-decoration:none;
}
.cpx-pipeline__card-name:hover{ color:var(--signal-priority); }   /* amber = active focus */
.cpx-pipeline__card-name:focus-visible{ outline:2px solid var(--signal-priority); outline-offset:2px; }
.cpx-pipeline__card-role{ font-family:var(--font-display); font-size:11.5px; color:var(--txt-dim); letter-spacing:.01em; }
.cpx-pipeline__card-email{ font-size:10px; color:var(--txt-dim); letter-spacing:.01em; word-break:break-all; }

/* ===========================================================================
   Layout helpers (light - Tailwind still owns most layout)
   =========================================================================== */
.cpx-shell{ position:relative; z-index:2; display:flex; min-height:100vh; }
.cpx-main{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }

/* recessed instrument well for the d3 relationship graph (positioning ctx for its floating card) */
.cpx-graph-canvas{
  position:relative; border:1px solid var(--hairline); border-radius:5px; overflow:hidden;
  background:var(--inset); box-shadow:0 0 0 1px rgba(0,0,0,.4) inset;
  background-image:
    linear-gradient(rgba(63,153,86,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,153,86,0.022) 1px, transparent 1px);
  background-size:33px 33px;
}
.cpx-canvas{ padding:18px 20px 22px; display:flex; flex-direction:column; gap:15px; }
/* ===========================================================================
   .cpx-ticker - bottom "Intel Feed" marquee (Concept B revival). Amber label
   tab + seamless scrolling mono track (rendered twice -> translateX(-50%)).
   Amber text is reserved for deadlines; green for wins.
   =========================================================================== */
.cpx-ticker{
  display:flex; align-items:stretch; height:34px; margin-top:14px; min-width:0; max-width:100%;
  border:1px solid var(--bezel); border-radius:5px; background:var(--inset); overflow:hidden; position:relative;
}
.cpx-ticker__lbl{
  flex:0 0 auto; display:flex; align-items:center; padding:0 14px; z-index:2;
  font-family:var(--font-display); font-weight:600; letter-spacing:.2em; font-size:10px;
  color:var(--ink); background:var(--signal-priority);
}
.cpx-ticker__win{ flex:1 1 auto; min-width:0; overflow:hidden; position:relative; display:flex; align-items:center;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); }
.cpx-ticker__track{
  display:flex; white-space:nowrap; align-items:center; will-change:transform;
  animation:cpx-ticker-scroll 48s linear infinite;
  font-family:var(--font-mono); font-size:11px; color:var(--txt-dim); letter-spacing:.04em;
}
.cpx-ticker__track span{ padding:0 16px; }
.cpx-ticker__track span::before{ content:"\203A"; margin-right:16px; color:var(--bezel); }
.cpx-ticker__track .am{ color:var(--signal-priority); }
.cpx-ticker__track .gn{ color:#5fcf87; }
.cpx-ticker:hover .cpx-ticker__track{ animation-play-state:paused; }
@keyframes cpx-ticker-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .cpx-ticker__track{ animation:none; } }

.cpx-footer-note{ font-family:var(--font-mono); font-size:9px; color:var(--txt-dim); letter-spacing:.1em; text-align:center; padding:10px 0 0; opacity:.7; }

/* secure-terminal login substrate */
.cpx-login{ min-height:100vh; display:grid; place-items:center; padding:24px; position:relative; z-index:2; }
.cpx-login__panel{ width:380px; max-width:100%; }

/* ===========================================================================
   Power-on boot reveal + self-test sweep
   Default (reduced motion / no JS): everything is fully visible & static.
   =========================================================================== */
#cpx-boot{ display:none; }
#cpx-sweep{ display:none; }

/* ---------------------------------------------------------------------------
   MOTION - all animations gated behind prefers-reduced-motion: no-preference
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  /* breathing online + advisor lamps */
  .cpx-statusbar__online .cpx-lamp{ animation:cpx-breathe 2.4s ease-in-out infinite; }
  .cpx-advisor__foot .cpx-lamp{ animation:cpx-breathe 2.4s ease-in-out infinite; }
  @keyframes cpx-breathe{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

  /* command-bar caret blink */
  .cpx-caret{ animation:cpx-blink 1.05s step-end infinite; }
  @keyframes cpx-blink{ 50%{ opacity:0; } }

  /* radar passive-scan lamp pulse */
  .cpx-radar__strip .cpx-scan-lamp{ animation:cpx-scanpulse 2.2s ease-in-out infinite; }
  @keyframes cpx-scanpulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

  /* radar sweep ring */
  .cpx-radar__ic::after{
    content:""; position:absolute; inset:0; border-radius:50%;
    background:conic-gradient(from 0deg, rgba(91,100,114,.32), transparent 32%);
    animation:cpx-sweep 3.4s linear infinite;
  }
  @keyframes cpx-sweep{ to{ transform:rotate(360deg); } }

  /* segmented tape fill animates to its target width */
  .cpx-tape__fill{ transition:width 1.1s cubic-bezier(.2,.8,.2,1); }
  .cpx-gauge__fill{ transition:width 1s ease; }

  /* amber edge-pulse - top-priority attention row ONLY (signal, not decoration) */
  .cpx-row--priority{ animation:cpx-amber-edge 2.6s ease-in-out infinite; }
  .cpx-annunciator--priority.cpx-annunciator--attn{ animation:cpx-amber-edge 2.6s ease-in-out infinite; }
  @keyframes cpx-amber-edge{
    0%,100%{ box-shadow:inset 0 0 0 1px rgba(245,179,1,0.0); }
    50%{ box-shadow:inset 0 0 26px -10px rgba(245,179,1,0.5); }
  }

  /* one-time-per-session power-on reveal: staggered panel illumination.
     cockpit.js adds .cpx-boot to <body> only when the session flag is unset. */
  .cpx-boot .cpx-boot-stagger{ opacity:0; animation:cpx-panel-on .7s cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes cpx-panel-on{
    0%{ opacity:0; transform:translateY(8px); filter:brightness(.3) blur(1px); }
    55%{ opacity:1; filter:brightness(1.45); }
    100%{ opacity:1; transform:translateY(0); filter:brightness(1) blur(0); }
  }
  .cpx-boot .cpx-d1{ animation-delay:.04s; } .cpx-boot .cpx-d2{ animation-delay:.14s; }
  .cpx-boot .cpx-d3{ animation-delay:.24s; } .cpx-boot .cpx-d4{ animation-delay:.34s; }
  .cpx-boot .cpx-d5{ animation-delay:.44s; } .cpx-boot .cpx-d6{ animation-delay:.54s; }
  .cpx-boot .cpx-d7{ animation-delay:.64s; } .cpx-boot .cpx-d8{ animation-delay:.74s; }

  /* boot terminal overlay + self-test sweep (only shown during boot, by JS) */
  .cpx-boot #cpx-boot{
    display:flex; position:fixed; inset:0; z-index:9500; background:var(--ink);
    align-items:center; justify-content:center; font-family:var(--font-mono);
  }
  #cpx-boot .cpx-boot__lines{ width:540px; max-width:90vw; }
  #cpx-boot .cpx-boot__hd{ color:var(--signal-priority); letter-spacing:.24em; font-size:11px; margin-bottom:18px; text-transform:uppercase; }
  #cpx-boot .cpx-boot__l{ font-size:12px; color:var(--txt-dim); letter-spacing:.04em; margin:6px 0; display:flex; justify-content:space-between; opacity:0; transition:opacity .25s; }
  #cpx-boot .cpx-boot__l .cpx-ok{ color:var(--signal-nominal); }
  #cpx-boot.cpx-done{ opacity:0; pointer-events:none; transition:opacity .5s ease; }
  .cpx-boot #cpx-sweep{
    display:block; position:fixed; inset:0; z-index:9400; pointer-events:none;
    background:linear-gradient(180deg, transparent 0%, rgba(63,153,86,0.10) 48%, rgba(63,153,86,0.18) 50%, rgba(63,153,86,0.10) 52%, transparent 100%);
    transform:translateY(-100%); opacity:0;
  }
  #cpx-sweep.cpx-run{ animation:cpx-scan-sweep 1.1s ease-in forwards; }
  @keyframes cpx-scan-sweep{ from{ transform:translateY(-100%); opacity:1; } to{ transform:translateY(100%); opacity:0; } }
}

/* === Pipeline Phase A: state-forward tile === */
.cpx-tile{
  position:relative; display:flex; gap:9px; align-items:flex-start;
  background:linear-gradient(180deg,var(--charcoal),#0d0e11);
  border:1px solid var(--hairline); border-left:3px solid var(--steel);
  border-radius:6px; padding:9px 11px 9px 10px; margin-bottom:8px; cursor:grab;
}
.cpx-tile:active{ cursor:grabbing; }
.cpx-tile--priority{ border-left-color:var(--signal-priority); }
.cpx-tile--nominal{ border-left-color:var(--signal-nominal); }
.cpx-tile--info{ border-left-color:var(--signal-info); }
.cpx-tile--muted{ border-left-color:var(--steel); opacity:.78; }
.cpx-tile--ghost{ opacity:.35; }
.cpx-tile__mono{
  flex:0 0 26px; height:26px; display:grid; place-items:center;
  background:var(--inset); border:1px solid var(--hairline); border-radius:5px;
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--txt-dim);
}
.cpx-tile--priority .cpx-tile__mono{ color:var(--signal-priority); border-color:rgba(245,179,1,.35); }
.cpx-tile--nominal .cpx-tile__mono{ color:var(--signal-nominal); border-color:rgba(63,153,86,.35); }
.cpx-tile__main{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.cpx-tile__name{ font-family:var(--font-display); font-size:14.5px; font-weight:600;
  color:var(--txt); text-decoration:none; letter-spacing:.01em; }
.cpx-tile__name:hover{ color:var(--signal-priority); }
.cpx-tile__name:focus-visible{ outline:2px solid var(--signal-priority); outline-offset:2px; }
.cpx-tile__role{ font-family:var(--font-display); font-size:12.5px; color:var(--txt-dim); }
.cpx-tile__state{ font-size:10.5px; letter-spacing:.05em; margin-top:2px; color:var(--txt-dim); }
.cpx-tile--priority .cpx-tile__state{ color:var(--signal-priority); }
.cpx-tile--nominal .cpx-tile__state{ color:var(--signal-nominal); }
.cpx-tile__name:hover ~ .cpx-tile__state{ color:inherit; }
@keyframes cpx-tile-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(245,179,1,0); } 50%{ box-shadow:0 0 0 2px rgba(245,179,1,.18); } }
.cpx-tile--priority{ animation:cpx-tile-pulse 2.4s ease-in-out infinite; }

.cpx-pipeline__need{ font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--signal-priority); margin-bottom:8px; }
.cpx-pipeline__need--idle{ color:var(--txt-dim); opacity:.5; }

/* --- keyboard-accessible stage move control (a11y equivalent of the drag) --- */
/* visually-hidden but still in the tab/AT tree */
.cpx-vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* subtle by default; reveals on hover or keyboard focus so it stays out of the way */
.cpx-tile__move{ position:absolute; top:7px; right:7px; max-width:88px;
  background:var(--inset); color:var(--txt-dim); border:1px solid var(--hairline);
  border-radius:4px; font-family:var(--font-mono); font-size:10px; padding:2px 4px;
  opacity:0; transition:opacity .15s ease; cursor:pointer; }
.cpx-tile:hover .cpx-tile__move{ opacity:.85; }
.cpx-tile__move:focus{ opacity:1; }
.cpx-tile__move:focus-visible{ outline:2px solid var(--signal-priority); outline-offset:1px; }

/* ── Timeline filter chips ───────────────────────────────────────────────
   Selection state for the company timeline's All/Communications/Work filter.
   Selection is informational, NOT a needs-you signal, so it uses --signal-info,
   never amber. Inactive chips are plain .cpx-pill--info. */
.cpx-tl-filter { cursor: pointer; }
.cpx-tl-filter.is-active {
  border-color: var(--signal-info);
  background: var(--info-dim);
  color: var(--txt);
}

/* ── Readability override: lift stray Tailwind grays to the bright text tokens ──
   Some pages (bookings, auditions, agents, etc.) set text color with raw Tailwind
   utilities instead of our tokens, so the global token bump misses them. Remap them
   here so NO body text stays dim, on any page. !important because these override a
   third-party utility framework on purpose. Light grays -> white, mediums -> dim. */
.text-gray-100, .text-gray-200, .text-gray-300, .text-white\/90 { color: var(--txt) !important; }
.text-gray-400, .text-gray-500, .text-gray-600 { color: var(--txt-dim) !important; }

/* ===========================================================================
   Command-center BACKDROP layers - the luminous cyber-city map (ported from the
   mockup's .bg-city / .bg-field / .bg-vignette). Fixed full-viewport, behind the
   panels (z0/z1), mix-blend-mode:screen so they GLOW, pointer-events:none, masked
   so they bleed strongest at the corners/left rail and stay faint behind content.
   Teal here is the FIELD only, never a data color.

   These DIVs are wired into base.html in a later task; the CSS is defined now so
   the markup lands against a ready theme. They sit behind .cpx-shell (z2).
   =========================================================================== */
.cpx-body__city{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url(/static/cyber-city.png) left bottom / auto 122% no-repeat;
  mix-blend-mode:screen; opacity:0.92;
  -webkit-mask-image:radial-gradient(150% 155% at 22% 70%, #000 22%, rgba(0,0,0,0.5) 64%, rgba(0,0,0,0.16) 100%);
          mask-image:radial-gradient(150% 155% at 22% 70%, #000 22%, rgba(0,0,0,0.5) 64%, rgba(0,0,0,0.16) 100%);
}
/* a second teal contour / measurement field, brightest at the edges */
.cpx-body__field{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  mix-blend-mode:screen; opacity:.9;
  background-image:
    linear-gradient(rgba(111,176,200,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,176,200,0.05) 1px, transparent 1px),
    repeating-linear-gradient(0deg, rgba(111,176,200,0.05) 0 1px, transparent 1px 110px),
    repeating-linear-gradient(26deg, rgba(111,176,200,0.045) 0 1px, transparent 1px 240px);
  background-size:34px 34px, 34px 34px, 100% 100%, 100% 100%;
  -webkit-mask-image:radial-gradient(132% 122% at 50% 40%, rgba(0,0,0,0.55) 28%, #000 100%);
          mask-image:radial-gradient(132% 122% at 50% 40%, rgba(0,0,0,0.55) 28%, #000 100%);
}
/* atmospheric corner vignette + a faint scanline overlay (above the map, below panels) */
.cpx-body__vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(138% 108% at 50% 44%, transparent 58%, rgba(0,0,0,0.46) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.022) 0 1px, transparent 1px 2px);
}

/* ===========================================================================
   GLOW utilities - structural gold bloom (static chrome) and the gauge backplate.
   .cpx-bloom puts the wide soft gold bloom on a hero instrument (radar/donut/
   gauge). .cpx-backplate is the recessed tinted well behind a gauge/score tape.
   The LOUD animated --glow-amber-signal is reserved for needs-you signals only
   (it rides on .cpx-row--priority and the like), so it is intentionally NOT a
   utility class you sprinkle on decoration.
   =========================================================================== */
.cpx-bloom{ filter:var(--glow-bloom); }
.cpx-backplate{
  background:var(--gauge-backplate); border:1px solid var(--hairline);
  border-radius:3px; overflow:hidden;
}

/* ===========================================================================
   DASHBOARD COMMAND-CENTER GRID + INSTRUMENTS  (ported from the v10 mockup,
   docs/design/cockpit-concepts/e-command-center-mockup.html, into .cpx-* names).
   The dashboard renders as one dense single-screen grid of glass .cpx-panel
   instruments. All colour is tokenised; the gold data ramp is ambient structure,
   amber stays the needs-you signal. Motion is gated behind prefers-reduced-motion
   at the foot of this block.
   =========================================================================== */

/* ---- single-screen grid: fills the canvas height below the status/command bars,
   three dense bands. On narrow viewports it relaxes to a flowing column. ---- */
.cpx-dash{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-template-rows:minmax(200px,1fr) minmax(220px,1fr) minmax(220px,1.1fr);
  gap:var(--gap);
  min-height:0;
}
.cpx-dash--fit{ height:calc(100vh - 132px); }
.cpx-dash__area{ min-width:0; min-height:0; }
/* band 1 */
.cpx-area-priorities{ grid-column:1 / 4;  grid-row:1; }
.cpx-area-radar{      grid-column:4 / 7;  grid-row:1; }
.cpx-area-pipeline{   grid-column:7 / 10; grid-row:1; }
.cpx-area-schedule{   grid-column:10 / 13;grid-row:1; }
/* band 2 */
.cpx-area-revenue{    grid-column:1 / 5;  grid-row:2; }
.cpx-area-auditions{  grid-column:5 / 8;  grid-row:2; }
.cpx-area-outreach{   grid-column:8 / 10; grid-row:2; }
.cpx-area-advisor{    grid-column:10 / 13;grid-row:2; }
/* band 3 */
.cpx-area-gauge{      grid-column:1 / 3;  grid-row:3; }
.cpx-area-leads{      grid-column:3 / 7;  grid-row:3; }
.cpx-area-activity{   grid-column:7 / 9;  grid-row:3; }
.cpx-area-reconnect{  grid-column:9 / 11; grid-row:3; }
.cpx-area-ops{        grid-column:11 / 13;grid-row:3; }

@media (max-width:1100px){
  .cpx-dash{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:minmax(220px,auto); grid-template-rows:none; }
  .cpx-dash--fit{ height:auto; }
  .cpx-dash__area{ grid-column:auto !important; grid-row:auto !important; }
}
@media (max-width:640px){
  .cpx-dash{ grid-template-columns:1fr; }
}

/* dashboard panels stretch to fill their grid cell and scroll internally so the
   page itself does not scroll on a normal viewport */
.cpx-dash .cpx-panel{ height:100%; display:flex; flex-direction:column; overflow:hidden; }
.cpx-dash .cpx-panel__hd{ flex:0 0 auto; }
.cpx-dash .cpx-panel__body{ flex:1 1 auto; min-height:0; overflow:auto; scrollbar-width:none; }
.cpx-dash .cpx-panel__body::-webkit-scrollbar{ width:0; height:0; }
.cpx-panel__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 14px 9px 16px; }
.cpx-dash .cpx-panel__foot{ flex:0 0 auto; }

/* Today's Priorities: the queue holds the top 8 of N, but band 1 is short and the
   global rule hides the scrollbar, so only ~1 row showed. Compact the rows so several
   are visible by default (matching the reference's filled list) and reveal a thin
   scrollbar for THIS panel so the rest of the queue is discoverable (the foot also
   links out with the total). */
.cpx-area-priorities .cpx-row{ grid-template-columns:20px 72px 1fr auto; gap:8px; padding:5px 9px; margin:2px 0; }
.cpx-area-priorities .cpx-row__annun{ font-size:9px; padding:3px 3px; letter-spacing:.04em; }
.cpx-area-priorities .cpx-row__body{ min-width:0; overflow:hidden; }
.cpx-area-priorities .cpx-row__body .cpx-row__name{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cpx-area-priorities .cpx-row__body .cpx-row__meta{ margin-top:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cpx-area-priorities .cpx-row__chip{ font-size:9.5px; }
.cpx-area-priorities .cpx-row__chip b{ font-size:11px; }
.cpx-area-priorities .cpx-panel__body{ scrollbar-width:thin; scrollbar-color:var(--steel) transparent; }
.cpx-area-priorities .cpx-panel__body::-webkit-scrollbar{ width:6px; height:6px; }
.cpx-area-priorities .cpx-panel__body::-webkit-scrollbar-thumb{ background:var(--steel); border-radius:3px; }

/* slim greeting command bar (greeting + flanking readouts + clock) */
.cpx-dashbar{
  display:flex; align-items:center; gap:14px; min-height:42px; padding:6px 4px 12px;
}
.cpx-dashbar__chip{ display:flex; align-items:center; gap:6px; font-family:var(--font-mono); white-space:nowrap; }
.cpx-dashbar__chip .cpx-k{ font-size:8px; letter-spacing:.14em; color:var(--txt-dim); text-transform:uppercase; }
.cpx-dashbar__chip .cpx-v{ font-size:13px; color:var(--txt); }
.cpx-dashbar__chip .cpx-v.am{ color:var(--signal-priority-2); text-shadow:0 0 9px rgba(255,207,77,0.4); }
.cpx-dashbar__chip .cpx-v.dr{ color:var(--signal-dream-2); }
.cpx-dashbar__chip .cpx-br{ color:var(--gold-edge); font-size:12px; }
.cpx-dashbar__div{ width:1px; height:18px; background:var(--hairline); }
.cpx-dashbar__greet{ flex:1 1 auto; text-align:center; min-width:120px; }
.cpx-dashbar__greet h1{ font-family:var(--font-display); font-weight:500; font-size:15px; letter-spacing:.02em; color:var(--txt); text-shadow:0 0 12px rgba(245,200,66,.14); }
.cpx-dashbar__greet h1 .cpx-nm{ font-weight:600; }
.cpx-dashbar__greet p{ font-family:var(--font-display); font-size:11px; color:var(--txt-dim); }
.cpx-dashbar__greet p b{ color:var(--signal-priority-2); font-family:var(--font-mono); }

/* inert drag-grip glyph in panel headers (Phase 2 wires it) */
.cpx-grip{
  flex:0 0 auto; width:9px; height:14px; display:grid; grid-template-columns:repeat(2,3px);
  grid-template-rows:repeat(3,3px); gap:2px; opacity:.4; cursor:grab; margin-right:2px;
}
.cpx-grip i{ width:3px; height:3px; border-radius:50%; background:var(--gold-2); }
.cpx-panel__hd:hover .cpx-grip{ opacity:.8; }
.cpx-grip:focus-visible{ outline:2px solid var(--signal-priority); outline-offset:2px; }

/* ---------------------------------------------------------------------------
   INSTRUMENT: pipeline funnel (.cpx-inst-funnel)
   --------------------------------------------------------------------------- */
.cpx-inst-funnel{ flex:1 1 auto; min-height:0; display:flex; }
.cpx-inst-funnel svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 6px 12px rgba(0,0,0,0.4)); }
.cpx-inst-funnel__band polygon{ stroke:rgba(0,0,0,0.45); stroke-width:0.4; }
.cpx-inst-funnel__band--steel polygon{ fill:var(--ramp-5); }
.cpx-inst-funnel__band--bronze polygon{ fill:var(--ramp-3); }
.cpx-inst-funnel__band--gold polygon{ fill:var(--ramp-1); }
.cpx-inst-funnel__band.is-won polygon{ stroke:var(--gold-edge); stroke-width:0.6; }
.cpx-inst-funnel__lbl{ font-family:var(--font-display); font-weight:800; font-size:4.6px; letter-spacing:.06em; fill:#1a1300; }
.cpx-inst-funnel__band--steel .cpx-inst-funnel__lbl{ fill:#e6edf4; }
.cpx-inst-funnel__ct{ font-family:var(--font-mono); font-weight:700; font-size:6px; fill:#ffe8a0; }
.cpx-inst-funnel__pinch{ flex:0 0 auto; font-size:9px; letter-spacing:.03em; color:var(--txt-dim); text-align:center; padding-top:4px; }
.cpx-inst-empty{ color:var(--txt-dim); padding:8px 2px; }

/* ---------------------------------------------------------------------------
   INSTRUMENT: opportunity radar (.cpx-inst-radar)
   --------------------------------------------------------------------------- */
.cpx-inst-radar{ display:flex; flex-direction:column; align-items:center; height:100%; }
.cpx-inst-radar__stage{ position:relative; flex:1 1 auto; min-height:0; width:100%; display:grid; place-items:center; }
.cpx-inst-radar__stage::before{
  content:""; position:absolute; width:90%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(245,200,66,.12) 0%, rgba(245,200,66,.06) 46%, transparent 70%);
  mix-blend-mode:screen; filter:blur(6px); pointer-events:none;
}
.cpx-inst-radar__scope{ height:100%; max-height:100%; width:auto; aspect-ratio:1; display:block; position:relative;
  filter:drop-shadow(0 0 5px rgba(245,200,66,.30)) drop-shadow(0 0 14px rgba(245,200,66,.15)); }
.cpx-inst-radar__ring{ fill:none; stroke:var(--gold-edge-soft); stroke-width:1; opacity:.55; }
.cpx-inst-radar__ring--out{ stroke:var(--gold-edge); opacity:.85; stroke-width:1.3; }
.cpx-inst-radar__ring--mid{ stroke:rgba(245,200,66,0.38); }
.cpx-inst-radar__cross{ stroke:rgba(245,200,66,0.30); stroke-width:.8; }
.cpx-inst-radar__tick{ stroke:var(--gold-2); stroke-width:1; opacity:.6; }
.cpx-inst-radar__sector{ font-family:var(--font-mono); font-size:7px; letter-spacing:.1em; fill:var(--txt-dim); }
.cpx-inst-radar__sweep{ transform-origin:85px 85px; }
.cpx-inst-radar__sweep-line{ stroke:rgba(245,200,66,0.5); stroke-width:1.4; stroke-linecap:round; filter:drop-shadow(0 0 5px rgba(245,200,66,.6)); }
.cpx-inst-radar__center{ fill:var(--gold-2); filter:drop-shadow(0 0 7px var(--gold-2)); }
.cpx-inst-radar__blip.is-priority circle{ fill:url(#cpxBlipPriority); filter:drop-shadow(0 0 8px var(--signal-priority-2)); }
.cpx-inst-radar__blip.is-info circle{ fill:url(#cpxBlipInfo); filter:drop-shadow(0 0 5px rgba(245,200,66,.6)); }
.cpx-inst-radar__blip.is-dream circle{ fill:url(#cpxBlipDream); filter:drop-shadow(0 0 10px var(--signal-dream)); }

/* ---------------------------------------------------------------------------
   INSTRUMENT: audition donut (.cpx-inst-donut)
   --------------------------------------------------------------------------- */
.cpx-inst-donut{ display:flex; align-items:center; justify-content:center; gap:18px; height:100%; flex-wrap:wrap; }
.cpx-inst-donut__box{ position:relative; width:118px; height:118px; flex:0 0 auto; filter:var(--glow-bloom); }
.cpx-inst-donut__ring{ width:118px; height:118px; transform:rotate(-90deg); }
.cpx-inst-donut__hole{ fill:none; stroke:var(--inset); stroke-width:5; }
.cpx-inst-donut__seg{ fill:none; stroke:currentColor; stroke-width:5; }
.cpx-inst-donut__seg.is-r1{ color:var(--ramp-1); filter:drop-shadow(0 0 6px rgba(245,200,66,.55)); }
.cpx-inst-donut__seg.is-r2{ color:var(--ramp-3); }
.cpx-inst-donut__seg.is-r3{ color:var(--ramp-4); }
.cpx-inst-donut__seg.is-steel{ color:var(--ramp-5); }
.cpx-inst-donut__center{ position:absolute; inset:0; display:grid; place-items:center; align-content:center; text-align:center; filter:none; }
.cpx-inst-donut__n{ font-family:var(--font-display); font-weight:500; letter-spacing:-.01em; font-size:34px; color:var(--txt); line-height:1; text-shadow:var(--num-bloom); }
.cpx-inst-donut__l{ font-family:var(--font-display); font-weight:500; font-size:7px; letter-spacing:.2em; color:var(--txt-dim); text-transform:uppercase; margin-top:2px; }
.cpx-inst-donut__legend{ list-style:none; display:flex; flex-direction:column; gap:6px; flex:0 0 auto; margin:0; padding:0; }
.cpx-inst-donut__legend li{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:10px; color:var(--txt-dim); }
.cpx-inst-donut__sw{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }
.cpx-inst-donut__sw.is-r1{ background:var(--ramp-1); } .cpx-inst-donut__sw.is-r2{ background:var(--ramp-3); }
.cpx-inst-donut__sw.is-r3{ background:var(--ramp-4); } .cpx-inst-donut__sw.is-steel{ background:var(--ramp-5); }
.cpx-inst-donut__legend b{ margin-left:auto; color:var(--txt); font-weight:500; }

/* ---------------------------------------------------------------------------
   INSTRUMENT: circular arc gauge (.cpx-inst-gauge)
   --------------------------------------------------------------------------- */
.cpx-inst-gauge{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:6px; }
.cpx-inst-gauge__svg{ position:relative; width:118px; height:118px; flex:0 0 auto; }
.cpx-inst-gauge__svg::before{
  content:""; position:absolute; inset:-12%; border-radius:50%;
  background:radial-gradient(circle, rgba(245,200,66,.13), transparent 65%);
  mix-blend-mode:screen; filter:blur(4px); pointer-events:none;
}
.cpx-inst-gauge__svg svg{ width:100%; height:100%; display:block; filter:var(--glow-bloom); position:relative; }
.cpx-inst-gauge__track{ fill:none; stroke:var(--inset); stroke-width:6; }
.cpx-inst-gauge__arc{ fill:none; stroke-width:6; stroke-linecap:round; }
.cpx-inst-gauge__arc--amber{ stroke:var(--gold-2); }
.cpx-inst-gauge__arc--bronze{ stroke:var(--ramp-3); }
.cpx-inst-gauge__target{ fill:none; stroke:var(--signal-priority); stroke-width:7; }
.cpx-inst-gauge__center{ position:absolute; inset:0; display:grid; place-items:center; align-content:center; text-align:center; }
.cpx-inst-gauge__n{ font-family:var(--font-display); font-weight:500; letter-spacing:-.01em; font-size:26px; color:var(--txt); line-height:1; text-shadow:var(--num-bloom); }
.cpx-inst-gauge__n small{ font-size:15px; color:var(--gold-2); }
.cpx-inst-gauge__lbl{ font-family:var(--font-display); font-weight:500; font-size:7px; letter-spacing:.18em; color:var(--txt-dim); text-transform:uppercase; margin-top:2px; }
.cpx-inst-gauge__cap{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.02em; color:var(--txt-dim); text-align:center; }
/* empty / no-data gauge (e.g. 0 sent): dim the value and drop the bloom + halo so an empty
   dial reads as "no data yet" rather than a confident reading. The arc itself is omitted in
   the partial when pct is 0, so there is no stray round-cap dot either. */
.cpx-inst-gauge.is-empty .cpx-inst-gauge__n{ color:var(--txt-dim); text-shadow:none; }
.cpx-inst-gauge.is-empty .cpx-inst-gauge__svg{ filter:none; }
.cpx-inst-gauge.is-empty .cpx-inst-gauge__svg::before{ display:none; }

/* ---------------------------------------------------------------------------
   INSTRUMENT: revenue two-month compare (.cpx-inst-rev)
   --------------------------------------------------------------------------- */
.cpx-inst-rev{ display:flex; flex-direction:column; gap:6px; }
.cpx-inst-rev svg{ width:100%; height:auto; max-height:168px; display:block; }
.cpx-inst-rev__axis{ stroke:var(--hairline); stroke-width:1; }
.cpx-inst-rev__bar{ rx:1.5; }
.cpx-inst-rev__bar--steel{ fill:var(--ramp-5); opacity:.7; }
.cpx-inst-rev__bar--gold{ fill:var(--gold-2); filter:drop-shadow(0 0 6px rgba(245,200,66,0.5)); }
.cpx-inst-rev__xlbl{ font-family:var(--font-mono); font-size:6px; letter-spacing:.06em; fill:var(--txt-dim); }
.cpx-inst-rev__xlbl.is-now{ fill:var(--signal-priority-2); }
.cpx-inst-rev__vlbl{ font-family:var(--font-mono); font-size:6.8px; font-weight:700; fill:var(--gold-2); }
.cpx-inst-rev__meta{ display:flex; justify-content:space-between; gap:8px; font-size:9px; color:var(--txt-dim); padding-top:5px; border-top:1px solid var(--hairline); }
.cpx-inst-rev__meta b{ color:var(--txt); }
.cpx-inst-rev__preview{ font-size:7px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-2); border:1px solid var(--gold-edge); background:var(--gold-ambient); padding:1px 5px; border-radius:2px; }
.cpx-inst-rev__note{ font-size:8.5px; letter-spacing:.02em; color:var(--txt-dim); }
.cpx-inst-rev__fig{ margin:0; }
.cpx-inst-rev__empty-t{ font-family:var(--font-mono); font-size:8px; fill:var(--txt-dim); letter-spacing:.04em; }
/* revenue D/W/M/Y period toggle */
.cpx-rev-seg{ display:flex; gap:3px; justify-content:flex-end; }
.cpx-rev-seg__btn{ font-family:var(--font-mono); font-size:9px; letter-spacing:.04em; color:var(--txt-dim); background:rgba(10,16,24,0.5); border:1px solid var(--hairline); border-radius:3px; padding:2px 7px; cursor:pointer; transition:color .12s, background .12s, border-color .12s; }
.cpx-rev-seg__btn:hover{ color:var(--txt); border-color:var(--steel); }
.cpx-rev-seg__btn.is-on{ color:var(--ink); background:var(--gold-2); border-color:var(--gold-2); font-weight:700; }
.cpx-rev-seg__btn:focus-visible{ outline:2px solid var(--signal-priority); outline-offset:1px; }

/* dashboard simple list/feed/table instruments (rethemed existing panels) */
.cpx-feed{ display:flex; flex-direction:column; }
.cpx-feed__item{ display:grid; grid-template-columns:1fr auto; gap:9px; align-items:center; padding:5px 1px; border-bottom:1px solid var(--hairline); }
.cpx-feed__item:last-child{ border-bottom:0; }
.cpx-feed__txt{ font-size:12px; color:var(--txt-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cpx-feed__txt b{ color:var(--txt); font-weight:600; }
.cpx-feed__when{ font-family:var(--font-mono); font-size:9px; color:var(--txt-dim); white-space:nowrap; }
.cpx-feed--wrap .cpx-feed__item{ grid-template-columns:1fr; }
.cpx-feed--wrap .cpx-feed__txt{ white-space:normal; overflow:visible; font-size:11px; line-height:1.35; }
.cpx-feed__txt.cpx-am{ color:var(--signal-priority); font-family:var(--font-mono); }
.cpx-feed__txt.cpx-ph{ color:var(--signal-nominal); font-family:var(--font-mono); }

/* dashboard health-dot variants + the panel-foot link button */
.cpx-panel__hd .cpx-dot--ok{ background:var(--signal-nominal); box-shadow:0 0 6px var(--signal-nominal); }
.cpx-linkbtn{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-dim); text-decoration:none; border:1px solid var(--hairline); border-radius:5px; padding:4px 9px; background:rgba(10,16,24,0.5); white-space:nowrap; }
.cpx-linkbtn:hover{ color:var(--txt); border-color:var(--gold-edge); }
.cpx-linkbtn:focus-visible{ outline:2px solid var(--signal-priority); outline-offset:1px; }
.cpx-dashbar__clock{ flex:0 0 auto; }

.cpx-reconnect{ display:flex; flex-direction:column; gap:6px; }
.cpx-reconnect__row{ display:grid; grid-template-columns:30px 1fr auto; gap:9px; align-items:center; padding:5px 9px; border:1px solid var(--hairline); border-radius:4px; background:rgba(10,16,24,0.5); }
.cpx-reconnect__avatar{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-display); font-weight:600; font-size:11px; color:var(--gold-2); border:1px solid var(--gold-edge); background:radial-gradient(circle at 50% 30%, rgba(245,200,66,.14), rgba(10,16,24,0.6)); }
.cpx-reconnect__nm{ font-family:var(--font-display); font-weight:600; font-size:12px; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cpx-reconnect__meta{ font-family:var(--font-mono); font-size:9.5px; color:var(--txt-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cpx-reconnect__meta .stale{ color:var(--signal-priority-2); }
.cpx-reconnect__meta .crit{ color:var(--signal-critical); }
.cpx-reconnect__btn{ font-family:var(--font-mono); font-size:8px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-2); border:1px solid var(--gold-edge); border-radius:5px; padding:5px 9px; background:var(--gold-ambient); text-decoration:none; white-space:nowrap; }
.cpx-reconnect__btn:hover{ background:var(--priority-dim); color:var(--signal-priority-2); }
.cpx-reconnect__btn:focus-visible{ outline:2px solid var(--signal-priority); outline-offset:1px; }

/* quick-actions icon-tile cluster */
.cpx-qa{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.cpx-qa__tile{ display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--hairline); border-radius:5px; background:rgba(14,22,32,0.5); color:var(--txt-dim); text-decoration:none; font-size:11px; }
.cpx-qa__tile:hover{ border-color:var(--gold-edge); color:var(--txt); }
.cpx-qa__tile:focus-visible{ outline:2px solid var(--signal-priority); outline-offset:1px; }

/* labelled v3 PREVIEW advisor / ask stub */
.cpx-ask{ display:flex; align-items:center; gap:8px; padding:6px 10px; margin-bottom:8px; border:1px dashed var(--gold-edge); border-radius:5px; background:linear-gradient(180deg, rgba(245,200,66,.045), rgba(10,16,24,0.5)); opacity:.65; cursor:not-allowed; }
.cpx-ask__txt{ flex:1 1 auto; font-size:11px; color:var(--txt-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cpx-ask__tag{ font-family:var(--font-mono); font-size:7px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-2); border:1px solid var(--gold-edge); background:var(--gold-ambient); padding:1px 5px; border-radius:2px; }

/* motion (gated): radar sweep rotation + priority blip pulse. Gold structure does
   not animate; only the radar sweep (atmosphere) and the amber-toned blips do. */
@media (prefers-reduced-motion: no-preference){
  .cpx-inst-radar__sweep{ animation:cpx-radar-sweep 4.6s linear infinite; }
  @keyframes cpx-radar-sweep{ to{ transform:rotate(360deg); } }
  .cpx-inst-radar__blip.is-priority circle{ animation:cpx-blip-pulse 2.4s ease-in-out infinite; }
  @keyframes cpx-blip-pulse{ 0%,100%{ r:3.2; } 50%{ r:4; } }
}