/* ============================================================
   DASHIQ V2 — modules.css
   Visualization-specific styles: PartnerIQ sonar disc, ornament
   card, pentagon (5-axis: Mechanism / Disease / Targets / Modality
   / Partner), segmented controls, corner pills, trackpad center
   hub; CompeteIQ phase distribution bar, compact radar in org
   panel, KPI strip, drug profile evidence panel; WhitespaceIQ
   scatter plot 620×340, quadrant tints, hero point pulse,
   evidence chain timeline.

   LOAD ORDER: tokens.css → base.css → components.css → modules.css
   All var(--token) references resolve from tokens.css.
   DO NOT add @import. Do not redefine glass primitives, atmo
   primitives, ws-card, btn variants, badge/pill/deal-badge,
   iq-table, iq-pagination, evidence-panel shell, drawer shell,
   search-xmod-row, diq-search-container, xmod-island, or prim-
   prefixed selectors — they live in base.css or components.css.
   ============================================================ */


/* ============================================================
   SECTION 1 — PARTNERIQ: SONAR HERO CONTAINER
   ============================================================ */

/*
   #sonar-hero-container lays out as flex-row-reverse so the radar
   disc appears LEFT visually (it's DOM-second) and the ornament
   card appears RIGHT (DOM-first). On mobile, stacks vertically:
   radar above, ranked-list below.
*/
/* Phase B parity fix — PIQ-17.28 / PIQ-22.2: gap:0 monolith effect.
   V1 ships disc + ornament card as one connected piece (no visible gap). */
#sonar-hero-container {
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch; /* was flex-start — V1 stretches the disc column to card height */
  gap: 0;
  width: 100%;
  position: relative;
  overflow: hidden; /* matches V1 L3428-3431 */
}

#sonar-disc-ornament-row {
  display: contents; /* transparent wrapper — layout flows from #sonar-hero-container */
}


/* ============================================================
   SECTION 2 — SONAR GLASS DISC
   ============================================================ */

/*
   The sonar disc is the left-visual / DOM-right flex child.
   aspect-ratio matches the SVG viewBox 620×520 but we use 1/1
   for a cleaner square container — the SVG handles internal layout
   via viewBox="40 -10 620 520".
   overflow:visible is required so the corner pills (4% inset from
   disc edge but technically outside the square bounding box) remain
   visible without clipping.
*/
/* Phase B parity fix — was aspect-ratio:1 (forced 620×620 square) which left
   ~100px of empty disc bottom because the SVG viewBox is 620×520 (1.19 ratio).
   V1 (L2539-2541) only sets max-width and lets height come from SVG content.
   Result before fix: visible dead zone between disc bottom and segmented row. */
.sonar-glass-disc {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: min(600px, 58vh); /* V1 L2540 */
  aspect-ratio: 620 / 520; /* matches SVG viewBox */
  background: var(--g-frosted);
  border: 1px solid var(--g-border);
  border-radius: var(--r-2xl);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--sh-2), var(--sh-glow-teal);
  overflow: visible; /* corner pills sit outside disc rim */
}

/*
   Light-mode sonar disc — V1 L1106-1114 verbatim port. The 6-layer
   box-shadow stack creates a luminous instrument effect (radial teal
   halo + inset rim shadow + ambient lift) that makes the disc read
   as a polished radar against white background instead of a flat
   circle. Without this override the disc reads as wireframe in light
   mode.
*/
[data-theme="light"] .sonar-glass-disc {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(15, 23, 42, 0.07),
    inset 0 0 80px rgba(13, 143, 134, 0.04),
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 18px 50px rgba(15, 23, 42, 0.10),
    0 0 80px rgba(13, 143, 134, 0.06);
}

#sonar-radar-container {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: visible;
}

#sonar-radar-container svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}


/* ============================================================
   SECTION 3 — SONAR CORNER PILLS (NW / NE / SW / SE)
   ============================================================ */

/*
   Corner pills sit 4% inset from the disc edge (effectively
   outside or on the rim). They use absolute positioning relative
   to .sonar-glass-disc. Inactive = outline in --deal-clr; active =
   solid matte fill in --deal-clr with white text. V1 L1361-1399.
   Class-name reconciliation: V2 JS toggles `.active` (matches V1);
   CSS rules use `.active` to match (NOT `.is-active`).
   2026-04-30 — Phase 2 sonar port reconciliation.
*/
/* Phase B parity fix — size + typography match V1 L1361-1399 exactly.
   Was: min-height 44px, mono uppercase 0.5px, --text-3xs.
   Now: height 22px, sans 11px 0.015em, no uppercase. */
.sonar-corner-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  height: 22px;
  min-width: 64px;
  border-radius: 999px;
  /* Per-deal accent border + text color (overridden inline via --deal-clr) */
  border: 1px solid color-mix(in srgb, var(--deal-clr, currentColor) 22%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--deal-clr, currentColor) 80%, transparent);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.22s ease, color 0.20s ease,
              border-color 0.22s ease,
              transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 20;
}

/* Phase B parity fix — corner pills sit at 45° just OUTSIDE the disc rim.
   Disc viewBox 40 -10 620 520 → center (350,250), R=230 within a 620×520 box.
   Pill anchor point chosen so the inner edge of the pill is tangent to the
   rim at 45° (cos/sin 45 · R ≈ 163; in container % ≈ 26% horiz, 31% vert
   from center). We position each pill's *outer* edge at the corresponding
   anchor and let translate keep the pill outside the rim. */
.sonar-corner-pill.nw {
  top: 12%;
  left: 16%;
  transform: translate(-50%, -50%);
}
.sonar-corner-pill.nw:active {
  transform: translate(-50%, -50%) scale(0.96);
}

.sonar-corner-pill.ne {
  top: 12%;
  right: 16%;
  transform: translate(50%, -50%);
}
.sonar-corner-pill.ne:active {
  transform: translate(50%, -50%) scale(0.96);
}

