/* ============================================================
   COMPONENTS — Shared cross-module CSS layer (Tier 2)
   Loaded after tokens.css and base.css; before modules.css.
   All colors via var(--token). Zero hardcoded hex values.
   DO NOT redefine glass primitives (they live in base.css).
   DO NOT include primitives.jsx runtime selectors (prefixed in JSX).
   ============================================================ */

/* ============================================================
   CARD SYSTEM — .ws-card
   Builds on the glass system from base.css without redefining
   the glass primitives. Uses g-ground tier for main surfaces.
   ============================================================ */

/* ── WhitespaceIQ matrix + right panel split (Phase 4.7 · 2026-05-03) ──
   The .ws-split container in whitespaceiq.jsx wraps the Target × Disease
   matrix and the "Selected Opportunity" card. Without a layout rule the
   two cards stacked vertically and the matrix rendered at full page
   width — way too big. Restored as a 2-column grid: matrix on the left
   (auto-sized by aspect-ratio), right panel always visible at 340px.
   On narrow viewports (<1024px) the cards stack like before. */
.ws-split {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}
.ws-split > .ws-card {
  min-width: 0;
}
.ws-split .ws-card-body#opp-scatter-wrap {
  max-width: 720px;
  margin: 0 auto;
}
@media (max-width: 1023px) {
  .ws-split {
    grid-template-columns: 1fr;
  }
  .ws-split #opp-selected-wrap {
    max-width: 100%;
  }
}

.ws-card {
  background: var(--g-ground);
  border: 1px solid var(--g-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--sh-2), inset 0 1px 0 var(--g-inset-top), inset 0 -1px 0 var(--g-inset-bottom);
  overflow: hidden;
  transition: box-shadow var(--t-norm) var(--ease-out);
}

.ws-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--g-border);
}

.ws-card-title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}

.ws-card-body {
  padding: var(--s-4) var(--s-5);
}

/* ============================================================
   BUTTON SYSTEM
   Base 44px min-height for primary touch targets.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
  user-select: none;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--g-focus);
}

.btn:hover {
  box-shadow: var(--sh-1);
}

.btn-primary {
  background: var(--teal);
  color: var(--bg-deep);
  border-color: var(--teal);
}

[data-theme="dark"] .btn-primary {
  color: var(--bg-deep);
}

[data-theme="light"] .btn-primary {
  color: var(--bg-deep);
}

.btn-primary:hover {
  background: var(--teal-bright);
  border-color: var(--teal-bright);
  box-shadow: var(--sh-1), var(--sh-glow-teal);
}

.btn-primary:focus-visible {
  background: var(--teal-bright);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--g-border);
}

.btn-ghost:hover {
  background: var(--g-ground);
  border-color: var(--g-border-strong);
}

.btn-ghost:focus-visible {
  border-color: var(--teal);
}

.btn-sm {
  min-height: 32px;
  padding: 0 var(--s-3);
  font-size: var(--text-xs);
  border-radius: var(--r-sm);
}

/* ============================================================
   TABLE SYSTEM — table.iq-table
   Shared across PartnerIQ, CompeteIQ, WhitespaceIQ.
   Sticky header, hover tint, .row-hl selected state.
   ============================================================ */

table.iq-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: var(--text-xs);
  color: var(--text);
}

table.iq-table .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

table.iq-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--g-frosted);
  border-bottom: 1px solid var(--g-border);
  text-align: center;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

table.iq-table th,
table.iq-table td {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--g-border);
  font-size: var(--text-xs);
  line-height: 1.4;
}

table.iq-table td {
  color: var(--text);
}

table.iq-table tbody tr {
  transition: background var(--t-fast) var(--ease-out);
}

table.iq-table tbody tr:hover {
  background: color-mix(in srgb, var(--teal) 4%, transparent);
}

table.iq-table tbody tr.row-hl {
  background: color-mix(in srgb, var(--teal) 7%, transparent);
  border-left: 3px solid var(--teal);
}

table.iq-table tbody tr.clickable {
  cursor: pointer;
}

table.iq-table tbody tr.result-in {
  animation: row-fade-in 220ms var(--ease-out) both;
}

@keyframes row-fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   PAGINATION — .iq-pagination
   44px hit-targets required per parity spec.
   Verifier checks: min-height: 44px and min-width: 44px.
   ============================================================ */

.iq-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-4) 0;
}

.iq-pagination button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text);
  background: var(--g-ground);
  border: 1px solid var(--g-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
}

.iq-pagination button:hover:not(:disabled) {
  background: var(--g-frosted);
  border-color: var(--g-border-strong);
  box-shadow: var(--sh-1);
}

.iq-pagination button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.iq-pagination button:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.iq-pagination .iq-page-indicator {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  min-width: 60px;
  text-align: center;
  user-select: none;
}

/* ============================================================
   BADGES AND PILLS — public semantic classes
   Modules apply these directly via className. The primitives.jsx
   runtime uses its own prefixed variants (defined in JSX only).
   These are the module-applied equivalents for table + panel use.
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  border: 1px solid var(--g-border);
  background: var(--g-frosted);
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1.3;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 500;
  border-radius: var(--r-pill);
  border: 1px solid var(--g-border);
  background: var(--g-ground);
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1.3;
}

/* Deal-type colored badges — used by PartnerIQ dealBadge() */
.deal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  white-space: nowrap;
  line-height: 1.3;
  border: 1px solid transparent;
}

/* CO_DEVELOPMENT → teal */
.deal-badge.codev {
  background: var(--g-focus);
  color: var(--teal-bright);
  border-color: var(--teal);
}

/* PLATFORM_PARTNERSHIP → purple */
.deal-badge.platform {
  background: color-mix(in srgb, var(--purple) 12%, transparent);
  color: var(--purple);
  border-color: var(--purple);
}

/* PORTFOLIO_EXPANSION → blue */
.deal-badge.portfolio {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
  border-color: var(--blue);
}

/* IN_LICENSING → amber */
.deal-badge.licensing {
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  color: var(--amber);
  border-color: var(--amber);
}

/* ============================================================
   EVIDENCE PANEL SHELL — sticky 340px right-side panel
   Used by PartnerIQ (#strat-evidence-panel),
   CompeteIQ (#diq-evidence-panel),
   WhitespaceIQ (#opp-evidence-panel).
   ============================================================ */

.evidence-panel {
  width: 340px;
  max-width: 340px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--g-ground);
  border: 1px solid var(--g-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--sh-2);
  transition: width 350ms var(--ease-out), opacity var(--t-norm) var(--ease-out);
}