.sonar-corner-pill.sw {
  bottom: 12%;
  left: 16%;
  transform: translate(-50%, 50%);
}
.sonar-corner-pill.sw:active {
  transform: translate(-50%, 50%) scale(0.96);
}

.sonar-corner-pill.se {
  bottom: 12%;
  right: 16%;
  transform: translate(50%, 50%);
}
.sonar-corner-pill.se:active {
  transform: translate(50%, 50%) scale(0.96);
}

.sonar-corner-pill:hover:not(.active) {
  border-color: color-mix(in srgb, var(--deal-clr, currentColor) 38%, transparent);
  color: color-mix(in srgb, var(--deal-clr, currentColor) 95%, transparent);
}

/* per-quadrant :active overrides above keep the corner-specific translate */
.sonar-corner-pill.active {
  background: color-mix(in srgb, var(--deal-clr, var(--pill-active-fallback)) 55%, transparent);
  border-color: color-mix(in srgb, var(--deal-clr, var(--pill-active-fallback)) 60%, transparent);
  color: var(--pill-active-text);
  font-weight: 600;
}


/* ============================================================
   SECTION 4 — SONAR NODES (partner orbs on radar)
   ============================================================ */

/*
   Partner orb circles rendered inside the sonar SVG.
   data-deal attribute drives fill color via the sonar-component
   palette tokens (NOT brand --teal/etc.). The sonar uses its own
   per-deal hex set: --sonar-cdev/-ppartner/-pexp/-inlic.
   V1 L26109+ parity.
*/
.sonar-node {
  cursor: pointer;
  opacity: 0.85;
  transition: opacity var(--t-fast) var(--ease-out),
              r var(--t-fast) var(--ease-out);
}

.sonar-node[data-deal="CO_DEVELOPMENT"] {
  fill: var(--sonar-cdev);
}

.sonar-node[data-deal="PLATFORM_PARTNERSHIP"] {
  fill: var(--sonar-ppartner);
}

.sonar-node[data-deal="PORTFOLIO_EXPANSION"] {
  fill: var(--sonar-pexp);
}

.sonar-node[data-deal="IN_LICENSING"] {
  fill: var(--sonar-inlic);
}

/*
   Active-quadrant dim pattern: when a quadrant is selected
   (parent has data-active-deal), nodes NOT matching that deal
   type drop to low opacity. JS adds [data-active-deal] to the
   SVG or a wrapper; CSS handles the visual dimming.
*/
[data-active-deal] .sonar-node {
  opacity: 0.18;
  transition: opacity var(--t-norm) var(--ease-out);
}

[data-active-deal="CO_DEVELOPMENT"] .sonar-node[data-deal="CO_DEVELOPMENT"],
[data-active-deal="PLATFORM_PARTNERSHIP"] .sonar-node[data-deal="PLATFORM_PARTNERSHIP"],
[data-active-deal="PORTFOLIO_EXPANSION"] .sonar-node[data-deal="PORTFOLIO_EXPANSION"],
[data-active-deal="IN_LICENSING"] .sonar-node[data-deal="IN_LICENSING"] {
  opacity: 0.9;
}

.sonar-node:hover {
  opacity: 1;
  filter: drop-shadow(0 0 6px var(--sonar-cdev));
}

/* ── Orbital dial arcs at R-8 ──
   Phase 3.6 (2026-05-03): NEUTRALIZED. The four arcs that wrap the
   radar perimeter were each painted in their deal-type color via
   these class rules — and because CSS rules override SVG presentation
   attributes (inline stroke=""), they were also overriding the
   neutral stroke set in JSX (partneriq.jsx). That created a colored
   outer ring around the radar implying score = deal type. Rules
   removed entirely so the inline neutral stroke from JSX wins. */
/* .dial-arc.sonar-arc-cdev    { stroke: var(--sonar-cdev); }     */
/* .dial-arc.sonar-arc-ppartner{ stroke: var(--sonar-ppartner); } */
/* .dial-arc.sonar-arc-pexp    { stroke: var(--sonar-pexp); }     */
/* .dial-arc.sonar-arc-inlic   { stroke: var(--sonar-inlic); }    */


/* ============================================================
   SECTION 5 — CENTER HUB TRACKPAD (4 sectors + nub)
   ============================================================ */

/*
   V1 L1116-1340 parity port (2026-04-30 sonar Phase 2 Ticket 1).
   The trackpad is a 54×54 CIRCLE (NOT a rounded square). Each
   sector has one rounded outer corner (50%) and three sharp-ish
   corners (4px), producing the iconic "pie slice with one curved
   edge" silhouette. Sectors are clear glass with per-sector accent
   vars (--tp-glow / --tp-border) so colors come through hover/
   active glow rings, not solid fills. Class-name reconciliation:
   `.active` (matches V1 + V2 JS toggle direction).
*/
.deal-trackpad {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  isolation: isolate;
  cursor: pointer;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  /* No outer bg/border — sectors create the visual silhouette */
  background: transparent;
  border: none;
}

.tp-sector {
  position: absolute;
  width: calc(50% - 1.5px);
  height: calc(50% - 1.5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  cursor: pointer;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  transition: background var(--t-norm) var(--ease-spring),
              box-shadow var(--t-norm) var(--ease-spring),
              transform var(--t-norm) var(--ease-spring),
              border-color var(--t-norm) var(--ease-out);
}

.tp-sector:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--tp-border, rgba(255, 255, 255, 0.30));
  transform: scale(1.04);
  box-shadow:
    0 0 24px var(--tp-glow, rgba(255, 255, 255, 0.20)),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.tp-sector.active {
  background: rgba(255, 255, 255, 0.20);
  border-color: var(--tp-border, rgba(255, 255, 255, 0.40));
  transform: scale(1.06);
  box-shadow:
    0 0 36px var(--tp-glow, rgba(255, 255, 255, 0.30)),
    0 0 0 1.5px var(--tp-border, rgba(255, 255, 255, 0.30)),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10);
}

[data-theme="dark"] .tp-sector {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Phase 3.7 (2026-05-03): Per-deal tint at REST. Previously only hover/
   active states carried the deal-color glow; the trackpad read flat-grey
   in idle. Now each sector has a subtle background tint + colored border
   at rest so the four deal types are visually distinguishable. Hover/
   active still amplifies the glow on top. */
.tp-sector[data-deal="PORTFOLIO_EXPANSION"]  { background: rgba(59,130,246,0.10);  border-color: rgba(59,130,246,0.30); }
.tp-sector[data-deal="PLATFORM_PARTNERSHIP"] { background: rgba(124,58,237,0.10); border-color: rgba(124,58,237,0.30); }
.tp-sector[data-deal="IN_LICENSING"]         { background: rgba(217,119,6,0.10);  border-color: rgba(217,119,6,0.30); }
.tp-sector[data-deal="CO_DEVELOPMENT"]       { background: rgba(13,148,136,0.10); border-color: rgba(13,148,136,0.30); }
[data-theme="dark"] .tp-sector[data-deal="PORTFOLIO_EXPANSION"]  { background: rgba(59,130,246,0.16);  border-color: rgba(59,130,246,0.36); }
[data-theme="dark"] .tp-sector[data-deal="PLATFORM_PARTNERSHIP"] { background: rgba(124,58,237,0.16); border-color: rgba(124,58,237,0.36); }
[data-theme="dark"] .tp-sector[data-deal="IN_LICENSING"]         { background: rgba(217,119,6,0.16);  border-color: rgba(217,119,6,0.36); }
[data-theme="dark"] .tp-sector[data-deal="CO_DEVELOPMENT"]       { background: rgba(13,148,136,0.16); border-color: rgba(13,148,136,0.36); }

[data-theme="dark"] .tp-sector:hover {
  background: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .tp-sector.active {
  background: rgba(255, 255, 255, 0.18);
}

/* ── Per-sector position + accent vars + iconic rotated border-radius ──
   PORTFOLIO_EXPANSION (NW): rounded outer corner top-left  -> 50% 4px 4px 4px
   PLATFORM_PARTNERSHIP (NE): rounded outer corner top-right -> 4px 50% 4px 4px
   IN_LICENSING        (SW): rounded outer corner btm-left  -> 4px 4px 4px 50%
   CO_DEVELOPMENT      (SE): rounded outer corner btm-right -> 4px 4px 50% 4px
   V1 L1202-1221.
*/
.tp-sector[data-deal="PORTFOLIO_EXPANSION"] {
  top: 0;
  left: 0;
  border-radius: 50% 4px 4px 4px;
  --tp-glow: rgba(59, 130, 246, 0.30);
  --tp-border: rgba(59, 130, 246, 0.40);
}

.tp-sector[data-deal="PLATFORM_PARTNERSHIP"] {
  top: 0;
  right: 0;
  border-radius: 4px 50% 4px 4px;
  --tp-glow: rgba(124, 58, 237, 0.30);
  --tp-border: rgba(124, 58, 237, 0.40);
}

.tp-sector[data-deal="IN_LICENSING"] {
  bottom: 0;
  left: 0;
  border-radius: 4px 4px 4px 50%;
  --tp-glow: rgba(217, 119, 6, 0.30);
  --tp-border: rgba(217, 119, 6, 0.40);
}

.tp-sector[data-deal="CO_DEVELOPMENT"] {
  bottom: 0;
  right: 0;
  border-radius: 4px 4px 50% 4px;
  --tp-glow: rgba(13, 148, 136, 0.30);
  --tp-border: rgba(13, 148, 136, 0.40);
}

/* Center nub — sits in the seam gap between sectors. Mint-tinted
   glass with teal ring (light); navy w/ cyan ring (dark). V1 L1265-1313. */
.tp-center-nub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  /* Teal-tinted glass — reads as a brand instrument element */
  background: linear-gradient(180deg, rgba(224, 247, 240, 0.92), rgba(208, 238, 230, 0.82));
  backdrop-filter: blur(6px) saturate(150%);
  -webkit-backdrop-filter: blur(6px) saturate(150%);
  border: 1.5px solid rgba(13, 148, 136, 0.38);
  box-shadow:
    0 1px 4px rgba(15, 23, 42, 0.12),
    0 0 0 3px rgba(13, 148, 136, 0.08),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.85);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tp-center-nub-label {
  font-size: 7px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: rgba(15, 23, 42, 0.82);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  max-width: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .tp-center-nub {
  background: linear-gradient(180deg, rgba(20, 30, 45, 0.95), rgba(10, 18, 30, 0.92));
  border-color: rgba(45, 212, 191, 0.30);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(45, 212, 191, 0.06);
}

[data-theme="dark"] .tp-center-nub-label {
  color: rgba(255, 255, 255, 0.90);
}

@media (max-width: 1023px) {
  .deal-trackpad { width: 48px; height: 48px; }
  .tp-center-nub { width: 24px; height: 24px; }
  .tp-center-nub-label { font-size: 4.5px; }
}

@media (max-width: 767px) {
  .deal-trackpad { width: 42px; height: 42px; }
  .tp-center-nub { width: 20px; height: 20px; }
  .tp-center-nub-label { font-size: 4px; }
}


/* ============================================================
   SECTION 6 — iOS SEGMENTED CONTROL (under sonar disc)
   ============================================================ */

/*
   Segmented control below the radar disc.
   The indicator element (id: deal-segmented-indicator) is an
   absolutely-positioned sliding highlight that animates
   left/width between segments via JS.
*/
#deal-segmented {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 2px;
  background: var(--g-ground);
  border: 1px solid var(--g-border);
  border-radius: var(--r-pill);
  margin-top: var(--s-3);
  width: 100%;
  max-width: 480px;
  overflow: hidden;
}

#deal-segmented-indicator {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  border-radius: var(--r-pill);
  background: var(--g-frosted);
  border: 1px solid var(--g-border-strong);
  box-shadow: var(--sh-1);
  pointer-events: none;
  transition: left var(--t-norm) var(--ease-out),
              width var(--t-norm) var(--ease-out);
  z-index: 1;
}