/* Light-mode theme-aware top border (3px teal). The dark surface needs no
   color cue — the brand teal halo on the top edge IS the affordance signal
   in light mode where the glass-on-bg contrast is too low to read otherwise.
   Per VISUAL_PARITY_HANDOFF.md §6 Phase 4 item #4. */
[data-theme="light"] .evidence-panel {
  border-top: 3px solid var(--teal);
}

.evidence-panel.is-open {
  opacity: 1;
  pointer-events: auto;
}

.evidence-panel.is-closed {
  width: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.evidence-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4);
  border-bottom: 3px solid var(--teal);
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--g-frosted);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Close button in evidence panel header: must be ≥44×44 hit target */
.evidence-panel-header .ep-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
  flex-shrink: 0;
}

.evidence-panel-header .ep-close-btn:hover {
  background: var(--g-focus);
  color: var(--teal);
}

.evidence-panel-header .ep-close-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.evidence-panel-body {
  padding: var(--s-4);
  overflow-y: auto;
}

/* Mobile: hide evidence panel on small screens */
@media (max-width: 768px) {
  .evidence-panel {
    display: none;
  }
}

/* ============================================================
   DRAWER SHELL — mobile bottom sheet
   Used for evidence + filter overlays on mobile.
   ============================================================ */

.drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 80vh;
  background: var(--g-frosted);
  border: 1px solid var(--g-border);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: var(--sh-4), inset 0 1px 0 var(--g-inset-top);
  transform: translateY(100%);
  transition: transform 350ms var(--ease-out);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.drawer.open {
  transform: translateY(0);
}

/* Drawer handle — 44px touch zone for drag affordance */
.drawer-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
}

.drawer-handle::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--g-border-strong);
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 var(--s-5) var(--s-5);
  -webkit-overflow-scrolling: touch;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--g-dark);
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms var(--ease-out);
  z-index: 999;
}

.drawer-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
   SEARCH ROW + CROSS-MODULE ISLAND
   .search-xmod-row wraps the search container and xmod island.
   Used in all three modules.
   ============================================================ */

.search-xmod-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  /* CTK 2026-05-12: header is fully transparent so the page atmo grid
     reads continuously through it. The previous theme-specific bgs
     (rgba(241,244,249,0.72) light / rgba(7,12,23,0.55) dark) plus an
     18px backdrop-blur smeared the grid pattern behind the header,
     making it read as a separate slab. Inner elements (xmod-island,
     diq-search-container) carry their own glass — the row container
     is purely structural. */
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
}

/* ── Search container — glass capsule (standalone parity, /workspace/search-bar-standalone.html) ── */
.diq-search-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  max-width: 640px;
  padding: 4px 12px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--g-frosted), var(--g-ground));
  border: 1px solid var(--g-border-strong);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    var(--sh-3),
    inset 0 1px 0 var(--g-inset-top),
    inset 0 -1px 0 var(--g-inset-bottom);
  transition: box-shadow var(--t-fast) var(--ease-out);
}
.diq-search-container:hover,
.diq-search-container:focus-within {
  box-shadow:
    var(--sh-3),
    var(--sh-glow-teal),
    inset 0 1px 0 var(--g-inset-top),
    inset 0 -1px 0 var(--g-inset-bottom);
}

/* ── Inner row ── */
.diq-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

/* ── "Explore by" mono label ── */
.diq-search-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--text-muted);
}

/* ── Input wrap with icon ── */
.diq-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 120px;
}
.diq-search-icon {
  position: absolute;
  left: 10px;
  pointer-events: none;
  flex-shrink: 0;
  color: var(--text-faint);
}

/* ── Mode-tab strip (TA/Disease/Org, Drug/Target, ws filters) ── */
.diq-search-mode-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--g-ground);
}

/* ── ws filter count badge ── */
.ws-filter-count {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--teal);
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--teal-dim);
  white-space: nowrap;
}

/* ── PartnerIQ swap button ── */
.part-swap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid var(--g-border);
  background: var(--g-ground);
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.part-swap:hover {
  background: var(--g-focus);
  border-color: var(--teal);
  color: var(--teal);
}

.diq-search-input {
  width: 100%;
  flex: 1;
  min-width: 140px;
  padding: 6px 10px 6px 32px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: var(--g-frosted);
  border: 1px solid var(--g-border);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 var(--g-inset-top);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  outline: none;
}
/* When NOT inside a .diq-search-input-wrap (i.e. no leading icon), drop
   the 32px left-padding so legacy markup still aligns nicely. */
.diq-search-container > .diq-search-input,
.diq-search-row    > .diq-search-input {
  padding-left: 10px;
}

/* ── Autocomplete dropdown (#opp-ta-dd, etc.) ──
   CTK 2026-05-12: dropdown had no CSS rules at all -> position: static -> it
   rendered inline RIGHT of the search input ("on the side") instead of
   below. Anchor it absolutely under the input wrap (which is already
   position:relative) so it drops below the search bar where users expect. */
.ac-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 200;
  background: linear-gradient(180deg, var(--g-elevated), var(--g-frosted));
  border: 1px solid var(--g-border-strong);
  border-radius: 12px;
  box-shadow: var(--sh-3), inset 0 1px 0 var(--g-inset-top);
  max-height: 260px;
  overflow-y: auto;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.ac-item {
  padding: 9px 14px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid var(--g-border-light, rgba(255,255,255,0.06));
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover {
  background: rgba(var(--pill-rgb, 13,143,134), 0.10);
  color: var(--text);
}
[data-theme="light"] .ac-item:hover { background: rgba(13,143,134,0.08); }
[data-theme="dark"]  .ac-item:hover { background: rgba(61,187,176,0.12); }

.diq-search-input::placeholder {
  color: var(--text-faint);
}

.diq-search-input:focus {
  border-color: var(--teal);
  background: var(--g-elevated);
  box-shadow:
    0 0 0 3px var(--g-focus),
    var(--sh-glow-teal),
    inset 0 1px 0 var(--g-inset-top);
}

/* UR-009 fix — light-mode contrast tighten.
   `--g-frosted` resolves to rgba(255,255,255,0.96) in light mode = effectively
   white on a white page background, making search inputs and filter pills
   read as washed-out blobs. Use higher-contrast surfaces with a slate border
   so the controls register as interactive against the page. Dark mode keeps
   the existing glass treatment. */
[data-theme="light"] .diq-search-input {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="light"] .diq-search-input::placeholder {
  color: #94a3b8 !important;
}
[data-theme="light"] .diq-search-input:focus {
  border-color: var(--teal) !important;
  box-shadow: 0 0 0 3px rgba(13,143,134,0.12), 0 1px 2px rgba(15,23,42,0.06) !important;
}
[data-theme="light"] .diq-search-row,
[data-theme="light"] .diq-search-container {
  /* Optional subtle ground tint behind the row so the input pop reads cleanly. */
  background: transparent;
}
[data-theme="light"] .diq-mode-tab.active,
[data-theme="light"] .diq-mode-tab.on:not(.ws-filter-toggle) {
  /* Bump active-tab contrast — was rgba(0,0,0,0.06) which is barely visible. */
  background: rgba(15, 23, 42, 0.10) !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}
/* WhitespaceIQ top section (.ws-card / .ws-card-header) — give the cards a
   visible white surface and slate border in light so they don't blend into
   the page background. */
[data-theme="light"] .ws-card {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.10) !important;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.05) !important;
}
[data-theme="light"] .ws-card-header {
  border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] .ws-card-title {
  color: #0f172a !important;
}