.deal-segmented-btn {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 10px;
  min-height: 44px;
  /* Per-deal accent border + text color (overridden inline via --deal-clr) */
  border: 1px solid color-mix(in srgb, var(--deal-clr, currentColor) 22%, transparent);
  background: transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--deal-clr, currentColor) 80%, transparent);
  cursor: pointer;
  user-select: none;
  text-align: center;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
  z-index: 2;
}

.deal-segmented-btn:hover:not(.active) {
  border-color: color-mix(in srgb, var(--deal-clr, currentColor) 38%, transparent);
  color: color-mix(in srgb, var(--deal-clr, currentColor) 95%, transparent);
}

.deal-segmented-btn:active {
  transform: scale(0.96);
}

.deal-segmented-btn.active {
  background: color-mix(in srgb, var(--deal-clr, var(--pill-active-fallback)) 55%, transparent);
  border-color: color-mix(in srgb, var(--deal-clr, var(--pill-active-fallback)) 60%, transparent);
  color: var(--pill-active-text);
  font-weight: 600;
}


/* ============================================================
   SECTION 7 — COACH MARK & GHOST CURSOR
   ============================================================ */

/*
   Desktop-only ghost cursor and tap hint. Hidden on touch devices
   via media query (pointer:coarse) and (hover:none).
*/
#radar-ghost-cursor {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--g-frosted);
  border: 2px solid var(--text-muted);
  pointer-events: none;
  z-index: 30;
  transition: left var(--t-slow) var(--ease-out),
              top var(--t-slow) var(--ease-out);
}

#radar-tap-hint {
  position: absolute;
  bottom: calc(100% + var(--s-2));
  left: 50%;
  transform: translateX(-50%);
  background: var(--g-elevated);
  border: 1px solid var(--g-border-strong);
  border-radius: var(--r-md);
  padding: var(--s-1) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--text-muted);
  white-space: nowrap;
  pointer-events: none;
  z-index: 30;
  box-shadow: var(--sh-1);
}

@media (hover: none), (pointer: coarse) {
  #radar-ghost-cursor {
    display: none;
  }
}


/* ============================================================
   SECTION 8 — ORNAMENT CARD (right panel of sonar hero)
   ============================================================ */

/*
   Fixed 340px wide on desktop. The card itself uses .ws-card from
   components.css — we only add ornament-specific sizing, ambient
   orbs, and zone layout here.
*/
#sonar-ornament-card {
  width: 340px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Top zone — pentagon comparison visualization */
#sonar-comparison-zone {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-3);
  border-bottom: 1px solid var(--g-border);
}

/* Bottom zone — ranked partner list */
#sonar-partner-list-zone {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-2) var(--s-3);
}

/* Ambient orbs — gradient blobs inside ornament card */
.ornament-orb-a,
.ornament-orb-b,
.ornament-orb-c {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(32px);
  opacity: 0.35;
}

.ornament-orb-a {
  width: 160px;
  height: 160px;
  top: -40px;
  right: -40px;
  background: radial-gradient(circle, var(--teal), transparent 70%);
}

.ornament-orb-b {
  width: 120px;
  height: 120px;
  bottom: 20%;
  left: -30px;
  background: radial-gradient(circle, var(--purple), transparent 70%);
}

.ornament-orb-c {
  width: 100px;
  height: 100px;
  bottom: -20px;
  right: 20%;
  background: radial-gradient(circle, var(--blue), transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  .ornament-orb-a,
  .ornament-orb-b,
  .ornament-orb-c {
    display: none;
  }
}


/* ============================================================
   SECTION 9 — PENTAGON (5-axis comparison radar)
   Axes: Mechanism / Disease / Targets / Modality / Partner
   ============================================================ */

/*
   The pentagon SVG renders in #sonar-comparison-zone.
   5 axes only — never 4. Axis labels set via <text> in SVG;
   CSS handles sizing, fill, and ghost-trail opacity.
   Mobile concern (partneriq.md L141): keep ~140px or relocate.
*/
.pentagon-svg {
  width: 100%;
  aspect-ratio: 1;
  max-width: 140px;
  display: block;
  overflow: visible;
}

/* Axis lines and label groups */
.pentagon-axis line {
  stroke: var(--g-border-strong);
  stroke-width: 1;
}

.pentagon-axis text {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  fill: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Outline polygon — dashed reference shape (5-axis) */
.pentagon-polygon-base {
  fill: none;
  stroke: var(--g-border-strong);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}

/* Anchor org polygon */
.pentagon-polygon-anchor {
  fill: var(--teal);
  fill-opacity: 0.18;
  stroke: var(--teal);
  stroke-width: 1.5;
  stroke-opacity: 0.7;
  transition: d var(--t-norm) var(--ease-out);
}

/* Comparison partner polygon */
.pentagon-polygon-partner {
  fill: var(--purple);
  fill-opacity: 0.18;
  stroke: var(--purple);
  stroke-width: 1.5;
  stroke-opacity: 0.7;
  transition: d var(--t-norm) var(--ease-out);
}

/*
   Ghost trail polygons — max 5 stacked previous comparisons.
   Opacity range 0.04–0.08 per spec (partneriq.md L108).
   JS assigns nth-child or inline opacity; CSS sets the base fill.
*/
.pentagon-polygon-ghost {
  fill: var(--text-faint);
  fill-opacity: 0.06;
  stroke: var(--text-faint);
  stroke-width: 1;
  stroke-opacity: 0.08;
  pointer-events: none;
}

/* Pentagon axis label styling reference (Mechanism / Disease / Targets / Modality / Partner) */
.pentagon-axis[data-axis="mechanism"] text,
.pentagon-axis[data-axis="disease"] text,
.pentagon-axis[data-axis="targets"] text,
.pentagon-axis[data-axis="modality"] text,
.pentagon-axis[data-axis="partner"] text {
  fill: var(--text-faint);
  font-size: 8px;
}


/* ============================================================
   SECTION 10 — WHITESPACEIQ: SCATTER PLOT
   viewBox: 0 0 620 340 (W×H)
   Plot area: L=56, T=16, R=598, B=320
   ============================================================ */

#opp-scatter-wrap {
  position: relative;
  min-height: 280px;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* The SVG — CSS must NOT lock viewBox; that lives in SVG markup */
.opp-scatter-svg {
  width: 100%;
  height: 100%;
  display: block;
  flex: 1 1 0;
  min-height: 240px;
  overflow: visible;
}

/* Axis groups */
.opp-scatter-axis-x text,
.opp-scatter-axis-y text {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  fill: var(--text-faint);
  letter-spacing: 0.4px;
}

.opp-scatter-axis-x line,
.opp-scatter-axis-y line,
.opp-scatter-axis-x path,
.opp-scatter-axis-y path {
  stroke: var(--g-border);
  stroke-width: 1;
}

/* Grid lines — major (dashed, 4,3 pattern) and minor (solid 0.7 stroke) */
.opp-scatter-grid line.major {
  stroke: var(--grid-line-strong);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.opp-scatter-grid line.minor {
  stroke: var(--grid-line);
  stroke-width: 0.7;
}

/* Quadrant background tint regions */
.opp-scatter-quadrant-bg {
  opacity: 1;
}

/*
   Quadrant labels:
   PRIME TARGET (top-right), OPEN FIELD (top-left),
   COMPETITIVE (bottom-right), CROWDED · WEAK (bottom-left)
   Font: 800 18px JetBrains Mono, letter-spacing 2px (whitespaceiq.md L159)
*/
.opp-scatter-quadrant-label {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}

/* Base scatter dot */
.opp-scatter-dot {
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease-out),
              r var(--t-fast) var(--ease-out);
}

.opp-scatter-dot.is-prime-target {
  fill: var(--teal);
}

.opp-scatter-dot.is-open-field {
  fill: var(--blue);
}

.opp-scatter-dot.is-competitive {
  fill: var(--amber);
}

.opp-scatter-dot.is-crowded-weak {
  fill: var(--text-faint);
}

.opp-scatter-dot:hover {
  opacity: 1;
  filter: drop-shadow(0 0 4px var(--teal));
}


/* ============================================================
   SECTION 11 — WHITESPACEIQ: HERO POINT (animated pulse rings)
   ============================================================ */

/*
   Hero rings: outer ring opacity 0.25→0.05 over 3s,
   inner ring opacity 0.85→0.3 over 2.5s.
   Center dot and label overlay.
*/
@keyframes opp-hero-pulse {
  0%   { opacity: 0.25; }
  100% { opacity: 0.05; }
}

@keyframes opp-hero-pulse-inner {
  0%   { opacity: 0.85; }
  100% { opacity: 0.3; }
}

.opp-scatter-hero-ring {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.5;
  animation: opp-hero-pulse 3s ease-in-out infinite alternate;
}

.opp-scatter-hero-ring-inner {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2.5;
  animation: opp-hero-pulse-inner 2.5s ease-in-out infinite alternate;
}

.opp-scatter-hero-dot {
  fill: var(--teal);
  pointer-events: none;
}

.opp-scatter-hero-center {
  fill: var(--g-solid);
  pointer-events: none;
}

.opp-scatter-hero-label {
  background: var(--g-focus);
  border: 1px solid var(--teal);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 600;
  color: var(--teal);
  padding: 2px var(--s-2);
  pointer-events: none;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .opp-scatter-hero-ring,
  .opp-scatter-hero-ring-inner {
    animation: none;
  }
}


/* ============================================================
   SECTION 12 — WHITESPACEIQ: SCATTER TOOLTIP
   ============================================================ */

.opp-scatter-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 100;
  background: var(--g-elevated);
  border: 1px solid var(--g-border-strong);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  box-shadow: var(--sh-2);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  min-width: 160px;
  max-width: 240px;
  display: none;
}

.opp-scatter-tooltip.is-visible {
  display: block;
}

.ost-target {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--s-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ost-disease {
  display: block;
  font-size: var(--text-3xs);
  color: var(--text-muted);
  margin-bottom: var(--s-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ost-tier {
  display: inline-block;
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 1px var(--s-1);
  border-radius: var(--r-sm);
  margin-right: var(--s-1);
  color: var(--text-muted);
  border: 1px solid var(--g-border);
}

.ost-tier.gold {
  color: var(--amber);
  border-color: var(--amber);
  background: var(--g-dark);
}

.ost-tier.silver {
  color: var(--blue);
  border-color: var(--blue);
  background: var(--g-dark);
}

.ost-tier.bronze {
  color: var(--amber-warm);
  border-color: var(--amber-warm);
  background: var(--g-dark);
}

.ost-score {
  display: block;
  font-size: var(--text-2xs);
  color: var(--teal);
  font-weight: 700;
  margin-top: var(--s-1);
}


/* ============================================================
   SECTION 13 — WHITESPACEIQ: EVIDENCE CHAIN TIMELINE
   Rendered inside #opp-evidence-panel (shell in components.css)
   ============================================================ */

.evidence-chain {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-2) 0;
}

/*
   Each card: relative positioning, left padding 14px (for dot),
   left border line per accent color.
*/
.evidence-chain-card {
  position: relative;
  padding-left: 14px;
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
  padding-right: var(--s-2);
  border-left: 2px solid var(--g-border);
  margin-left: 6px;
}

/* Timeline dot — absolute circle on left border, colored by card type */
.evidence-chain-dot {
  position: absolute;
  left: -7px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--g-border);
  background: var(--bg-mid);
}

/* card[data-card="gene"] — indigo accent */
.evidence-chain-card[data-card="gene"] {
  border-left-color: var(--indigo);
}

.evidence-chain-card[data-card="gene"] .evidence-chain-dot {
  border-color: var(--indigo);
  background: var(--indigo);
}

/* card[data-card="genetic"] — amber accent */
.evidence-chain-card[data-card="genetic"] {
  border-left-color: var(--amber);
}

.evidence-chain-card[data-card="genetic"] .evidence-chain-dot {
  border-color: var(--amber);
  background: var(--amber);
}

/* card[data-card="target"] — teal accent */
.evidence-chain-card[data-card="target"] {
  border-left-color: var(--teal);
}

.evidence-chain-card[data-card="target"] .evidence-chain-dot {
  border-color: var(--teal);
  background: var(--teal);
}

/* card[data-card="clinical-gap"] — teal-glow (green) accent */
.evidence-chain-card[data-card="clinical-gap"] {
  border-left-color: var(--teal-glow);
}

.evidence-chain-card[data-card="clinical-gap"] .evidence-chain-dot {
  border-color: var(--teal-glow);
  background: var(--teal-glow);
}

/* Labels, titles, subtitles */
.evidence-chain-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 3px;
}

.evidence-chain-title {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.evidence-chain-subtitle {
  display: block;
  font-family: var(--font-body);
  font-size: 8px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* Source badge pills row */
.evidence-chain-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-top: var(--s-1);
}

.evidence-source-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--s-1);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.3px;
  background: var(--g-focus);
  border: 1px solid var(--teal);
  color: var(--teal);
  white-space: nowrap;
}