/* Search / Analyze button — compact pill matching standalone reference */
.diq-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 7px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--bg-deep);
  background: var(--teal);
  border: 1px solid var(--teal);
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
}

.diq-search-btn:hover {
  background: var(--teal-bright);
  border-color: var(--teal-bright);
  box-shadow: var(--sh-1), var(--sh-glow-teal);
}

.diq-search-btn:focus-visible {
  outline: 2px solid var(--teal-bright);
  outline-offset: 2px;
}

/* Dark mode: V1-parity muted teal (subdued, professional — not attention-grabbing bright) */
[data-theme="dark"] .diq-search-btn {
  background: #0d9488;
  border-color: #0d9488;
  color: #fff;
}
[data-theme="dark"] .diq-search-btn:hover {
  background: #0f766e;
  border-color: #0f766e;
  box-shadow: var(--sh-1), var(--sh-glow-teal);
}

.diq-search-dropdown {
  position: absolute;
  z-index: 100;
  min-width: 220px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--g-elevated);
  border: 1px solid var(--g-border-strong);
  border-radius: var(--r-md);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--sh-3);
  margin-top: var(--s-1);
}

.diq-search-dropdown:empty {
  display: none;
}

.diq-mode-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--g-frosted);
  border: 1px solid var(--g-border);
  border-radius: var(--r-pill);
  cursor: default;
  user-select: none;
  white-space: nowrap;
}

/* ============================================================
   ORG-TYPE PILLS — CompeteIQ Landscape filter pills
   Multi-select; inactive = border-only; active = filled.
   ============================================================ */

.comp-org-type-row,
.comp-org-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
}

/* Count chip inside .comp-org-pill (e.g. "PHARMA 25") */
.comp-org-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  margin-left: 2px;
  border-radius: var(--r-sm);
  background: var(--g-ground);
  color: inherit;
  font-size: var(--text-3xs);
  font-weight: 600;
  font-family: var(--font-mono);
  line-height: 1;
  opacity: 0.85;
}
.comp-org-pill.active .comp-org-pill-count {
  background: rgba(255, 255, 255, 0.18);
  opacity: 1;
}

.comp-org-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--g-border);
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
  user-select: none;
}

.comp-org-pill:hover:not(.active) {
  border-color: var(--g-border-strong);
  background: var(--g-ground);
}

.comp-org-pill:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Active state: filled — uses indigo/navy per competeiq_landscape.md L46 */
.comp-org-pill.active {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--bg-deep);
  box-shadow: var(--sh-1);
}

[data-theme="light"] .comp-org-pill.active {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--bg-deep);
}

/* ============================================================
   CROSS-INTELLIGENCE ISLAND — xmod chips
   Contextual cross-module navigation bar.
   ============================================================ */

.xmod-island {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding: var(--s-2) var(--s-3);
  /* V1-grade frosted glass — matches canonical Phase 4b Round 6 material */
  background: linear-gradient(180deg, var(--g-frosted), var(--g-ground));
  border: 1px solid var(--g-border-strong);
  border-radius: 24px;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    var(--sh-3),
    inset 0 1px 0 var(--g-inset-top),
    inset 0 -1px 0 var(--g-inset-bottom);
  transition: box-shadow var(--t-fast) var(--ease-out);
}

.xmod-island:hover {
  box-shadow:
    var(--sh-3),
    var(--sh-glow-teal),
    inset 0 1px 0 var(--g-inset-top),
    inset 0 -1px 0 var(--g-inset-bottom);
}

.xmod-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 4px var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--g-ground);
  border: 1px solid var(--g-border);
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out);
  user-select: none;
}

.xmod-pill:hover {
  background: var(--g-frosted);
  border-color: var(--teal);
  color: var(--teal);
}

.xmod-pill:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ============================================================
   UTILITIES
   ============================================================ */

/* Screen-reader only — hides element visually but keeps it in
   the accessibility tree. Used for table captions etc. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Shimmer loading skeleton animation */
.shimmer {
  position: relative;
  overflow: hidden;
  background: var(--g-ground);
  border-radius: var(--r-sm);
}

.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--g-frosted) 40%,
    var(--g-elevated) 50%,
    var(--g-frosted) 60%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer-sweep 1.6s ease-in-out infinite;
}

@keyframes shimmer-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   EMBED MODE — transparent bg, no chrome
   These override when ?embed=true adds .embed-mode to <html>.
   ============================================================ */

.embed-mode body {
  background: transparent;
}

/* Atmosphere dimming in embed mode (opacity: 0.4) is applied by
   app.jsx at runtime to avoid redefining base.css primitives here. */

.embed-mode #chrome-nav {
  display: none;
}

/* ── Chrome home orb · top-left brand button (Phase 4.2 · 2026-05-03) ──
   The home orb existed in chrome.jsx (line 329) but had no CSS, so it
   rendered as a transparent button. Restored to V1's floating-home-btn
   glass-capsule treatment so it's clearly visible. */