/* Data sources footer box */
.evidence-data-sources {
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--g-focus);
  border: 1px solid var(--teal);
  border-radius: var(--r-md);
}

.evidence-data-sources-title {
  display: block;
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--s-1);
}


/* ============================================================
   SECTION 14 — COMPETEIQ: PHASE DISTRIBUTION BAR
   height: 6px, border-radius: 3px, flex row of segments
   Phases: early-p1, p1, p1-2, p2, p2-3, p3, p4
   Colors: purple → blue → cyan(teal-bright) → green(teal-glow)
           → amber → rose → rose-light
   ============================================================ */

.phase-bar {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  width: 100%;
  gap: 1px;
}

.phase-bar-segment {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 0;
  transition: flex-grow var(--t-norm) var(--ease-out);
}

/* Phase color mapping (purple → blue → teal-bright → teal-glow → amber → rose → rose-light) */
.phase-bar-segment.early-p1 {
  background: var(--purple);
}

.phase-bar-segment.p1 {
  background: var(--blue);
}

.phase-bar-segment.p1-2 {
  background: var(--teal-bright);
}

.phase-bar-segment.p2 {
  background: var(--teal-glow);
}

.phase-bar-segment.p2-3 {
  background: var(--amber);
}

.phase-bar-segment.p3 {
  background: var(--rose);
}

.phase-bar-segment.p4 {
  background: var(--rose-light);
}

/* Phase bar legend — inline labels */
.phase-bar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  margin-top: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--text-muted);
}

.phase-bar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.phase-bar-legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}


/* ============================================================
   SECTION 15 — COMPETEIQ: COMPACT 5-AXIS RADAR IN ORG PANEL
   viewBox: 70×66 center (competeiq_landscape.md L127)
   5 axes: Depth, Breadth, Target, IP, Momentum
   Color: var(--amber) per spec
   ============================================================ */

.compact-radar-svg {
  display: block;
  width: 70px;
  height: 66px;
  margin: 0 auto;
  overflow: visible;
}

/* Axis lines for compact radar */
.compact-radar-axes line {
  stroke: var(--g-border-strong);
  stroke-width: 1;
}

.compact-radar-axes text {
  font-family: var(--font-mono);
  font-size: 7px;
  fill: var(--text-faint);
  text-transform: uppercase;
}

/* Filled polygon — amber per spec (Depth, Breadth, Target, IP, Momentum) */
.compact-radar-polygon {
  fill: var(--amber);
  fill-opacity: 0.22;
  stroke: var(--amber);
  stroke-width: 1.5;
  stroke-opacity: 0.8;
}


/* ============================================================
   SECTION 16 — COMPETEIQ DRUG PROFILE: KPI STRIP
   4 cols desktop (1.4fr + 3×1fr), 3 cols ≤1024px, 2 cols ≤600px
   ============================================================ */

.diq-kpi-strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-3);
  width: 100%;
}

.diq-kpi-tile {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3);
  background: var(--g-ground);
  border: 1px solid var(--g-border);
  border-radius: var(--r-lg);
}

.diq-kpi-tile-label {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-faint);
}

.diq-kpi-tile-value {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.diq-kpi-tile-sub {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1024px) {
  .diq-kpi-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .diq-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================
   SECTION 17 — COMPETEIQ DRUG PROFILE: MID GRID
   2-col desktop, 1-col mobile (≤768px)
   ============================================================ */

.diq-mid-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  width: 100%;
}

@media (max-width: 768px) {
  .diq-mid-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   SECTION 18 — COMPETEIQ DRUG PROFILE: EVIDENCE PANEL
   width: 340px, max-width: 340px, sticky, display:none initially
   ============================================================ */

#diq-evidence-panel {
  width: 340px;
  max-width: 340px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  display: none;
  flex-direction: column;
}

#diq-evidence-panel.is-open {
  display: flex;
}

/* Top border accent per spec (competeiq_drugprofile.md L115) */
.diq-evidence-card-header {
  border-top: 3px solid var(--teal);
  padding: var(--s-3) var(--s-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

/* Mechanism comparison box */
.diq-mechanism-comparison {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: var(--g-ground);
  border: 1px solid var(--g-border);
  margin: var(--s-2) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
}

.diq-mechanism-comparison-label {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--s-1);
}

/* Intelligence insight cards */
.diq-intelligence-insight {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  margin: var(--s-1) var(--s-3);
  border-radius: var(--r-md);
  background: var(--g-ground);
  border: 1px solid var(--g-border);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

.diq-intelligence-insight-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Data sources footer */
.diq-data-sources-footer {
  padding: var(--s-2) var(--s-3);
  margin: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  background: var(--g-focus);
  border: 1px solid var(--teal);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.diq-data-source-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--s-1);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  background: var(--g-ground);
  border: 1px solid var(--g-border);
  color: var(--text-muted);
  white-space: nowrap;
}


/* ============================================================
   SECTION 19 — CROSS-MODULE: PHASE PILLS
   (used in CompeteIQ tables — small mono colored badges)
   ============================================================ */

.phase-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--s-1);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--g-border);
  background: var(--g-dark);
  color: var(--text-muted);
}

.phase-pill.p1 {
  background: var(--g-dark);
  border-color: var(--purple);
  color: var(--purple);
}

.phase-pill.p2 {
  background: var(--g-dark);
  border-color: var(--blue);
  color: var(--blue);
}

.phase-pill.p3 {
  background: var(--g-dark);
  border-color: var(--teal);
  color: var(--teal);
}

.phase-pill.p4 {
  background: var(--g-dark);
  border-color: var(--amber);
  color: var(--amber);
}

.phase-pill.approved {
  background: var(--g-dark);
  border-color: var(--teal-glow);
  color: var(--teal-glow);
}

/* Light-mode phase pill contrast hotfix — Phase 3 Ticket 1 Fix 5.
   Port of V1 source line 5085-5115 ("Phase 4b hotfix"). Dark-mode phase pill
   tints (#58efe0 / #60a5fa / #fbbf24 / #34d399) become near-invisible on white.
   V1 fixed this with discrete rgba background / hex text / rgba border per
   phase. We capture those exact values as `--phase-{pX}-light-{bg,tx,bd}`
   tokens in tokens.css so the JSX stays hex-free.

   Both .phase-pill and V1's legacy .diq-phase-badge selectors are matched so
   the rule applies whether the JSX emits the V2 or V1 class name. The
   .drug-intel scope is preserved on a separate selector to mirror V1's
   `.drug-intel .diq-phase-badge.{...}` qualifier (line 5085). */
[data-theme="light"] .phase-pill,
[data-theme="light"] .diq-phase-badge {
  /* Neutral baseline (no phase class). V1 line 5085-5089. */
  background: var(--g-dark);
  border: 1px solid var(--g-border);
  color: var(--text-2, var(--text));
}

/* Phase 1 — purple tint */
[data-theme="light"] .phase-pill.p1,
[data-theme="light"] .diq-phase-badge.p1,
[data-theme="light"] .drug-intel .diq-phase-badge.p1 {
  background: var(--phase-p1-light-bg);
  border-color: var(--phase-p1-light-bd);
  color: var(--phase-p1-light-tx);
}

/* Phase 2 — amber/preclinical tint (V1 L5105-5109) */
[data-theme="light"] .phase-pill.p2,
[data-theme="light"] .diq-phase-badge.p2,
[data-theme="light"] .drug-intel .diq-phase-badge.p2,
[data-theme="light"] .diq-status-badge.preclinical {
  background: var(--phase-p2-light-bg);
  border-color: var(--phase-p2-light-bd);
  color: var(--phase-p2-light-tx);
}

/* Phase 3 — blue/active tint (V1 L5099-5103) */
[data-theme="light"] .phase-pill.p3,
[data-theme="light"] .diq-phase-badge.p3,
[data-theme="light"] .drug-intel .diq-phase-badge.p3,
[data-theme="light"] .diq-status-badge.active {
  background: var(--phase-p3-light-bg);
  border-color: var(--phase-p3-light-bd);
  color: var(--phase-p3-light-tx);
}

/* Phase 4 — teal tint (V1 L5093-5097) */
[data-theme="light"] .phase-pill.p4,
[data-theme="light"] .diq-phase-badge.p4,
[data-theme="light"] .drug-intel .diq-phase-badge.p4,
[data-theme="light"] .diq-status-badge.approved {
  background: var(--phase-p4-light-bg);
  border-color: var(--phase-p4-light-bd);
  color: var(--phase-p4-light-tx);
}

/* Approved (separate from p4 — emerald rather than teal) (V1 L5111-5115) */
[data-theme="light"] .phase-pill.approved,
[data-theme="light"] .diq-phase-badge.approved,
[data-theme="light"] .drug-intel .diq-phase-badge.approved {
  background: var(--phase-approved-light-bg);
  border-color: var(--phase-approved-light-bd);
  color: var(--phase-approved-light-tx);
}


/* ============================================================
   SECTION 20 — MOBILE RESPONSIVE (max-width: 768px)
   ============================================================ */

@media (max-width: 768px) {

  /* Sonar hero: stack vertically (radar above, ranked-list below) */
  #sonar-hero-container {
    flex-direction: column;
  }

  /* Sonar disc goes full width in mobile column layout */
  .sonar-glass-disc {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1;
  }

  /* Ornament card goes full width */
  #sonar-ornament-card {
    width: 100%;
  }

  /* Evidence panels hide on mobile — drawer takes over.
     Uses module-specific panel IDs to avoid redefining the
     shared evidence-panel shell class from components.css. */
  #strat-evidence-panel,
  #opp-evidence-panel {
    display: none;
  }

  #diq-evidence-panel {
    display: none;
  }

  /* KPI strip: 2 cols on mobile */
  .diq-kpi-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Mid grid: 1 col */
  .diq-mid-grid {
    grid-template-columns: 1fr;
  }

  /* Pentagon: keep compact */
  .pentagon-svg {
    max-width: 120px;
  }

  /* Deal segmented control: full width */
  #deal-segmented {
    max-width: 100%;
  }

  /* Phase bar legend: wrap freely */
  .phase-bar-legend {
    gap: var(--s-1);
  }
}