.chrome-home-orb {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: var(--g-frosted, rgba(255,255,255,0.04)) !important;
  border: 1px solid var(--g-border, rgba(255,255,255,0.10)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 2px 8px rgba(0,0,0,0.20);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color: var(--text) !important;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.chrome-home-orb:hover {
  transform: translateY(-1px);
  background: var(--g-ground, rgba(255,255,255,0.07)) !important;
  border-color: var(--g-border-strong, rgba(255,255,255,0.18)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 14px rgba(20,184,166,0.18);
}
[data-theme="light"] .chrome-home-orb {
  background: rgba(255,255,255,0.55) !important;
  border-color: rgba(15,23,42,0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 8px rgba(15,23,42,0.06);
  color: rgba(15,23,42,0.85) !important;
}

/* ============================================================
   RESPONSIVE — mobile adjustments for shared components
   ============================================================ */

@media (max-width: 768px) {
  .search-xmod-row {
    flex-direction: column;
    align-items: stretch;
  }

  .diq-search-container {
    min-width: 0;
  }

  .ws-card-body {
    padding: var(--s-3);
  }

  .ws-card-header {
    padding: var(--s-3) var(--s-3);
  }

  .iq-pagination {
    gap: var(--s-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .shimmer::after {
    animation: none;
  }

  table.iq-table tbody tr.result-in {
    animation: none;
  }

  .drawer {
    transition: none;
  }

  .evidence-panel {
    transition: none;
  }
}

/* ============================================================
   RESPONSIVE — hide mobile bottom-bar at desktop viewports
   The BottomBar component (chrome.jsx) renders #sidebar-bottom-bar
   for ≤768px viewports only. This rule hides it everywhere wider.
   ============================================================ */

@media (min-width: 769px) {
  #sidebar-bottom-bar,
  .sidebar-bottom-bar {
    display: none !important;
  }

  /* Desktop chrome-main: remove mobile bottom-bar padding */
  #chrome-main.chrome-main {
    padding-bottom: 0 !important;
  }
}

/* ============================================================
   COMPETEIQ STRUCTURAL CLASSES — Phase 3.1 reconciliation
   The JSX in V2/src/competeiq.jsx emits class names that had no
   CSS rules in V2 (~12 names, including comp-row, comp-mode-btn,
   org-panel-close, diq-back-btn, diq-mid-card, diq-comp-row,
   ev-insight-card). Direction picked: JSX → CSS (add rules,
   don't rename JSX). V1 styles those elements with a mix of
   inline style + class so we port the visual spec, not literal V1
   class CSS. Tokens used throughout — zero hex literals.
   ============================================================ */

/* Landscape table row (V2 emits at competeiq.jsx:553) */
.comp-row {
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
}
.comp-row:hover {
  background: var(--g-ground);
}
.comp-row.selected {
  background: var(--g-frosted);
  box-shadow: inset 3px 0 0 var(--teal);
}
[data-theme="light"] .comp-row.selected {
  background: var(--surface);
  box-shadow:
    inset 3px 0 0 var(--teal),
    0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Mode-toggle button (TA Mode / Disease Mode at competeiq.jsx:373-374).
   Same shape as .comp-org-pill but content-typed (not filter pills). */
.comp-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: 6px var(--s-3);
  border: 1px solid var(--g-border);
  border-radius: var(--r-sm);
  background: var(--g-spatial);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}
.comp-mode-btn:hover:not(.active) {
  background: var(--g-ground);
  border-color: var(--g-border-strong);
  color: var(--text);
}
.comp-mode-btn.active {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--bg-deep);
}
[data-theme="light"] .comp-mode-btn.active {
  color: var(--surface);
}

/* Org panel close button (competeiq.jsx:712) */
.org-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease-out);
}
.org-panel-close:hover {
  background: var(--g-ground);
}

/* Drug Profile back button (competeiq.jsx:908, 981) */
.diq-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 6px var(--s-3);
  border: 1px solid var(--g-border);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}
.diq-back-btn:hover {
  background: var(--g-ground);
  color: var(--text);
}

/* Drug Profile mid-grid card (competeiq.jsx:922, 929, 941) — used WITH .glass-ground */
.diq-mid-card {
  border: 1px solid var(--g-border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.diq-mid-card .diq-card-title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3, var(--text-muted));
  margin-bottom: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.diq-mid-card .diq-field-label {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3, var(--text-muted));
}
.diq-mid-card .diq-field-value {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

/* Drug Profile competitors row (competeiq.jsx:1054) */
.diq-comp-row {
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.diq-comp-row:hover {
  background: var(--g-ground);
}
.diq-comp-row.selected {
  background: var(--g-frosted);
}

/* Org panel quick-pills row (TA / TGT / DRUG) — V1 L22455-22479
   Three semantic pill flavors. Each has a tiny uppercase mono prefix tag
   followed by the value. Backgrounds + borders use brand tokens at low alpha. */
.comp-quick-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
  margin-bottom: var(--s-3);
}
.comp-quick-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px var(--s-2);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.comp-quick-pill-tag {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.comp-quick-pill-ta {
  background: color-mix(in srgb, var(--rose) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--rose) 18%, transparent);
  color: var(--text);
}
.comp-quick-pill-tgt {
  background: color-mix(in srgb, var(--teal) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 22%, transparent);
  color: var(--teal);
}
.comp-quick-pill-drug {
  background: color-mix(in srgb, var(--blue) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  color: var(--blue);
  font-style: italic;
}
.comp-quick-pill-more {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  color: var(--text-muted);
  font-weight: 600;
}

/* "Why this score?" expandable (CTK Q5) — partneriq comparison-zone
   ornament. Quote at top + top-2 highlight pills + 6-row factor breakdown
   with horizontal bar viz. Layout per CTK 2026-04-30 screenshot. */
.why-score {
  width: 100%;
  margin-top: var(--s-2);
}
.why-score-summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-2);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.why-score-summary-caret {
  font-size: 8px;
  transition: transform 0.18s ease;
}
.why-score[open] .why-score-summary-caret {
  transform: rotate(180deg);
}
.why-score-summary::-webkit-details-marker { display: none; }
.why-score-summary:hover { color: var(--text); }
.why-score-body {
  padding: var(--s-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.why-score-quote {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--text-muted);
  text-align: center;
  margin: 0;
  line-height: 1.4;
}
.why-score-highlights {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.why-score-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--s-3);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.why-score-pill[data-axis="mechanism"] {
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 30%, transparent);
  color: var(--teal);
}
.why-score-pill[data-axis="modality"] {
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  color: var(--amber);
}
.why-score-pill[data-axis="collab"] {
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  color: var(--blue);
}
.why-score-pill[data-axis="partner"] {
  background: color-mix(in srgb, var(--rose) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--rose) 30%, transparent);
  color: var(--rose);
}
.why-score-pill[data-axis="target"],
.why-score-pill[data-axis="disease"] {
  background: var(--g-frosted);
  border: 1px solid var(--g-border);
  color: var(--text);
}
.why-score-rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.why-score-row {
  display: grid;
  grid-template-columns: 100px 1fr 36px;
  align-items: center;
  gap: var(--s-2);
}
.why-score-label {
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.why-score-weight {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  color: var(--text-muted);
}
.why-score-bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--g-ground);
  overflow: hidden;
}
.why-score-bar-fill {
  height: 100%;
  border-radius: inherit;
  transition: width var(--t-norm) var(--ease-out);
}
.why-score-val {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 700;
  color: var(--text);
  text-align: right;
}