/* ============================================================
   SECTION — COMPETEIQ LANDSCAPE LAYOUT (vertical fill)
   The Landscape table card must fill the viewport vertically so
   pagination is anchored at the bottom of the table card instead
   of floating with empty space below it.

   .comp-landscape-wrap stretches to fill #panel-compete; the
   table column flexes to fill remaining space; the table inner
   wrap (.dt-wrap) scrolls within its container.
   ============================================================ */
.comp-landscape-wrap {
  display: flex;
  flex-direction: column;
  /* Account for chrome top nav (56px) + subview tabs row (~48px) +
     mobile bottom bar safety (~16px). Tweakable but enough breathing
     room to anchor pagination at the visible viewport bottom. */
  min-height: calc(100vh - 120px);
  gap: var(--s-3);
}

#comp-layout-wrap {
  display: flex;
  flex-direction: row;
  gap: var(--s-3);
  flex: 1;
  min-height: 0;
  align-items: stretch;
}

.comp-table-col {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.comp-table-col > .dt-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* Pagination always sits at the bottom of the table column, NOT
   centered in empty space. The dt-pagination row is rendered
   AFTER the table inside .dt-wrap by the renderer. */
.comp-table-col .dt-pagination {
  margin-top: auto;
  flex-shrink: 0;
}


/* ============================================================
   SECTION — PARTNERIQ EVIDENCE / DRAWER LEAKAGE GUARD
   PartnerIQ-owned floating elements (#strat-evidence-panel and
   #part-drawer) can render outside #panel-strategy when they use
   position:fixed/sticky positioning. When the active module is
   NOT 'strategy', hide them so they don't bleed through into
   CompeteIQ / WhitespaceIQ views.

   The selector keys off `html[data-active-module]` which is set
   by chrome.jsx _switchModuleInternal() on every module switch.
   ============================================================ */
html:not([data-active-module="strategy"]) #strat-evidence-panel,
html:not([data-active-module="strategy"]) #part-drawer {
  display: none !important;
}

/* ============================================================
   SECTION — MOBILE EVIDENCE / STRATEGY DRAWERS
   Phase 4.2 (2026-05-03): These drawers are global elements
   in chrome.jsx (Evidence + Strategy Details) intended as
   off-canvas mobile companion panes, populated when a user
   clicks a partner row or evidence link. Without proper CSS
   they rendered as empty bars at the bottom of every page.
   Default = hidden off-canvas (slide up from bottom on .open).
   ============================================================ */
.ev-drawer,
.part-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  max-height: 70vh;
  background: var(--g-frosted, rgba(7,12,23,0.92));
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-top: 1px solid var(--g-border-strong);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -12px 36px rgba(0,0,0,0.45);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32,0.72,0,1);
  pointer-events: none;
  overflow-y: auto;
}
.ev-drawer.open,
.part-drawer.open {
  transform: translateY(0);
  pointer-events: auto;
}
/* Desktop ≥769px: drawers can be hidden entirely (modules use
   their own evidence panels — #strat-evidence-panel etc.). */
@media (min-width: 769px) {
  .ev-drawer,
  .part-drawer {
    display: none;
  }
}

/* ============================================================
   LIGHT-MODE OVERRIDES — 2026-05-05 audit pass
   The deal-trackpad sectors (.tp-sector) bake `rgba(255,255,255,X)`
   for base/hover/active states + box-shadows. In light mode the
   white-on-white reads as no boundary at all. These overrides
   re-bind the same selectors using slate-tinted alphas so the
   trackpad shows clear sector regions in light mode.
   ============================================================ */

/* Base (idle) sector — was rgba(255,255,255,0.08) on white */
[data-theme="light"] .tp-sector {
  background: rgba(15,23,42,0.04);
  border: 1px solid rgba(15,23,42,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(15,23,42,0.04);
}

/* Hover state */
[data-theme="light"] .tp-sector:hover {
  background: rgba(15,23,42,0.07);
  border-color: var(--tp-border, rgba(15,23,42,0.18));
  box-shadow:
    0 0 24px var(--tp-glow, rgba(15,23,42,0.10)),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(15,23,42,0.04);
}

/* Active state */
[data-theme="light"] .tp-sector.active {
  background: rgba(15,23,42,0.10);
  border-color: var(--tp-border, rgba(15,23,42,0.24));
  box-shadow:
    0 0 36px var(--tp-glow, rgba(15,23,42,0.16)),
    0 0 0 1.5px var(--tp-border, rgba(15,23,42,0.20)),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(15,23,42,0.06);
}

/* Per-deal tinted variants — slightly stronger than dark for legibility */
[data-theme="light"] .tp-sector[data-deal="PORTFOLIO_EXPANSION"]  { background: rgba(59,130,246,0.10);  border-color: rgba(59,130,246,0.32); }
[data-theme="light"] .tp-sector[data-deal="PLATFORM_PARTNERSHIP"] { background: rgba(124,58,237,0.10); border-color: rgba(124,58,237,0.32); }
[data-theme="light"] .tp-sector[data-deal="IN_LICENSING"]         { background: rgba(217,119,6,0.10);  border-color: rgba(217,119,6,0.32); }
[data-theme="light"] .tp-sector[data-deal="CO_DEVELOPMENT"]       { background: rgba(13,148,136,0.10); border-color: rgba(13,148,136,0.32); }