/* Evidence insight card (competeiq.jsx:1121) */
.ev-insight-card {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--g-border);
  border-radius: var(--r-md);
  background: var(--g-spatial);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text);
}
.ev-insight-card + .ev-insight-card {
  margin-top: var(--s-2);
}

/* ============================================================
   COMPETEIQ RECONCILIATION — Phase 3 Ticket 1 (JSX→CSS direction)
   The JSX in V2/src/competeiq.jsx emits class names that had no
   matching CSS rules in V2 prior to Phase 3 Ticket 1. We renamed
   most JSX classes to existing rules (.dt → .iq-table, .diq-kpi-cell
   → .diq-kpi-tile, .dt-pagination → .iq-pagination). The remaining
   names below are layout/wrapper helpers without an analogous V1
   rule — we add minimal token-only definitions here.
   All tokens, zero hex literals.
   ============================================================ */

/* Glass-ground tier (referenced as utility on .diq-mid-card,
   .ev-moa-box; fills the gap left in base.css where .glass-spatial
   and .glass-elevated are defined but .glass-ground is not). */
.glass-ground {
  background: linear-gradient(180deg, var(--g-ground), var(--g-spatial));
  border: 1px solid var(--g-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--sh-1);
}

/* Empty / loader / error utilities (V1 has these as widget primitives,
   V2 was using them in JSX but had no rules). */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-12) var(--s-6);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
}
.empty-state-icon {
  font-size: 32px;
  opacity: 0.3;
  font-family: var(--font-mono);
  margin-bottom: var(--s-2);
}
.empty-state-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
}
.empty-state-desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
  max-width: 360px;
  line-height: 1.5;
}

.loader-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-12);
  width: 100%;
}
.loader {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--g-border);
  border-top-color: var(--teal);
  animation: loader-spin 800ms linear infinite;
}
@keyframes loader-spin {
  to { transform: rotate(360deg); }
}

/* Error card — small reset; inline JSX still emits the bg/border shade
   via tokens (see competeiq.jsx :: _renderErrorCard). */
.error-card {
  display: block;
  font-family: var(--font-body);
}

/* Toolbar + search wrap — Landscape sub-view (competeiq.jsx _buildLandscapeShell) */
.comp-toolbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
}
.comp-search-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 220px;
  max-width: 320px;
}
.comp-search-icon {
  position: absolute;
  left: var(--s-3);
  display: inline-flex;
  align-items: center;
  pointer-events: none;
  color: var(--text-muted);
}
.comp-search-input {
  flex: 1;
  height: 36px;
  padding: 0 var(--s-3) 0 calc(var(--s-3) + 22px);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text);
  background: var(--g-frosted);
  border: 1px solid var(--g-border);
  border-radius: var(--r-sm);
  outline: none;
  width: 100%;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.comp-search-input::placeholder { color: var(--text-faint); }
.comp-search-input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--g-focus);
}

/* Cross-module bar in toolbar */
.comp-xmod-bar {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

/* Layout wrap — two-column flex (table + panel) */
.comp-org-panel {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  transition:
    width var(--t-slow) var(--ease-out),
    opacity var(--t-norm) var(--ease-out);
}
.comp-org-panel-inner {
  padding: var(--s-4);
  background: var(--g-elevated);
  border: 1px solid var(--g-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--sh-2);
}
[data-theme="light"] .comp-org-panel-inner {
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.org-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.org-panel-section {
  margin-top: var(--s-2);
  border-top: 1px solid var(--g-border);
  padding-top: var(--s-2);
}
.org-panel-section > summary {
  list-style: none;
  outline: none;
}
.org-panel-section > summary::-webkit-details-marker { display: none; }

/* Org-name x-module link pill (competeiq.jsx:142) */
.org-xlink {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: inherit;
  border-bottom: 1px dotted var(--g-border-strong);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.org-xlink:hover {
  color: var(--teal);
  border-bottom-color: var(--teal);
}
[data-theme="light"] .org-xlink {
  border-bottom-color: rgba(13, 143, 134, 0.3);
}

/* Org type tag (TA-mode landscape table 'Type' fallback column). */
.org-type-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--g-spatial);
  border: 1px solid var(--g-border);
}

/* Drug+count pill in disease-mode landscape table (competeiq.jsx _renderLandscapeTable disease branch). */
.comp-drug-count-pill {
  display: inline-flex;
  align-items: center;
}

/* Modality pill — shared between Landscape disease mode + competitors table.
   V1 uses indigo-tint hex `rgba(99,102,241,.08)` etc.; V2 routes to --indigo. */
.comp-modality-pill {
  display: inline-block;
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 600;
  white-space: nowrap;
  background: color-mix(in srgb, var(--indigo) 10%, transparent);
  color: var(--indigo);
  border: 1px solid color-mix(in srgb, var(--indigo) 25%, transparent);
}

/* Score-bar / mini-bar shared track (used by scoreBarHTML, _miniBar, ipCoverageBarHTML).
   The tracks need a visible bg in BOTH themes. V1 light uses rgba(0,0,0,0.06). */
.comp-score-bar-track,
.comp-mini-bar-track {
  background: var(--g-frosted);
}
[data-theme="light"] .comp-score-bar-track,
[data-theme="light"] .comp-mini-bar-track {
  background: rgba(15, 23, 42, 0.06);
}

/* Subview tabs container (renderCompeteIQ bootstraps this). */
.comp-subview-tabs {
  background: transparent;
}
.comp-subview-tab {
  /* inline styles in JSX provide the look; this keeps the class slot for
     theme-level overrides. */
}
.comp-subview-tab.active {
  /* ditto */
}

/* Mode toggle (TA / Disease) — alread defined above, just nothing to add */

/* Drug Profile back button — already defined above */

/* Landscape table card wrapper */
.comp-landscape-table {
  /* uses .iq-table base; this class is just a hook. */
  width: 100%;
}

/* Drug-profile picker entries */
.diq-drug-name-btn {
  display: block;
  width: 100%;
  padding: var(--s-2) var(--s-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.diq-drug-name-btn:hover {
  background: var(--g-ground);
  border-color: var(--g-border);
}
.diq-drug-name-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 1px;
}

/* Drug Profile sections (header, safety accordion, evidence panel inner). */
.diq-header,
.diq-bottom-grid,
.diq-safety-accordion {
  /* layout helpers — JSX uses inline styles for sizing; these are class hooks
     so future theming can target them without touching JSX. */
}

.drug-intel {
  /* root wrapper for drug-intel sub-view; provides a class scope
     for V1's `.drug-intel .diq-phase-badge` light hotfix selectors
     used in modules.css. */
  display: block;
}

/* Score Breakdown table styling — emitted from _buildOrgPanelHTML. */
.comp-score-breakdown-table {
  font-size: var(--text-3xs);
  font-family: var(--font-mono);
  background: var(--g-spatial);
  border: 1px solid var(--g-border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.comp-score-breakdown-table th {
  font-weight: 600;
}

/* Cross-module footer cards in org panel. */
.comp-xmod-card {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  background: var(--g-spatial);
  border: 1px solid var(--g-border);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.comp-xmod-card:hover {
  background: var(--g-ground);
  color: var(--teal);
  border-color: var(--teal);
}

/* "View Drug Profile →" CTA */
.comp-view-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 44px;
  padding: 8px var(--s-4);
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  border: 1px solid var(--teal);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--teal);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.comp-view-profile-btn:hover {
  background: var(--teal);
  color: var(--bg-deep);
}

/* Breadcrumb chip */
.comp-bc-btn {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s-2);
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--teal);
  cursor: pointer;
}
.comp-bc-btn:hover { text-decoration: underline; }
.comp-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* xmod-island-wrap (cross-module bar wrap in landscape) */
.xmod-island-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
.xmod-island-wrap:empty { display: none; }

/* Drug Profile evidence panel — JSX writes to #diq-evidence-panel; we add
   a base class hook for layout styling (modules.css owns the sticky/width
   behavior). */
.diq-evidence-panel {
  /* width/sticky behavior in modules.css#diq-evidence-panel */
}

/* Light-mode glass-on-light boost. V1 light explicitly opts out of glass for
   most cards (V1 source comment line 5117-5132). The glass-ground tier in
   light needs a higher-luminance bg + visible border so card boundaries don't
   disappear against the slate-100 body. */
[data-theme="light"] .glass-ground {
  background: var(--surface);
  border-color: var(--g-border-strong);
  box-shadow: var(--sh-1);
}
[data-theme="light"] .diq-mid-card {
  background: var(--surface);
  border-color: var(--g-border-strong);
}

/* IP & Exclusivity card boost (V1 source comment line 5117-5132 — V1 explicitly
   boosted these because regular cards were "so faint that boundaries disappear"
   on light bodies). */
[data-theme="light"] .diq-mid-card.ip-card {
  background: linear-gradient(180deg, var(--g-frosted), var(--g-ground));
  border-color: var(--g-border-strong);
  box-shadow: var(--sh-2), inset 0 1px 0 var(--g-inset-top);
}

/* Drug Profile competitors table — V1's .diq-ct shorthand for the inner
   table chrome. Most styling is inherited from .iq-table; we add a hook so
   future overrides can target this table specifically. */
.diq-ct {
  width: 100%;
}
.diq-ct thead th {
  /* Slightly tighter padding than landscape table since drug-profile already
     sits inside a card chrome. */
  padding: var(--s-2) var(--s-3);
}
.diq-ct tbody tr {
  cursor: pointer;
}

/* Drug Profile indication row — defined here so the row hover + theme
   colors are class-driven, not inline. */
.diq-ind-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-1) 0;
  border-bottom: 1px solid var(--g-border);
  font-size: var(--text-xs);
}
.diq-ind-name {
  color: var(--text);
  font-weight: 500;
}

/* Evidence drawer header / section / close / sources — class hooks. */
.ev-header,
.ev-section,
.ev-sources,
.ev-close-btn,
.ev-empty-state {
  /* layout/styling lives in JSX inline + the .diq-evidence-card-header rule
     in modules.css. These hooks let theme overrides target without touching JSX. */
}

/* Score Breakdown row + accordion hooks. */
.score-bd-row,
.score-breakdown {
  /* hooks for theming */
}

/* Mini-bar wrapper hook (used by _miniBar). */
.comp-mini-bar-cell {
  /* layout via inline; class hook for future theming. */
}

/* Layout wrap class alias. modules.css defines #comp-layout-wrap as an ID
   selector for the flex layout; the JSX also emits .comp-layout-wrap so we
   provide the class form here for defensive cascade. */
.comp-layout-wrap {
  display: flex;
  flex-direction: row;
  gap: var(--s-3);
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

/* ══════════════════════════════════════════════════════════════════
   Phase A — Orphan class port from V1_Reference/index_LG_PROD.html
   These selectors exist in JSX but were never defined in V2/styles.
   Ported verbatim with `.dash-content` prefix removed (V2 has no such
   wrapper — the equivalents in V1 sit inside `.dash-content`).
   ══════════════════════════════════════════════════════════════════ */

/* ── .ws-dt — Whitespace data table (V1 L10520-10554) ── */
.ws-dt { width: 100%; border-collapse: collapse; }
.ws-dt thead tr { background: transparent; }
.ws-dt th {
  padding: 9px 12px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: rgba(255,255,255,.55);
  font-family: var(--mono);
  white-space: nowrap;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ws-dt th[onclick] { cursor: pointer; }
.ws-dt th[onclick]:hover { color: rgba(255,255,255,.85); }
.ws-dt td {
  padding: 10px 12px;
  font-size: 11.5px;
  color: #cbd5e1;
  border-bottom: 1px solid var(--border-lt);
  vertical-align: middle;
  text-align: center;
  background: transparent;
}
.ws-dt tbody tr { cursor: pointer; }
.ws-dt tbody tr:last-child td { border-bottom: none; }
.ws-dt tbody tr:hover td { background: rgba(61,187,176,.03); }
.ws-dt tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--teal); }
.ws-dt tbody tr.row-hl td { background: rgba(61,187,176,.06); }
.ws-dt tbody tr.row-hl td:first-child { border-left: 3px solid var(--teal); padding-left: 9px; }
.ws-nm-c { font-weight: 700; color: #e2e8f0; }
.ws-sc { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: #58efe0; }

/* Light mode .ws-dt overrides (V1 L4680-4716) */
[data-theme="light"] .ws-dt thead tr { background: transparent !important; }
[data-theme="light"] .ws-dt th {
  color: #475569 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .ws-dt th[onclick]:hover { color: #0f172a !important; }
[data-theme="light"] .ws-dt td {
  color: #334155 !important;
  border-bottom-color: rgba(0,0,0,0.06) !important;
}
[data-theme="light"] .ws-dt tbody tr {
  transition: background .18s cubic-bezier(.32,.72,0,1), box-shadow .18s cubic-bezier(.32,.72,0,1);
}
[data-theme="light"] .ws-dt tbody tr:hover {
  box-shadow: inset 3px 0 0 rgba(13,143,134,0.50) !important;
}
[data-theme="light"] .ws-dt tbody tr:hover td { background: rgba(13,143,134,0.05) !important; }
[data-theme="light"] .ws-dt tbody tr.row-hl td { background: rgba(13,143,134,0.07) !important; }
[data-theme="light"] .ws-dt tbody tr.row-hl { box-shadow: inset 3px 0 0 rgba(13,143,134,0.85) !important; }
[data-theme="light"] .ws-nm-c { color: #0f172a !important; }
[data-theme="light"] .ws-dt .sc { color: #0d8f86 !important; font-weight: 700 !important; }

/* ── .ws-card-accent / .ws-ca-teal / .ws-ca-navy (V1 L10368-10370, L4092) ── */
.ws-card-accent { width: 3px; height: 14px; border-radius: 2px; flex-shrink: 0; }
.ws-ca-teal { background: var(--teal); }
.ws-ca-navy { background: rgba(96,165,250,0.5); }
[data-theme="light"] .ws-card-accent { opacity: 1; }

/* ── .ws-score-track / .ws-score-fill / .ws-score-row (V1 L10380-10385, L4829-4831) ── */
.ws-score-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--border-lt); }
.ws-score-row:last-child { border-bottom: none; }
.ws-score-label { width: 120px; flex-shrink: 0; font-size: 10px; color: var(--text-2); font-weight: 500; }
.ws-score-track { flex: 1; height: 5px; background: var(--border-lt); border-radius: 3px; overflow: hidden; }
.ws-score-fill { height: 100%; border-radius: 3px; transition: width .5s; }
.ws-score-val { width: 32px; text-align: right; font-family: var(--mono); font-size: 10px; color: var(--text-2); font-weight: 700; }
[data-theme="light"] .ws-score-track { background: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .ws-score-val { color: #0f172a !important; }

/* ── .ws-sbar / track / fill / num (V1 L10557-10560, L4911-4915) ── */
.ws-sbar { display: flex; align-items: center; gap: 4px; }
.ws-sbar-track { height: 5px; background: var(--glass-ground); border-radius: 3px; overflow: hidden; min-width: 32px; max-width: 56px; width: 100%; }
.ws-sbar-fill { height: 100%; border-radius: 3px; }
.ws-sbar-num { font-size: 11px; font-weight: 700; color: #e2e8f0; font-family: var(--mono); }
[data-theme="light"] .ws-sbar-num { color: #0f172a !important; }
[data-theme="light"] .ws-sbar-track { background: rgba(0,0,0,0.06) !important; }

/* ── .ws-badge + .ws-bg-* tier badges (V1 L10563-10581, L4919-4953, L5139-5189) ── */
.ws-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  font-family: var(--mono);
  letter-spacing: .03em;
  white-space: nowrap;
}
.ws-bg-gold { background: rgba(245,158,11,0.14); color: #fbbf24; border: 1px solid rgba(245,158,11,0.28); }
.ws-bg-silver { background: var(--glass-ground); color: #94a3b8; border: 1px solid var(--glass-border); }
.ws-bg-teal { background: rgba(61,187,176,0.12); color: #58efe0; border: 1px solid rgba(61,187,176,0.28); }
.ws-bg-green { background: rgba(16,185,129,0.12); color: #34d399; border: 1px solid rgba(16,185,129,0.28); }
.ws-bg-rose { background: rgba(244,63,94,0.12); color: #fb7185; border: 1px solid rgba(244,63,94,0.28); }
.ws-bg-navy { background: rgba(96,165,250,0.10); color: #93c5fd; border: 1px solid rgba(96,165,250,0.22); }
.ws-bg-gap { background: rgba(234,179,8,0.14); color: #fde047; border: 1px solid rgba(234,179,8,0.28); }

/* Light mode liquid-glass tier badges (V1 L5139-5189) */
[data-theme="light"] .ws-badge { color: #334155 !important; font-weight: 700 !important; }
[data-theme="light"] .ws-bg-gold {
  background: rgba(255,251,235,0.9) !important;
  color: #78350f !important;
  border: 1px solid rgba(217,119,6,0.2) !important;
  box-shadow: 0 1px 3px rgba(217,119,6,0.06) !important;
}
[data-theme="light"] .ws-bg-silver {
  background: rgba(248,250,252,0.9) !important;
  color: #475569 !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}
[data-theme="light"] .ws-bg-gap {
  background: rgba(254,252,232,0.9) !important;
  color: #713f12 !important;
  border: 1px solid rgba(202,138,4,0.2) !important;
  box-shadow: 0 1px 3px rgba(202,138,4,0.06) !important;
}
[data-theme="light"] .ws-bg-teal {
  background: rgba(240,253,250,0.9) !important;
  color: #115e59 !important;
  border: 1px solid rgba(13,148,136,0.2) !important;
  box-shadow: 0 1px 3px rgba(13,148,136,0.06) !important;
}
[data-theme="light"] .ws-bg-green {
  background: rgba(240,253,244,0.9) !important;
  color: #14532d !important;
  border: 1px solid rgba(22,163,74,0.2) !important;
}
[data-theme="light"] .ws-bg-rose {
  background: rgba(255,241,242,0.9) !important;
  color: #881337 !important;
  border: 1px solid rgba(225,29,72,0.2) !important;
}
[data-theme="light"] .ws-bg-navy {
  background: rgba(239,246,255,0.9) !important;
  color: #1e3a5f !important;
  border: 1px solid rgba(37,99,235,0.2) !important;
}

/* ── .ws-cgap clinical-gap badges (V1 L10597-10600, L5192-5208) ── */
.ws-cgap { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 8.5px; font-weight: 700; font-family: var(--mono); white-space: nowrap; }
.ws-cgap-none { background: rgba(22,163,74,0.12); color: #4ade80; border: 1px solid rgba(22,163,74,.25); }
.ws-cgap-early { background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,.25); }
.ws-cgap-active { background: rgba(255,255,255,0.08); color: #94a3b8; border: 1px solid rgba(255,255,255,.12); }
[data-theme="light"] .ws-cgap { font-weight: 700 !important; }
[data-theme="light"] .ws-cgap-none {
  background: rgba(240,253,244,0.9) !important;
  color: #14532d !important;
  border: 1px solid rgba(22,163,74,0.2) !important;
}
[data-theme="light"] .ws-cgap-early {
  background: rgba(255,251,235,0.9) !important;
  color: #78350f !important;
  border: 1px solid rgba(217,119,6,0.2) !important;
}
[data-theme="light"] .ws-cgap-active {
  background: rgba(248,250,252,0.9) !important;
  color: #475569 !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
}

/* ── .ws-table-cta / banner (V1 L10277-10319) ── */
.ws-table-cta { position: relative; }
.ws-table-cta-banner {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(30,58,95,.95), rgba(15,39,68,.92));
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  border-bottom: 2px solid rgba(61,187,176,.4);
  animation: _ctaSlideIn .5s ease both;
  transition: opacity .3s ease;
  pointer-events: none;
}
.ws-table-cta-banner svg { flex-shrink: 0; opacity: .7; }
.ws-table-cta-banner .cta-kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.12);
  font-size: 10px;
  font-weight: 500;
  margin-left: 4px;
}
@keyframes _ctaSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── .ws-filter-toggle pill (V1 L10126-10181) ── */
.ws-filter-toggle.diq-mode-tab,
.ws-filter-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 1px 7px !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.06) !important;
  font-family: var(--mono) !important;
  font-size: 7.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  color: rgba(255,255,255,0.6) !important;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
  user-select: none;
  align-self: center !important;
}
.ws-filter-toggle:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);
}
.ws-filter-toggle.on,
.ws-filter-toggle.active {
  background: linear-gradient(180deg, rgba(0,229,191,0.18), rgba(13,143,134,0.10)) !important;
  border-color: rgba(13,143,134,0.32) !important;
  color: #58efe0 !important;
  font-weight: 700;
  box-shadow: none;
}
[data-theme="light"] .ws-filter-toggle {
  border-color: rgba(15,23,42,0.10) !important;
  background: rgba(255,255,255,0.55) !important;
  color: #475569 !important;
}
[data-theme="light"] .ws-filter-toggle:hover {
  background: rgba(255,255,255,0.70) !important;
  border-color: rgba(15,23,42,0.16) !important;
  color: #0f172a !important;
}
[data-theme="light"] .ws-filter-toggle.on,
[data-theme="light"] .ws-filter-toggle.active {
  background: linear-gradient(180deg, rgba(0,229,191,0.14), rgba(13,143,134,0.06)) !important;
  border-color: rgba(13,143,134,0.34) !important;
  color: #0d8f86 !important;
}

/* ── .diq-mode-tab base + states (V1 L11620-11638, L4394-4414, L4516-4536) ── */
.diq-mode-tab {
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,.45);
  padding: 3px 10px;
  border-radius: var(--r-full, 999px);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s var(--ease-out, ease);
  white-space: nowrap;
}
.diq-mode-tab.active,
.diq-mode-tab.on {
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}
.diq-mode-tab:hover:not(.active):not(.on) { color: rgba(255,255,255,.7); }
[data-theme="dark"] .diq-mode-tab {
  color: rgba(255,255,255,0.45) !important;
  background: transparent !important;
}
[data-theme="dark"] .diq-mode-tab.active,
[data-theme="dark"] .diq-mode-tab.on:not(.ws-filter-toggle) {
  color: #fff !important;
  background: var(--glass-ground) !important;
  font-weight: 700 !important;
}
[data-theme="dark"] .diq-mode-tab.ws-filter-toggle.on,
[data-theme="dark"] .diq-mode-tab.ws-filter-toggle.active {
  background: linear-gradient(180deg, rgba(0,229,191,0.18), rgba(13,143,134,0.10)) !important;
  border-color: rgba(13,143,134,0.32) !important;
  color: #58efe0 !important;
  font-weight: 700 !important;
}
[data-theme="dark"] .diq-mode-tab:hover:not(.active):not(.on) {
  color: rgba(255,255,255,0.7) !important;
  background: var(--glass-ground) !important;
}
[data-theme="light"] .diq-mode-tab {
  color: #64748b !important;
  background: transparent !important;
}
[data-theme="light"] .diq-mode-tab.active,
[data-theme="light"] .diq-mode-tab.on:not(.ws-filter-toggle) {
  color: #0f172a !important;
  background: rgba(0,0,0,0.06) !important;
  font-weight: 700 !important;
}
[data-theme="light"] .diq-mode-tab:hover:not(.active):not(.on) {
  color: #334155 !important;
  background: rgba(0,0,0,0.03) !important;
}
[data-theme="light"] .diq-mode-tab.ws-filter-toggle.on,
[data-theme="light"] .diq-mode-tab.ws-filter-toggle.active {
  background: linear-gradient(180deg, rgba(0,229,191,0.14), rgba(13,143,134,0.06)) !important;
  border-color: rgba(13,143,134,0.34) !important;
  color: #0d8f86 !important;
  font-weight: 700 !important;
}

/* ============================================================
   LIGHT-MODE OVERRIDES — 2026-05-05 audit pass
   The blocks above this section bake `rgba(255,255,255,X)` into
   active-state pills, table-header borders, and CTA banner kbd
   chips. These read invisibly on the light theme's white surface.
   We re-bind them to slate-tinted alphas. Dark mode is unaffected.
   ============================================================ */

/* .comp-org-pill — count badge inside an active pill (L893) */
[data-theme="light"] .comp-org-pill.active .comp-org-pill-count {
  background: rgba(15,23,42,0.18);
}

/* .ws-dt — Whitespace data table headers (L2019, L2023, L2026) */
[data-theme="light"] .ws-dt th {
  color: #475569;
  border-bottom: 1px solid rgba(15,23,42,0.06);
}
[data-theme="light"] .ws-dt th[onclick]:hover { color: #0f172a; }

/* .ws-table-cta-banner kbd chip (L2209) — banner is dark-navy gradient,
   but the chip needs to stay legible when the banner re-renders in light
   contexts (e.g., printable view). */
[data-theme="light"] .ws-table-cta-banner .cta-kbd {
  background: rgba(255,255,255,0.18);
}