/* Forensic Intelligence page ONLY — scope everything under #page-flow-explorer */

#page-flow-explorer {
  --fi-space-xs: 4px;
  --fi-space-sm: 8px;
  --fi-space-md: 12px;
  --fi-space-lg: 16px;
  --fi-space-xl: 20px;
  --fi-space-2xl: 24px;
  --fi-font-display: 1.125rem;
  --fi-font-section: 1rem;
  --fi-font-subsection: 0.9375rem;
  --fi-font-sub: 0.8125rem;
  --fi-font-body: 0.8125rem;
  --fi-font-meta: 0.6875rem;
  --fi-font-caption: 0.625rem;
  --fi-leading-tight: 1.35;
  --fi-leading-body: 1.55;
  --fi-radius-panel: 14px;
  --fi-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fi-dur: 0.15s;
  --fi-dur-slow: 0.18s;
  /* Product shell — one rhythm for cards, headers, and gaps */
  --fi-panel-header-pad: 14px 18px 10px 18px;
  --fi-card-stack-gap: 16px;
  --fi-body-after-header-pad: 9px;
  /* Phase 10 — forensic UI system (single source; utilities alias below) */
  --forensic-radius: var(--fi-radius-panel, 14px);
  --forensic-pad-x: 18px;
  --forensic-pad-y: 14px;
  --forensic-header-min-h: 28px;
  --forensic-title-size: 15px;
  --forensic-title-weight: 600;
  --forensic-title-leading: 1;
  --forensic-subtitle-size: 11px;
  --forensic-subtitle-weight: 400;
  --forensic-subtitle-leading: 1;
  /* Phase 11 — quieter rail / header subtitles */
  --forensic-subtitle-opacity: 0.48;
  --forensic-grid-gap: var(--fi-space-lg, 16px);
  --forensic-empty-max-width: 40rem;
  --forensic-empty-opacity: 0.88;
  --forensic-table-scroll-margin-top: var(--fi-space-sm, 8px);
}

/* Phase 10 — utility classes (use + map to existing markup; no per-panel one-offs) */
#page-flow-explorer .forensic-panel.panel.flow-explorer-subpanel,
#page-flow-explorer .panel.flow-explorer-subpanel.forensic-panel {
  border-radius: var(--forensic-radius);
  box-sizing: border-box;
  min-width: 0;
}

#page-flow-explorer .forensic-grid-gap,
#page-flow-explorer .fintel-two-col.fi-cluster-primary,
#page-flow-explorer .fi-cluster-primary:not(.fintel-two-col) {
  gap: var(--forensic-grid-gap);
}

#page-flow-explorer .forensic-section-header,
#page-flow-explorer .panel.flow-explorer-subpanel > .panel-head,
#page-flow-explorer .fi-priority-strip-head.header-row {
  box-sizing: border-box;
  min-height: var(--forensic-header-min-h);
}

#page-flow-explorer .forensic-subtitle,
#page-flow-explorer .panel.flow-explorer-subpanel .panel-head .fi-panel-sub--quiet,
#page-flow-explorer .panel.flow-explorer-subpanel .panel-head .fi-panel-sub-inline.fi-panel-sub--quiet {
  font-size: var(--forensic-subtitle-size);
  font-weight: var(--forensic-subtitle-weight);
  line-height: var(--forensic-subtitle-leading);
  opacity: var(--forensic-subtitle-opacity);
}

#page-flow-explorer .forensic-table,
#page-flow-explorer .fi-forensic-table-scroll > table,
#page-flow-explorer .flow-explorer-subpanel table.fi-exposure-table {
  font-size: var(--fi-table-size);
  line-height: var(--fi-line-tight);
  border-collapse: collapse;
  width: 100%;
}

#page-flow-explorer .forensic-empty-state,
#page-flow-explorer .forensic-empty-state td,
#page-flow-explorer td.forensic-empty-state,
#page-flow-explorer .fi-panel-empty-msg,
#page-flow-explorer td.fi-panel-empty-msg {
  margin: 0 auto;
  padding: var(--fi-space-md) var(--forensic-pad-x);
  max-width: var(--forensic-empty-max-width);
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  opacity: var(--forensic-empty-opacity, 0.88);
  box-sizing: border-box;
  vertical-align: middle;
}

#page-flow-explorer .forensic-empty-state--hint,
#page-flow-explorer .fi-panel-empty-msg + .fi-panel-empty-hint,
#page-flow-explorer .fi-empty-state-hint {
  opacity: 0.85;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-faint);
}

#page-flow-explorer td.forensic-empty-state .forensic-empty-state--hint {
  display: block;
  margin-top: var(--fi-space-sm, 8px);
  text-align: center;
}

#page-flow-explorer .fintel-primary-stack {
  gap: var(--fi-card-stack-gap, var(--fi-space-lg));
  min-width: 0;
}

#page-flow-explorer .fintel-primary-stack > .flow-explorer-subpanel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  align-self: stretch;
}

#page-flow-explorer .fintel-primary-stack > .fintel-two-col {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
}

#page-flow-explorer .fintel-layout {
  min-width: 0;
}

#page-flow-explorer .fi-panel-primary.flow-explorer-subpanel {
  border-color: rgba(20, 184, 166, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 10px 36px rgba(0, 0, 0, 0.42);
}

#page-flow-explorer .fi-panel-primary .panel-head .panel-title {
  font-size: var(--fi-section-title-size, 15px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--fi-leading-tight);
}

#page-flow-explorer .fi-cluster-primary {
  gap: var(--forensic-grid-gap, var(--fi-space-lg));
}

#page-flow-explorer .fi-panel-secondary.flow-explorer-subpanel {
  opacity: 0.97;
  border-color: rgba(100, 116, 139, 0.22);
}

#page-flow-explorer .fi-panel-secondary .panel-head .panel-title {
  font-size: var(--fi-section-title-size, 15px);
  font-weight: 600;
  line-height: var(--fi-leading-tight);
}

#page-flow-explorer .fi-cluster-secondary {
  gap: var(--fi-space-md, 12px);
}

/* Subject detail — entity intelligence panel (aligned with Trace summary / glass panels) */
#page-flow-explorer .fi-panel-subject-detail.flow-explorer-subpanel {
  border-radius: 14px;
  border-color: rgba(100, 116, 139, 0.28);
  background: linear-gradient(
    165deg,
    rgba(8, 28, 28, 0.88),
    rgba(6, 18, 18, 0.92)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 8px 28px rgba(0, 0, 0, 0.32);
}

#page-flow-explorer #fintel-panel-entity-intelligence .panel-head .fi-panel-sub {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
}

#page-flow-explorer #fintel-panel-entity-intelligence .fi-subject-detail-body {
  padding-top: 2px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

#page-flow-explorer #fintel-panel-entity-intelligence .fi-subject-detail-body > .kv {
  display: grid;
  grid-template-columns: minmax(112px, 38%) minmax(0, 1fr);
  gap: 8px 14px;
  align-items: start;
  padding: 10px 0;
  margin: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  font-size: 12px;
}

/* Last KV row sits before risk block + footnote */
#page-flow-explorer
  #fintel-panel-entity-intelligence
  .fi-subject-detail-body
  > .kv:nth-last-child(3) {
  border-bottom: none;
  padding-bottom: 4px;
}

#page-flow-explorer #fintel-panel-entity-intelligence .fi-subject-detail-body .kv .k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  line-height: 1.4;
}

#page-flow-explorer #fintel-panel-entity-intelligence .fi-subject-detail-body .kv .v {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  text-align: right;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.45;
}

#page-flow-explorer #fintel-panel-entity-intelligence .fi-subject-detail-body .kv .v.mono {
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

#page-flow-explorer #fintel-panel-entity-intelligence .fi-subject-detail-risk-wrap {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  min-width: 0;
}

#page-flow-explorer #fintel-panel-entity-intelligence .fi-subject-detail-risk-heading {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}

#page-flow-explorer #fintel-panel-entity-intelligence .fi-subject-detail-risk-list {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text);
  min-width: 0;
}

#page-flow-explorer #fintel-panel-entity-intelligence .fi-ei-risk-item {
  margin-bottom: 8px;
  padding: 8px 10px 8px 12px;
  border-radius: 0 10px 10px 0;
  border-left: 3px solid rgba(20, 184, 166, 0.45);
  background: rgba(255, 255, 255, 0.03);
}

#page-flow-explorer #fintel-panel-entity-intelligence .fi-ei-risk-item:last-child {
  margin-bottom: 0;
}

#page-flow-explorer #fintel-panel-entity-intelligence .fi-ei-risk-item-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
}

#page-flow-explorer #fintel-panel-entity-intelligence .fi-ei-risk-code {
  font-size: 11px;
  font-weight: 600;
  color: #5eead4;
}

#page-flow-explorer #fintel-panel-entity-intelligence .fi-ei-risk-sev {
  font-size: 10px;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.85);
}

#page-flow-explorer #fintel-panel-entity-intelligence .fi-ei-risk-detail {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.92);
  word-break: break-word;
}

#page-flow-explorer #fintel-panel-entity-intelligence .fi-subject-detail-footnote {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 11px;
  line-height: 1.5;
  opacity: 0.82;
  color: var(--text-dim);
}

#page-flow-explorer .fi-contract-bridge-shell {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(20, 184, 166, 0.18);
  background: linear-gradient(180deg, rgba(7, 22, 23, 0.9), rgba(4, 15, 16, 0.92));
}

#page-flow-explorer .fi-contract-bridge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

#page-flow-explorer .fi-contract-bridge-head span:first-child,
#page-flow-explorer .fi-contract-ai-k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

#page-flow-explorer .fi-contract-bridge-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.14);
  color: #5eead4;
  font-size: 10px;
  font-weight: 600;
}

#page-flow-explorer .fi-contract-bridge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#page-flow-explorer .fi-contract-bridge-card {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.025);
}

#page-flow-explorer .fi-contract-bridge-card--wide {
  grid-column: 1 / -1;
}

#page-flow-explorer .fi-contract-bridge-k {
  display: block;
  margin-bottom: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

#page-flow-explorer .fi-contract-bridge-v,
#page-flow-explorer .fi-contract-ai-v {
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
}

#page-flow-explorer .fi-contract-ai-bridge {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.12);
}

#page-flow-explorer .fi-contract-ai-v {
  margin-top: 6px;
  color: var(--text-dim);
}

#page-flow-explorer .fi-contract-flow-bridge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

#page-flow-explorer .fi-contract-flow-node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(56, 189, 248, 0.12);
  background: rgba(7, 17, 20, 0.82);
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

#page-flow-explorer .fi-contract-flow-node.is-active {
  border-color: rgba(20, 184, 166, 0.24);
  background: rgba(20, 184, 166, 0.12);
  color: #fff;
  box-shadow: 0 0 16px rgba(20, 184, 166, 0.08);
}

#page-flow-explorer .fi-contract-flow-arrow {
  color: var(--text-faint);
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 12px;
}

#page-flow-explorer .fi-contract-flow-caption {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}

#page-flow-explorer .fi-contract-flow-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

#page-flow-explorer .fi-contract-flow-actions .btn {
  justify-content: center;
}

#page-flow-explorer .fi-contract-workflow-status {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 560px) {
  #page-flow-explorer #fintel-panel-entity-intelligence .fi-subject-detail-body > .kv {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0;
  }

  #page-flow-explorer #fintel-panel-entity-intelligence .fi-subject-detail-body .kv .v {
    text-align: left;
  }

  #page-flow-explorer .fi-contract-bridge-grid {
    grid-template-columns: 1fr;
  }

  #page-flow-explorer .fi-contract-flow-actions {
    flex-direction: column;
  }
}

#page-flow-explorer .fi-path-feature.fi-panel-primary {
  border-color: rgba(34, 211, 238, 0.38);
  background: linear-gradient(
    165deg,
    rgba(8, 28, 28, 0.94),
    rgba(6, 18, 18, 0.96)
  );
}

#page-flow-explorer .fi-path-grid-star {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 12px;
}

#page-flow-explorer .fi-path-card-star {
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(94, 234, 212, 0.28);
  background: rgba(8, 28, 28, 0.92);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
}

#page-flow-explorer .fi-path-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  min-width: 0;
  flex-shrink: 0;
}

#page-flow-explorer .fi-path-route-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a5f3fc;
  min-width: 0;
}

#page-flow-explorer .fi-path-partial-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: #fde68a;
  flex-shrink: 0;
}

#page-flow-explorer .fi-path-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 10px;
  margin: 10px 0 0;
  min-height: 3.1rem;
  align-content: start;
}

#page-flow-explorer .fi-path-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#page-flow-explorer .fi-path-sk {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

#page-flow-explorer .fi-path-sv {
  font-size: 11px;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  color: var(--text);
  word-break: break-word;
}

@media (max-width: 520px) {
  #page-flow-explorer .fi-path-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#page-flow-explorer .fi-path-why {
  margin: 10px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-path-why strong {
  color: #5eead4;
}

#page-flow-explorer .fi-exposure-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

#page-flow-explorer .fi-exposure-table .fi-exp-meter-cell {
  width: 28%;
  min-width: 120px;
}

#page-flow-explorer .fi-meter-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

#page-flow-explorer .fi-meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.25s ease;
}

#page-flow-explorer .fi-meter-low {
  background: linear-gradient(90deg, #34d399, #22c55e);
}

#page-flow-explorer .fi-meter-med {
  background: linear-gradient(90deg, #fbbf24, #f97316);
}

#page-flow-explorer .fi-meter-high {
  background: linear-gradient(90deg, #f87171, #dc2626);
}

#page-flow-explorer .fi-exp-label {
  font-weight: 600;
  color: var(--text);
}

#page-flow-explorer .fi-exp-risk {
  font-size: 11px;
  font-weight: 600;
}

#page-flow-explorer .fi-live-intelligence-rail .fi-rail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px 12px;
  margin-top: 8px;
}

#page-flow-explorer .fi-rail-span2 {
  grid-column: span 2;
}

@media (max-width: 720px) {
  #page-flow-explorer .fi-rail-span2 {
    grid-column: span 1;
  }
}

#page-flow-explorer .fi-rail-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(148, 163, 184, 0.14);
  min-width: 0;
}

#page-flow-explorer .fi-rail-block {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(148, 163, 184, 0.14);
  min-width: 0;
}

#page-flow-explorer .fi-rail-k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

#page-flow-explorer .fi-rail-v {
  font-size: 12px;
  color: var(--text);
  word-break: break-word;
}

#page-flow-explorer .fi-rail-alerts-body {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
}

#page-flow-explorer .fi-rail-mini-list {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
}

#page-flow-explorer .fi-watchlist-feed {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#page-flow-explorer .fi-watch-feed-item {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(20, 184, 166, 0.22);
  background: rgba(8, 28, 28, 0.72);
}

#page-flow-explorer .fi-watch-feed-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

#page-flow-explorer .fi-watch-ts {
  font-size: 10px;
  color: var(--text-faint);
}

#page-flow-explorer .fi-watch-reason {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.45;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-watch-ref {
  margin-top: 6px;
  font-size: 11px;
  color: #5eead4;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-watch-feed-empty {
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
}

#page-flow-explorer .fi-watch-summary {
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-dim);
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.18);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-monitoring-summary {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(20, 184, 166, 0.18);
  background: rgba(8, 28, 28, 0.46);
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-dim);
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-monitoring-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

#page-flow-explorer .fi-monitoring-actions .btn {
  font-size: 11px;
  padding: 7px 12px;
}

#page-flow-explorer .fi-monitoring-events {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
}

#page-flow-explorer .fi-watch-feed-item--event {
  border-color: rgba(94, 234, 212, 0.22);
  background: linear-gradient(165deg, rgba(8, 28, 28, 0.78), rgba(6, 18, 18, 0.84));
}

#page-flow-explorer .fi-watch-entries-mount {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

#page-flow-explorer .fi-watch-entry-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(20, 184, 166, 0.2);
  background: rgba(8, 28, 28, 0.55);
  font-size: 11px;
  line-height: 1.45;
  min-width: 0;
}

#page-flow-explorer .fi-watch-entry-main {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-watch-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

#page-flow-explorer .fi-watch-entry-actions .btn {
  font-size: 10px;
  padding: 5px 10px;
}

/* Phase 35 — case session meta, analyst workspace, focus mode, tables */
#page-flow-explorer .fi-case-session-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.14);
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-faint);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-case-meta-item {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

#page-flow-explorer .fi-case-meta-k {
  opacity: 0.72;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

#page-flow-explorer .fi-case-meta-v {
  color: var(--text-dim);
  font-weight: 500;
}

/* Phase 36 — entity intelligence (badges + compact meta, forensic scope only) */
#page-flow-explorer .fi-entity-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  max-width: 100%;
  min-width: 0;
}

#page-flow-explorer .fi-entity-confidence-pill {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: var(--text-dim);
  line-height: 1.3;
  flex-shrink: 0;
}

#page-flow-explorer .fi-entity-confidence-pill--obs {
  border-color: rgba(96, 165, 250, 0.35);
  color: #93c5fd;
}

#page-flow-explorer .fi-entity-confidence-pill--hi {
  border-color: rgba(52, 211, 153, 0.35);
  color: #6ee7b7;
}

#page-flow-explorer .fi-entity-confidence-pill--unk {
  opacity: 0.85;
}

#page-flow-explorer .fi-entity-confidence-pill--heur {
  border-style: dashed;
  opacity: 0.9;
}

#page-flow-explorer .fi-path-chip .fi-entity-meta,
#page-flow-explorer .fi-ent-cell .fi-entity-meta {
  display: inline;
  margin-left: 6px;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 10px;
  color: var(--text-dim);
  opacity: 0.92;
}

#page-flow-explorer .fi-analyst-field-k {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  margin-top: 10px;
}

#page-flow-explorer[data-fi-analyst-focus="1"]
  .flow-explorer-subpanel.forensic-panel:not(.fi-panel-focus-active) {
  opacity: 0.52;
  transition: opacity 0.18s ease;
}

#page-flow-explorer[data-fi-analyst-focus="1"]
  .flow-explorer-subpanel.forensic-panel.fi-panel-focus-active {
  opacity: 1;
  outline: 1px solid rgba(20, 184, 166, 0.32);
  outline-offset: 0;
}

#page-flow-explorer .forensic-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(8, 28, 28, 0.98);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

#page-flow-explorer .forensic-table tbody td {
  padding-top: 9px;
  padding-bottom: 9px;
  vertical-align: top;
  max-width: 28vw;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 720px) {
  #page-flow-explorer .forensic-table tbody td {
    max-width: none;
  }
}

#page-flow-explorer .fi-sev-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#page-flow-explorer .fi-sev-info {
  border: 1px solid rgba(56, 189, 248, 0.45);
  color: #bae6fd;
}

#page-flow-explorer .fi-sev-watch {
  border: 1px solid rgba(20, 184, 166, 0.55);
  color: #5eead4;
}

#page-flow-explorer .fi-sev-elevated {
  border: 1px solid rgba(251, 191, 36, 0.55);
  color: #fde68a;
}

#page-flow-explorer .fi-sev-critical {
  border: 1px solid rgba(248, 113, 113, 0.55);
  color: #fecaca;
}

#page-flow-explorer .fi-watch-rule-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#page-flow-explorer .fi-watch-rule-chk {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
  min-width: 160px;
}

#page-flow-explorer .fi-sev-select {
  padding: 6px 8px;
  font-size: 11px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(8, 28, 28, 0.85);
  color: var(--text);
}

#page-flow-explorer .fi-graph-secondary-panel .fe-graph-inner #flowCanvasWrap {
  min-height: clamp(320px, 42vh, 560px) !important;
  height: clamp(320px, 42vh, 560px) !important;
}

#page-flow-explorer .fi-graph-secondary-panel .fe-graph-inner .fe-graph-viewport {
  min-height: clamp(320px, 42vh, 560px);
}

#page-flow-explorer .flow-explorer-subpanel .mono {
  font-family: ui-monospace, "JetBrains Mono", monospace;
}

#page-flow-explorer .fi-glass-card {
  border-radius: 14px;
  border: 1px solid rgba(20, 184, 166, 0.32);
  background: linear-gradient(
    165deg,
    rgba(8, 28, 28, 0.92),
    rgba(6, 18, 18, 0.94)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  padding: 11px 14px 12px;
  box-sizing: border-box;
}

#page-flow-explorer .fi-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 10px;
}

#page-flow-explorer .fi-kpi {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(20, 184, 166, 0.12);
  min-height: 62px;
  box-sizing: border-box;
}

#page-flow-explorer .fi-kpi-k {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.62);
}

#page-flow-explorer .fi-kpi-v {
  font-size: 12px;
  font-weight: 600;
  color: #e8edf4;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  line-height: 1.35;
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}

#page-flow-explorer .fi-risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgba(20, 184, 166, 0.55);
  color: #ccfbf1;
  text-shadow: 0 0 14px rgba(20, 184, 166, 0.45),
    0 0 26px rgba(34, 211, 238, 0.15);
  background: radial-gradient(
      ellipse 120% 100% at 30% 0%,
      rgba(20, 184, 166, 0.35),
      rgba(34, 211, 238, 0.08),
      transparent 70%
    ),
    rgba(8, 28, 28, 0.85);
}

#page-flow-explorer .fi-risk-badge.fi-risk-critical {
  border-color: rgba(248, 113, 113, 0.65);
  color: #fecaca;
}

#page-flow-explorer .fi-path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 12px;
}

#page-flow-explorer .fi-path-card {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(20, 184, 166, 0.25);
  background: rgba(8, 28, 28, 0.82);
  font-size: 11px;
  line-height: 1.5;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
}

#page-flow-explorer .fi-path-line {
  color: #5eead4;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-path-meta {
  color: var(--text-dim);
  font-size: 10px;
  min-width: 0;
}

#page-flow-explorer .flow-explorer-subpanel table {
  font-size: 11px;
}

#page-flow-explorer .flow-explorer-subpanel table th {
  padding: 8px 10px;
  white-space: nowrap;
}

#page-flow-explorer .flow-explorer-subpanel table td {
  padding: 8px 10px;
  vertical-align: top;
}

#page-flow-explorer .fi-timeline-burst td {
  background: rgba(20, 184, 166, 0.1);
  color: #5eead4;
  font-weight: 600;
  font-size: 11px;
  padding: 6px 10px;
}

#page-flow-explorer .fi-timeline-day td {
  background: rgba(34, 211, 238, 0.06);
  color: #a5f3fc;
  font-weight: 600;
  font-size: 11px;
  padding: 8px 10px;
}

#page-flow-explorer .fi-muted-banner {
  font-size: 11px;
  color: var(--text-dim);
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  margin-bottom: 8px;
  border: 1px dashed rgba(94, 234, 212, 0.35);
}

#page-flow-explorer .fi-flow-map-empty-msg {
  background: rgba(8, 28, 28, 0.72);
  border-color: rgba(94, 234, 212, 0.28);
}

#page-flow-explorer .fi-two-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 900px) {
  #page-flow-explorer .fi-two-mini {
    grid-template-columns: 1fr;
  }

  #page-flow-explorer .fi-cm-two {
    grid-template-columns: 1fr;
  }
}

#page-flow-explorer .fi-ai-summary {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
}

#page-flow-explorer .fi-ai-summary li {
  margin-bottom: 6px;
}

/* —— Interactive workspace (trace / copy / explorer) —— */
#page-flow-explorer .fi-interactive-cell {
  vertical-align: middle;
}

#page-flow-explorer .fi-cell-actions {
  display: inline-flex;
  gap: 3px;
  margin-right: 6px;
  opacity: 0;
  transition: opacity 0.16s ease;
  vertical-align: middle;
}

#page-flow-explorer .fi-interactive-cell:hover .fi-cell-actions,
#page-flow-explorer .fi-interactive-cell:focus-within .fi-cell-actions {
  opacity: 1;
}

#page-flow-explorer .fi-act-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(20, 184, 166, 0.34);
  color: #5eead4;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.2;
  padding: 3px 6px;
  cursor: pointer;
}

#page-flow-explorer .fi-act-btn:hover {
  border-color: rgba(20, 184, 166, 0.34);
  color: #fff;
}

#page-flow-explorer .fi-act-btn:focus-visible {
  outline: 2px solid rgba(20, 184, 166, 0.34);
  outline-offset: 2px;
}

#page-flow-explorer .fi-drill-label {
  cursor: pointer;
  text-decoration: underline dotted rgba(20, 184, 166, 0.34);
  text-underline-offset: 3px;
}

#page-flow-explorer .fi-timeline-row {
  cursor: pointer;
  transition: background 0.14s ease;
}

#page-flow-explorer .fi-timeline-row:hover {
  background: rgba(20, 184, 166, 0.08);
}

#page-flow-explorer .fi-tl-highlight {
  outline: 1px solid rgba(20, 184, 166, 0.34);
  outline-offset: -1px;
}

#page-flow-explorer .fi-tl-arrow-cell .fi-tl-dir-icon {
  display: inline-block;
  margin-right: 6px;
  color: #94a3b8;
  font-size: 11px;
}

#page-flow-explorer .fi-tl-out .fi-tl-dir-icon {
  color: #a5f3fc;
}

#page-flow-explorer .fi-tl-in .fi-tl-dir-icon {
  color: #5eead4;
}

#page-flow-explorer .fi-bc-part {
  background: none;
  border: none;
  color: #cbd5f5;
  font: inherit;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  cursor: pointer;
  padding: 0 3px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#page-flow-explorer .fi-bc-part:hover {
  color: #f1f5f9;
}

#page-flow-explorer .fi-bc-arrow {
  font-size: 10px;
  color: #64748b;
  margin: 0 3px;
}

#page-flow-explorer .fi-bc-empty {
  color: #64748b;
  font-style: italic;
  font-size: 11px;
}

#page-flow-explorer #flow-trace-forward:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

/* Panel collapse (localStorage-backed toggles injected by JS) */
#page-flow-explorer .fi-panel-collapsed > :not(.panel-head):not(.fi-priority-strip-head) {
  max-height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border: none !important;
  pointer-events: none !important;
}

#page-flow-explorer .fi-priority-strip > .fi-priority-strip-scroll {
  transition: max-height var(--fi-dur-slow) var(--fi-ease),
    opacity var(--fi-dur-slow) var(--fi-ease),
    margin var(--fi-dur-slow) var(--fi-ease),
    padding var(--fi-dur-slow) var(--fi-ease);
  max-height: 4000px;
  opacity: 1;
}

#page-flow-explorer .fi-priority-strip.fi-panel-collapsed > .fi-priority-strip-head {
  margin-bottom: 0;
}

#page-flow-explorer .fi-priority-strip.fi-panel-collapsed > .fi-priority-strip-scroll {
  transition: max-height var(--fi-dur-slow) var(--fi-ease),
    opacity var(--fi-dur) var(--fi-ease),
    margin var(--fi-dur) var(--fi-ease),
    padding var(--fi-dur) var(--fi-ease);
}

#page-flow-explorer .fi-priority-strip-head .fi-collapse-toggle {
  flex-shrink: 0;
  margin-right: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

#page-flow-explorer .fi-priority-strip-head .fi-collapse-toggle:hover {
  border-color: rgba(20, 184, 166, 0.45);
  color: #f8fafc;
}

#page-flow-explorer .panel.flow-explorer-subpanel > :not(.panel-head) {
  transition: max-height var(--fi-dur-slow) var(--fi-ease),
    opacity var(--fi-dur-slow) var(--fi-ease),
    padding var(--fi-dur-slow) var(--fi-ease);
  max-height: 8000px;
  opacity: 1;
}

#page-flow-explorer .panel.flow-explorer-subpanel.fi-panel-collapsed > :not(.panel-head) {
  transition: max-height var(--fi-dur-slow) var(--fi-ease),
    opacity var(--fi-dur) var(--fi-ease),
    padding var(--fi-dur) var(--fi-ease);
}

#page-flow-explorer .panel-head .fi-collapse-toggle {
  flex-shrink: 0;
  margin-right: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition:
    border-color var(--fi-dur) var(--fi-ease),
    background var(--fi-dur) var(--fi-ease),
    color var(--fi-dur) var(--fi-ease);
}

#page-flow-explorer .panel-head .fi-collapse-toggle:hover {
  border-color: rgba(20, 184, 166, 0.45);
  color: #f8fafc;
}

/* Shared subpanel header inset — matches Advanced flex headers; Simple uses same padding */
#page-flow-explorer .panel.flow-explorer-subpanel > .panel-head.header-row {
  padding: var(--fi-panel-header-pad);
  box-sizing: border-box;
}

@media (max-width: 1100px) {
  #page-flow-explorer .fintel-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  #page-flow-explorer .flow-explorer-side-stack.fi-operational-rail {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  #page-flow-explorer .fi-rail-sticky {
    max-width: 100%;
    overflow-x: hidden;
  }

  #page-flow-explorer .fi-rail-tab-panel {
    overflow-x: hidden;
    min-width: 0;
  }

  #page-flow-explorer .fi-rail-tabs-scroll {
    max-width: 100%;
    mask-image: linear-gradient(to right, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  }
}

/* panel-head row layout — unified in final FI section-header block */

#page-flow-explorer .fi-fetch-shimmer {
  position: relative;
}

#page-flow-explorer .fi-fetch-shimmer::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 14px;
  z-index: 3;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(20, 184, 166, 0.08) 50%,
    transparent 62%
  );
  background-size: 240% 100%;
  animation: fiWorkspaceShimmer 1.05s ease-in-out infinite;
}

@keyframes fiWorkspaceShimmer {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}

#page-flow-explorer .fi-path-card[data-fi-path-neighbor]:hover {
  border-color: rgba(20, 184, 166, 0.34);
  cursor: pointer;
}

#page-flow-explorer .fi-path-card[data-fi-path-neighbor]:focus-visible {
  outline: 2px solid rgba(20, 184, 166, 0.34);
  outline-offset: 2px;
}

#page-flow-explorer .fi-tel-muted {
  font-size: 10px;
  opacity: 0.85;
}

#page-flow-explorer .flow-graph-skeleton-core {
  animation: fiSkeletonPulse 1.15s ease-in-out infinite;
}

@keyframes fiSkeletonPulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

/* Cross-chain adapter panel */
#page-flow-explorer .fi-xchain-table td {
  font-size: 11px;
  line-height: 1.45;
  vertical-align: top;
}

#page-flow-explorer .fi-xchain-id {
  font-size: 10px;
  color: var(--text-faint);
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-xchain-signals {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#page-flow-explorer .fi-xchain-signals--standalone {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

#page-flow-explorer .fi-xchain-signals-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5eead4;
  margin-bottom: 8px;
}

#page-flow-explorer .fi-xchain-signal-list {
  margin: 0;
  padding-left: 18px;
  font-size: 11px;
  line-height: 1.55;
  color: var(--text);
}

#page-flow-explorer .fi-xchain-signal-list li {
  margin-bottom: 8px;
}

#page-flow-explorer .fi-xchain-signal-list .mono {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-xchain-muted {
  color: var(--text-dim);
}

#page-flow-explorer .fi-xchain-continuation-append {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#page-flow-explorer .fi-xchain-cont-head {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 6px;
  color: rgba(94, 234, 212, 0.95);
}

#page-flow-explorer .fi-xchain-cont-line {
  font-size: 11px;
  line-height: 1.45;
  margin: 0 0 6px;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#page-flow-explorer .fi-xchain-cont-k {
  font-weight: 600;
  color: var(--text-dim);
}

#page-flow-explorer .fi-xchain-cont-muted {
  font-size: 10px;
  color: var(--text-dim);
  margin: 4px 0;
  line-height: 1.4;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#page-flow-explorer .fi-xchain-cont-siglist {
  margin: 6px 0 8px;
  padding-left: 16px;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text);
}

#page-flow-explorer .fi-xchain-cont-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  min-width: 0;
  max-width: 100%;
}

#page-flow-explorer .fi-xchain-cont-chips--readiness {
  margin-top: 4px;
}

#page-flow-explorer .fi-xchain-pill {
  font-size: 9px;
  font-weight: 600;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-path-partial-pill.fi-xchain-pill--active {
  border-color: rgba(45, 212, 191, 0.42);
  color: #a7f3d0;
}

#page-flow-explorer .fi-path-partial-pill.fi-xchain-pill--staged {
  border-color: rgba(251, 191, 36, 0.35);
  color: #fde68a;
}

#page-flow-explorer .fi-path-partial-pill.fi-xchain-pill--planned {
  border-color: rgba(148, 163, 184, 0.35);
  color: #cbd5e1;
}

#page-flow-explorer .fi-xchain-cont-limit {
  margin: 10px 0 0;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-faint);
  word-break: break-word;
  overflow-wrap: anywhere;
}

#page-flow-explorer .fi-xchain-cont-qa {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-xchain-conf-lo,
#page-flow-explorer .fi-xchain-conf-med,
#page-flow-explorer .fi-xchain-conf-hi {
  font-weight: 700;
}

#page-flow-explorer .fi-xchain-conf-lo {
  color: #94a3b8;
}

#page-flow-explorer .fi-xchain-conf-med {
  color: #fcd34d;
}

#page-flow-explorer .fi-xchain-conf-hi {
  color: #fdba74;
}

#page-flow-explorer .fi-orch-center-wrap {
  margin-bottom: 12px;
  min-width: 0;
  max-width: 100%;
  padding: 8px 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
}

#page-flow-explorer .fi-orch-center-line {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text);
  margin: 0 0 6px;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-height: 5.8em;
  overflow: hidden;
}

#page-flow-explorer .fi-orch-center-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
  min-width: 0;
  max-width: 100%;
}

#page-flow-explorer .fi-orch-chip {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;
}

#page-flow-explorer .fi-orch-center-lim {
  font-size: 10px;
  color: var(--text-faint);
  margin: 0;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#page-flow-explorer .fi-registry-clarity-kv {
  min-width: 0;
  max-width: 100%;
}

#page-flow-explorer .fi-registry-clarity-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

#page-flow-explorer .fi-registry-clarity-chips .fi-er-chip--sub {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-flow-explorer .fi-path-partial-pill.fi-er-chip--neutral {
  border-color: rgba(148, 163, 184, 0.32);
  color: #cbd5e1;
}

#page-flow-explorer .fi-registry-priority-hint {
  margin: 10px 0 0;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

#page-flow-explorer .fi-registry-priority-sub {
  font-size: 10px;
  min-width: 0;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#page-flow-explorer .fi-path-route-hint.fi-registry-route-hint {
  color: rgba(125, 211, 252, 0.88);
  font-size: 9px;
}

#page-flow-explorer .fi-xchain-next code {
  font-size: 10px;
}

/* Phase 25 — demo walkthrough (docked card only; no full-screen dim so section outlines stay visible) */
.fi-walkthrough-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4800;
  display: flex;
  justify-content: center;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  pointer-events: none;
}

.fi-walkthrough-card {
  pointer-events: auto;
  width: 100%;
  max-width: min(520px, calc(100vw - 24px));
  max-height: min(46vh, 340px);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 12px 14px 14px;
  border-radius: 14px 14px 0 0;
  border: 1px solid rgba(20, 184, 166, 0.35);
  background: linear-gradient(165deg, rgba(8, 28, 28, 0.97), rgba(6, 18, 18, 0.98));
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45);
}

.fi-walkthrough-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: 0.03em;
}

.fi-walkthrough-prog {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(148, 163, 184, 0.95);
}

.fi-walkthrough-body {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #cbd5e1;
}

.fi-walkthrough-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.fi-walkthrough-actions .btn {
  flex: 1 1 auto;
  min-width: 0;
}

#page-flow-explorer .fi-walkthrough-highlight {
  outline: 2px solid rgba(94, 234, 212, 0.9);
  outline-offset: 3px;
  border-radius: 10px;
}

@media (max-width: 720px) {
  .fi-walkthrough-card {
    max-height: min(52vh, 380px);
    border-radius: 12px 12px 0 0;
  }

  .fi-walkthrough-actions .btn {
    flex: 1 1 calc(50% - 4px);
  }
}

/* Forensic Report Builder modal */
#page-flow-explorer .fi-report-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}

#page-flow-explorer .fi-report-modal[hidden] {
  display: none !important;
}

body.fi-report-modal-open {
  overflow: hidden;
}

#page-flow-explorer .fi-report-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 2, 12, 0.82);
  cursor: pointer;
}

#page-flow-explorer .fi-report-modal-dialog {
  position: relative;
  z-index: 2;
  width: min(1180px, 100vw);
  max-height: 100vh;
  margin: 0 auto;
  background: linear-gradient(165deg, rgba(8, 28, 28, 0.98), rgba(6, 18, 18, 0.99));
  border-left: 1px solid rgba(20, 184, 166, 0.35);
  border-right: 1px solid rgba(20, 184, 166, 0.35);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.65);
}

#page-flow-explorer .fi-report-workspace {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#page-flow-explorer .fi-report-workspace[hidden] {
  display: none !important;
}

#page-flow-explorer .fi-report-review-gate {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 20px 36px;
  min-height: 0;
  overflow-y: auto;
}

#page-flow-explorer .fi-report-review-gate[hidden] {
  display: none !important;
}

#page-flow-explorer .fi-report-review-inner {
  width: min(520px, 100%);
  box-sizing: border-box;
}

#page-flow-explorer .fi-report-review-title {
  margin: 0 0 10px 0;
  font-size: 20px;
  font-weight: 700;
  color: #f5f3ff;
  letter-spacing: -0.02em;
}

#page-flow-explorer .fi-report-review-lead {
  margin: 0 0 18px 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(203, 213, 225, 0.92);
}

#page-flow-explorer .fi-report-review-list {
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#page-flow-explorer .fi-report-review-li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(20, 184, 166, 0.34);
  background: rgba(8, 28, 28, 0.72);
  font-size: 12px;
  line-height: 1.45;
  color: #e2e8f0;
}

#page-flow-explorer .fi-report-review-li--warn {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(60, 40, 10, 0.25);
}

#page-flow-explorer .fi-report-review-ico {
  flex-shrink: 0;
  font-weight: 700;
  color: #86efac;
}

#page-flow-explorer .fi-report-review-li--warn .fi-report-review-ico {
  color: #fcd34d;
}

#page-flow-explorer .fi-report-review-note {
  margin: 0 0 18px 0;
  font-size: 12px;
  color: rgba(148, 163, 184, 0.95);
  line-height: 1.45;
}

#page-flow-explorer .fi-report-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

#page-flow-explorer .fi-report-toolbar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 4, 24, 0.96);
}

#page-flow-explorer .fi-report-title-h {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  flex: 1 1 200px;
  color: #5eead4;
}

#page-flow-explorer .fi-report-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

#page-flow-explorer .fi-report-toast {
  font-size: 11px;
  color: #86efac;
  flex: 1 1 120px;
  min-width: 0;
}

#page-flow-explorer .fi-report-split {
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
}

@media (max-width: 900px) {
  #page-flow-explorer .fi-report-split {
    grid-template-columns: 1fr;
  }
}

#page-flow-explorer .fi-report-form-panel {
  overflow-y: auto;
  padding: 14px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  max-height: calc(100vh - 120px);
}

#page-flow-explorer .fi-report-form-lead {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
  margin: 0 0 12px;
}

#page-flow-explorer .fi-report-field {
  margin-bottom: 10px;
}

#page-flow-explorer .fi-report-field label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-bottom: 4px;
}

#page-flow-explorer .fi-report-input,
#page-flow-explorer .fi-report-textarea {
  width: 100%;
  font-size: 12px !important;
  padding: 8px 10px !important;
}

#page-flow-explorer .fi-report-hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 14px 0;
}

#page-flow-explorer .fi-report-scroll-wrap {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100vh - 120px);
}

#page-flow-explorer .fi-report-scroll {
  overflow-y: auto;
  padding: 16px 20px 32px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}

#page-flow-explorer .fi-report-printable-host {
  overflow-y: auto;
  padding: 16px 20px 32px;
  flex: 1;
  min-height: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}

#page-flow-explorer .fi-report-printable-inner .fi-print-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}

#page-flow-explorer .fi-report-printable-inner .fi-print-lead {
  margin: 0 0 16px;
  color: var(--text-dim);
  font-size: 11px;
}

#page-flow-explorer .fi-report-printable-inner h2 {
  font-size: 13px;
  font-weight: 700;
  margin: 18px 0 8px;
  color: #5eead4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#page-flow-explorer .fi-report-printable-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#page-flow-explorer .fi-print-muted {
  color: var(--text-dim);
  font-style: italic;
}

#page-flow-explorer .fi-print-pre {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0, 0, 0, 0.22);
  padding: 10px;
  border-radius: 8px;
  max-height: 260px;
  overflow: auto;
}

#page-flow-explorer .fi-print-meta th {
  width: 140px;
}

#page-flow-explorer .fi-report-sec {
  margin-bottom: 28px;
  scroll-margin-top: 12px;
}

#page-flow-explorer .fi-report-sec h2 {
  font-size: 14px;
  font-weight: 700;
  color: #5eead4;
  margin: 0 0 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#page-flow-explorer .fi-report-h3 {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  margin: 14px 0 8px;
}

#page-flow-explorer .fi-report-dl {
  margin: 0;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 12px;
  font-size: 12px;
}

#page-flow-explorer .fi-report-dl dt {
  color: var(--text-dim);
  font-weight: 600;
}

#page-flow-explorer .fi-report-dl dd {
  margin: 0;
}

#page-flow-explorer .fi-report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

#page-flow-explorer .fi-report-table th,
#page-flow-explorer .fi-report-table td {
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

#page-flow-explorer .fi-report-table th {
  background: rgba(20, 184, 166, 0.12);
  color: #5eead4;
  font-size: 10px;
  text-transform: uppercase;
}

#page-flow-explorer .fi-report-na {
  color: var(--text-dim);
  font-style: italic;
}

#page-flow-explorer .fi-report-disclaimer {
  font-size: 11px;
  color: #fb923c;
  margin: 0 0 12px;
}

#page-flow-explorer .fi-report-addr-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

#page-flow-explorer .fi-report-act {
  opacity: 1 !important;
}

#page-flow-explorer .fi-report-sec--tight {
  margin-bottom: 18px;
}

#page-flow-explorer .fi-report-sec--intel .fi-report-kvlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}

#page-flow-explorer .fi-report-kvlist li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 6px;
}

#page-flow-explorer .fi-kv-k {
  flex: 0 0 170px;
  color: #94a3b8;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#page-flow-explorer .fi-kv-v {
  flex: 1 1 220px;
  color: #e2e8f0;
  min-width: 0;
}

#page-flow-explorer .fi-report-dl--inline {
  grid-template-columns: 120px 1fr;
  gap: 4px 10px;
}

#page-flow-explorer .fi-report-chip-list li {
  background: rgba(8, 28, 28, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  list-style: none;
}

#page-flow-explorer .fi-report-chip-list {
  padding: 0;
  margin: 0;
}

#page-flow-explorer .fi-report-status-bar {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(94, 234, 212, 0.2);
  background: linear-gradient(
    135deg,
    rgba(8, 28, 28, 0.95),
    rgba(6, 18, 18, 0.88)
  );
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

#page-flow-explorer .fi-report-status--live {
  border-color: rgba(74, 222, 128, 0.45);
}

#page-flow-explorer .fi-report-status--refresh {
  border-color: rgba(250, 204, 21, 0.45);
}

#page-flow-explorer .fi-report-status--reconnect {
  border-color: rgba(251, 146, 60, 0.45);
}

#page-flow-explorer .fi-report-status--delayed {
  border-color: rgba(248, 113, 113, 0.35);
}

#page-flow-explorer .fi-status-pulse {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-top: 4px;
  background: #22d3ee;
  box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.5);
  animation: fi-report-pulse 1.8s ease-out infinite;
}

#page-flow-explorer .fi-report-status--live .fi-status-pulse {
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45);
}

#page-flow-explorer .fi-report-status--cached .fi-status-pulse {
  background: #14b8a6;
  animation-duration: 3s;
}

#page-flow-explorer .fi-report-status--refresh .fi-status-pulse {
  background: #facc15;
}

#page-flow-explorer .fi-report-status--reconnect .fi-status-pulse {
  background: #fb923c;
}

#page-flow-explorer .fi-report-status--delayed .fi-status-pulse {
  background: #f87171;
}

@keyframes fi-report-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.35);
  }
  70% {
    transform: scale(1.12);
    box-shadow: 0 0 0 10px rgba(34, 211, 238, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 211, 238, 0);
  }
}

#page-flow-explorer .fi-status-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px 12px;
  font-size: 11px;
}

#page-flow-explorer .fi-status-span2 {
  grid-column: span 2;
}

@media (max-width: 640px) {
  #page-flow-explorer .fi-status-span2 {
    grid-column: span 1;
  }
}

#page-flow-explorer .fi-status-k {
  display: block;
  font-size: 9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 2px;
}

#page-flow-explorer .fi-status-v {
  color: #e2e8f0;
  font-weight: 600;
  word-break: break-word;
}

#page-flow-explorer .fi-status-muted {
  font-weight: 500;
  opacity: 0.85;
  font-size: 10px;
}

#page-flow-explorer .fi-signal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

#page-flow-explorer .fi-signal-card {
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 28, 28, 0.72);
}

#page-flow-explorer .fi-signal-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
  background: rgba(20, 184, 166, 0.18);
  border: 1px solid rgba(20, 184, 166, 0.35);
  color: #5eead4;
}

#page-flow-explorer .fi-signal--amber .fi-signal-pill {
  background: rgba(251, 191, 36, 0.15);
  border-color: rgba(251, 191, 36, 0.45);
  color: #fde68a;
}

#page-flow-explorer .fi-signal--cyan .fi-signal-pill {
  background: rgba(34, 211, 238, 0.12);
  border-color: rgba(34, 211, 238, 0.45);
  color: #a5f3fc;
}

#page-flow-explorer .fi-signal--rose .fi-signal-pill {
  background: rgba(251, 113, 133, 0.12);
  border-color: rgba(251, 113, 133, 0.4);
  color: #fecdd3;
}

#page-flow-explorer .fi-signal--violet .fi-signal-pill {
  background: rgba(20, 184, 166, 0.18);
  border-color: rgba(20, 184, 166, 0.45);
  color: #5eead4;
}

#page-flow-explorer .fi-signal--orange .fi-signal-pill,
#page-flow-explorer .fi-signal--teal .fi-signal-pill,
#page-flow-explorer .fi-signal--emerald .fi-signal-pill,
#page-flow-explorer .fi-signal--slate .fi-signal-pill,
#page-flow-explorer .fi-signal--zinc .fi-signal-pill {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
}

#page-flow-explorer .fi-signal-detail {
  margin: 0 0 6px;
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1.4;
}

#page-flow-explorer .fi-signal-conf {
  margin: 0;
  font-size: 10px;
  color: #94a3b8;
}

#page-flow-explorer .fi-dest-ranked {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: fi-dest;
}

#page-flow-explorer .fi-dest-ranked > li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 8px;
  margin-bottom: 6px;
  border-radius: 10px;
  border: 1px solid rgba(94, 234, 212, 0.16);
  background: rgba(7, 12, 32, 0.65);
}

#page-flow-explorer .fi-dest-rank {
  flex: 0 0 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  border-radius: 8px;
  background: rgba(34, 211, 238, 0.14);
  color: #67e8f9;
}

#page-flow-explorer .fi-dest-body {
  flex: 1;
  min-width: 0;
}

#page-flow-explorer .fi-dest-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

#page-flow-explorer .fi-dest-label {
  font-weight: 700;
  color: #f8fafc;
  font-size: 12px;
}

#page-flow-explorer .fi-dest-risk {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
}

#page-flow-explorer .fi-dest-meta {
  font-size: 10px;
  color: #94a3b8;
  margin-bottom: 6px;
}

#page-flow-explorer .fi-dest-addr .fi-report-act .fi-act-btn {
  padding: 2px 6px;
}

#page-flow-explorer .fi-act-lite {
  opacity: 0.92;
  font-size: 11px !important;
}

/* —— Investigation terminal: signal cards, coverage bars, flow map, address hover row —— */
#page-flow-explorer .fi-panel-head-strong .panel-title {
  font-size: var(--fi-section-title-size, 15px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #f8fafc;
}

/* Strong panel subtitles align via unified .panel-head grid (section-header block) */
#page-flow-explorer .fi-panel-head-strong .fi-panel-sub {
  margin-top: 0;
}

#page-flow-explorer .fi-active-signals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  min-height: 0;
}

#page-flow-explorer .fi-active-signals-grid > .fi-muted-banner {
  grid-column: 1 / -1;
}

#page-flow-explorer .fi-panel-flow-map-deferred {
  margin-top: 4px;
}

#page-flow-explorer .fi-behavior-summary-list {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 12px;
  line-height: 1.55;
  color: #e2e8f0;
}

#page-flow-explorer .fi-behavior-summary-list li {
  margin-bottom: 10px;
}

#page-flow-explorer .fi-cov-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#page-flow-explorer .fi-cov-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(80px, 2fr) 48px;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

#page-flow-explorer .fi-cov-label {
  font-size: 11px;
  font-weight: 600;
  color: #cbd5e1;
}

#page-flow-explorer .fi-cov-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  min-width: 0;
}

#page-flow-explorer .fi-cov-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.35s ease;
  min-width: 2px;
}

#page-flow-explorer .fi-cov-tone-cyan {
  background: linear-gradient(90deg, #0891b2, #22d3ee);
}

#page-flow-explorer .fi-cov-tone-green {
  background: linear-gradient(90deg, #15803d, #4ade80);
}

#page-flow-explorer .fi-cov-tone-amber {
  background: linear-gradient(90deg, #b45309, #fbbf24);
}

#page-flow-explorer .fi-cov-tone-slate {
  background: linear-gradient(90deg, #475569, #94a3b8);
}

#page-flow-explorer .fi-cov-pct {
  font-size: 11px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  color: #e2e8f0;
  text-align: right;
}

#page-flow-explorer .fi-cov-foot {
  margin: 10px 0 0;
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.45;
}

#page-flow-explorer .fi-investigation-flow-map {
  overflow-x: hidden;
  overflow-y: visible;
  padding: 10px 6px 8px;
  border-radius: 12px;
  background: rgba(8, 28, 28, 0.55);
  border: 1px solid rgba(94, 234, 212, 0.16);
  min-height: 120px;
  max-width: 100%;
  box-sizing: border-box;
}

#page-flow-explorer .fi-flow-map-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  max-width: 100%;
}

#page-flow-explorer .fi-flow-map-tool-btn {
  font-size: 11px;
  padding: 4px 8px;
  line-height: 1.3;
}

#page-flow-explorer .fi-flow-map-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

#page-flow-explorer .fi-flow-map-shell {
  min-width: 0;
  max-width: 100%;
}

#page-flow-explorer .fi-flow-map-visual-hints,
#page-flow-explorer .fi-flow-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  max-width: 100%;
}

#page-flow-explorer .fi-flow-map-visual-hints {
  margin: 0 0 8px;
}

#page-flow-explorer .fi-flow-map-visual-hint {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(20, 184, 166, 0.22);
  background: rgba(8, 28, 28, 0.72);
  color: rgba(226, 232, 240, 0.88);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#page-flow-explorer .fi-flow-map-legend {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#page-flow-explorer .fi-flow-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  line-height: 1.3;
  color: rgba(203, 213, 225, 0.84);
}

#page-flow-explorer .fi-flow-map-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
  background: rgba(148, 163, 184, 0.8);
}

#page-flow-explorer .fi-flow-map-legend-dot--focus {
  background: #67e8f9;
}

#page-flow-explorer .fi-flow-map-legend-dot--selected {
  background: #5eead4;
}

#page-flow-explorer .fi-flow-map-legend-dot--analysis {
  background: #93c5fd;
}

#page-flow-explorer .fi-flow-map-legend-dot--caution {
  background: #fbbf24;
}

#page-flow-explorer .fi-flow-map-legend-dot--continuation {
  background: #4ade80;
}

#page-flow-explorer .fi-flow-map-legend-dot--verified {
  background: #2dd4bf;
}

#page-flow-explorer .fi-flow-map-hint {
  font-size: 11px;
  margin-top: 8px;
}

#page-flow-explorer .fi-flow-map-svg {
  display: block;
  min-width: min(100%, 720px);
  max-width: 100%;
  height: auto;
}

#page-flow-explorer .fi-flow-node--picked circle {
  stroke: #14b8a6 !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 0 12px rgba(20, 184, 166, 0.34));
}

#page-flow-explorer .fi-flow-node--ext circle {
  stroke: #67e8f9 !important;
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.45));
}

#page-flow-explorer .fi-flow-node--dim circle {
  opacity: 0.38;
}

#page-flow-explorer .fi-flow-node--dim .fi-flow-node-cap,
#page-flow-explorer .fi-flow-node--dim .fi-flow-node-sub {
  opacity: 0.45;
}

#page-flow-explorer .fi-flow-node--intel-dim circle {
  opacity: 0.64;
}

#page-flow-explorer .fi-flow-node--intel-dim .fi-flow-node-cap,
#page-flow-explorer .fi-flow-node--intel-dim .fi-flow-node-sub {
  opacity: 0.72;
}

#page-flow-explorer .fi-flow-map-edge--picked .fi-flow-edge-line {
  stroke: rgba(20, 184, 166, 0.95);
  stroke-width: 3px;
}

#page-flow-explorer .fi-flow-map-edge--ext .fi-flow-edge-line {
  stroke: rgba(34, 211, 238, 0.9);
  stroke-width: 3px;
}

#page-flow-explorer .fi-flow-map-edge--dim .fi-flow-edge-line {
  stroke: rgba(71, 85, 105, 0.35);
}

#page-flow-explorer .fi-flow-map-edge--dim .fi-flow-edge-arrow {
  fill: rgba(71, 85, 105, 0.35);
}

#page-flow-explorer .fi-flow-map-edge--dim .fi-flow-pulse-dot {
  opacity: 0.2;
}

#page-flow-explorer .fi-flow-map-edge--intel-dim .fi-flow-edge-line {
  opacity: 0.4;
}

#page-flow-explorer .fi-flow-map-edge--intel-dim .fi-flow-edge-arrow,
#page-flow-explorer .fi-flow-map-edge--intel-dim .fi-flow-pulse-dot {
  opacity: 0.32;
}

#page-flow-explorer .fi-flow-map-edge--hover .fi-flow-edge-line {
  stroke: rgba(226, 232, 240, 0.85);
  stroke-width: 2.5px;
}

#page-flow-explorer .fi-flow-edge-line {
  stroke: rgba(148, 163, 184, 0.5);
  stroke-width: 2;
  stroke-linecap: round;
}

#page-flow-explorer .fi-flow-edge-arrow {
  fill: rgba(203, 213, 225, 0.75);
}

#page-flow-explorer .fi-flow-pulse-dot {
  fill: #22d3ee;
  animation: fi-flow-tx-pulse 2.2s ease-in-out infinite;
}

@keyframes fi-flow-tx-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

#page-flow-explorer .fi-flow-node {
  cursor: pointer;
}

#page-flow-explorer .fi-flow-node circle {
  stroke-width: 2;
  transition:
    filter 0.2s ease,
    stroke 0.2s ease,
    opacity 0.2s ease;
}

#page-flow-explorer .fi-flow-node:focus circle,
#page-flow-explorer .fi-flow-node:hover circle {
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.5));
}

#page-flow-explorer .fi-flow-node-focus circle {
  fill: rgba(34, 211, 238, 0.22);
  stroke: #67e8f9;
}

#page-flow-explorer .fi-flow-node-wallet circle {
  fill: rgba(8, 28, 28, 0.95);
  stroke: #94a3b8;
}

#page-flow-explorer .fi-flow-node-contract circle {
  fill: rgba(249, 115, 22, 0.18);
  stroke: #fb923c;
}

#page-flow-explorer .fi-flow-node-exchange circle {
  fill: rgba(74, 222, 128, 0.16);
  stroke: #4ade80;
}

#page-flow-explorer .fi-flow-node--intel-central circle,
#page-flow-explorer .fi-flow-node--intel-selected-route circle {
  stroke-width: 3px;
  filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.24));
}

#page-flow-explorer .fi-flow-node--intel-priority-path circle {
  stroke: rgba(94, 234, 212, 0.9);
  stroke-width: 2.6px;
}

#page-flow-explorer .fi-flow-node--intel-selected-route circle {
  stroke: #5eead4;
}

#page-flow-explorer .fi-flow-node--intel-replay-active circle {
  stroke: #93c5fd;
  stroke-width: 3px;
}

#page-flow-explorer .fi-flow-node--intel-repeated-counterparty circle {
  stroke: #93c5fd;
  stroke-width: 2.6px;
}

#page-flow-explorer .fi-flow-node--intel-shared-intermediary circle,
#page-flow-explorer .fi-flow-node--intel-route-overlap circle,
#page-flow-explorer .fi-flow-node--intel-convergence circle {
  stroke: #67e8f9;
  stroke-width: 2.6px;
}

#page-flow-explorer .fi-flow-node--intel-continuation-boundary circle {
  stroke: #4ade80;
  stroke-width: 2.8px;
  stroke-dasharray: 4 3;
}

#page-flow-explorer .fi-flow-node--intel-verified-continuation circle {
  stroke: #2dd4bf;
  stroke-width: 2.8px;
}

#page-flow-explorer .fi-flow-node--intel-verified-entity circle {
  stroke: #2dd4bf;
}

#page-flow-explorer .fi-flow-node--intel-observed-cluster circle {
  stroke: rgba(147, 197, 253, 0.84);
  stroke-width: 2.3px;
  stroke-dasharray: 4 3;
}

#page-flow-explorer .fi-flow-node--intel-registry-supported-group circle {
  stroke: #2dd4bf;
  stroke-width: 2.6px;
}

#page-flow-explorer .fi-flow-node--intel-heuristic-entity circle {
  stroke-dasharray: 4 3;
}

#page-flow-explorer .fi-flow-node--intel-low-confidence circle {
  stroke: rgba(251, 191, 36, 0.88);
  stroke-dasharray: 4 3;
}

#page-flow-explorer .fi-flow-node--intel-unknown-high-activity circle,
#page-flow-explorer .fi-flow-node--intel-loop-like circle {
  stroke: #fbbf24;
}

#page-flow-explorer .fi-flow-node-badge circle {
  fill: rgba(8, 28, 28, 0.96);
  stroke: rgba(255, 255, 255, 0.18);
}

#page-flow-explorer .fi-flow-node-badge text {
  fill: #e2e8f0;
  font-size: 7px;
  font-weight: 700;
  dominant-baseline: middle;
}

#page-flow-explorer .fi-flow-node-badge--focus circle {
  stroke: #67e8f9;
}

#page-flow-explorer .fi-flow-node-badge--selected circle {
  stroke: #5eead4;
}

#page-flow-explorer .fi-flow-node-badge--analysis circle {
  stroke: #93c5fd;
}

#page-flow-explorer .fi-flow-node-badge--caution circle {
  stroke: #fbbf24;
}

#page-flow-explorer .fi-flow-node-badge--continuation circle {
  stroke: #4ade80;
}

#page-flow-explorer .fi-flow-node-badge--verified circle {
  stroke: #2dd4bf;
}

#page-flow-explorer .fi-flow-node-cap {
  font-size: 9px;
  fill: #cbd5e1;
  font-weight: 600;
}

#page-flow-explorer .fi-addr-hover-cell .fi-addr-hover-wrap {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
}

#page-flow-explorer .fi-addr-hover-cell .fi-drill-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-flow-explorer .fi-cell-actions--hover {
  flex-shrink: 0;
}

#page-flow-explorer .fi-inv-sig-card {
  position: relative;
  border-radius: 12px;
  padding: 11px 12px 10px;
  border: 1px solid rgba(20, 184, 166, 0.24);
  background: linear-gradient(
    155deg,
    rgba(8, 28, 28, 0.94),
    rgba(6, 18, 18, 0.88)
  );
  box-shadow:
    0 6px 22px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(20, 184, 166, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  text-align: left;
  cursor: default;
  min-width: 0;
  transition:
    border-color 0.18s ease,
    transform 0.18s ease;
}

#page-flow-explorer .fi-inv-sig-card.fi-inv-sig-card--clickable {
  cursor: pointer;
}

#page-flow-explorer .fi-inv-sig-card.fi-inv-sig-card--clickable:hover,
#page-flow-explorer .fi-inv-sig-card.fi-inv-sig-card--clickable:focus-visible {
  border-color: rgba(20, 184, 166, 0.34);
  transform: translateY(-1px);
  outline: none;
}

#page-flow-explorer .fi-inv-sig-card:focus-visible {
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.34);
}

#page-flow-explorer .fi-sig-sev-high {
  border-color: rgba(20, 184, 166, 0.34);
  box-shadow:
    0 8px 26px rgba(20, 184, 166, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#page-flow-explorer .fi-sig-sev-med {
  border-color: rgba(20, 184, 166, 0.34);
  box-shadow:
    0 8px 26px rgba(20, 184, 166, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#page-flow-explorer .fi-sig-sev-low {
  border-color: rgba(94, 234, 212, 0.25);
}

#page-flow-explorer .fi-inv-sig-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

#page-flow-explorer .fi-inv-sig-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #f1f5f9;
}

#page-flow-explorer .fi-inv-sig-sev {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fde68a;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
}

#page-flow-explorer .fi-sig-sev-high .fi-inv-sig-sev {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.1);
}

#page-flow-explorer .fi-sig-sev-low .fi-inv-sig-sev {
  color: #a5f3fc;
  border-color: rgba(34, 211, 238, 0.35);
  background: rgba(34, 211, 238, 0.08);
}

#page-flow-explorer .fi-inv-sig-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 10px;
  color: #94a3b8;
  margin-bottom: 6px;
}

#page-flow-explorer .fi-inv-sig-ts {
  font-family: ui-monospace, monospace;
  color: #cbd5e1;
}

#page-flow-explorer .fi-inv-sig-detail {
  margin: 0 0 6px;
  font-size: 11px;
  line-height: 1.45;
  color: #e2e8f0;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-inv-sig-action {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #14b8a6;
  margin-top: 4px;
}

/* Off-screen trace graph engine (keeps flow-graph.js DOM IDs intact) */
#page-flow-explorer .fi-graph-engine-offscreen {
  position: fixed;
  left: -14000px;
  top: 0;
  width: 1224px;
  height: 780px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
}

#page-flow-explorer .fi-graph-engine-offscreen .fe-graph-inner .fe-graph-viewport {
  min-height: 720px;
  height: 720px;
}

#page-flow-explorer .fi-graph-engine-offscreen .fe-graph-inner #flowCanvasWrap {
  min-height: 720px !important;
  height: 720px !important;
}

/* Investigation Signals Center + Route Intelligence + Live feed */
#page-flow-explorer .fi-signals-center-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  min-width: 0;
}

#page-flow-explorer .fi-sig-center-card {
  border-radius: 12px;
  padding: 12px;
  border: 1px solid rgba(20, 184, 166, 0.22);
  background: linear-gradient(
    160deg,
    rgba(8, 28, 28, 0.94),
    rgba(6, 18, 18, 0.9)
  );
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  min-width: 0;
}

#page-flow-explorer .fi-sig-center-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #e2e8f0;
  margin-bottom: 8px;
}

#page-flow-explorer .fi-sig-center-meta {
  font-size: 10px;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

#page-flow-explorer .fi-sig-ctr-k {
  font-weight: 600;
  color: #64748b;
  margin-right: 4px;
}

#page-flow-explorer .fi-sig-ctr-v {
  color: #e2e8f0;
  font-weight: 600;
  margin-right: 8px;
}

#page-flow-explorer .fi-sig-ctr-dot {
  opacity: 0.35;
  margin: 0 4px;
}

#page-flow-explorer .fi-sig-ctr-st-detected {
  color: #fbbf24;
}

#page-flow-explorer .fi-sig-ctr-st-not {
  color: #4ade80;
}

#page-flow-explorer .fi-sig-ctr-st-unknown {
  color: #94a3b8;
}

#page-flow-explorer .fi-sig-center-explain {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.45;
  color: #cbd5e1;
}

#page-flow-explorer .fi-sig-center-related {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 10px;
}

#page-flow-explorer .fi-sig-ctr-act {
  display: inline-flex;
  gap: 3px;
  flex-wrap: wrap;
}

#page-flow-explorer .fi-sig-ctr-addr-lbl {
  color: #5eead4;
}

#page-flow-explorer .fi-sig-ctr-noaddr {
  color: #64748b;
}

#page-flow-explorer .fi-route-intelligence-body {
  min-width: 0;
}

#page-flow-explorer .fi-ri-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#page-flow-explorer .fi-ri-card {
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(94, 234, 212, 0.2);
  background: rgba(8, 28, 28, 0.85);
  min-width: 0;
}

#page-flow-explorer .fi-ri-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

#page-flow-explorer .fi-ri-num {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #67e8f9;
}

#page-flow-explorer .fi-ri-path-line {
  font-size: 11px;
  line-height: 1.45;
  color: #e2e8f0;
  margin-bottom: 8px;
  word-break: break-word;
}

#page-flow-explorer .fi-ri-addr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 10px;
}

#page-flow-explorer .fi-ri-arrow {
  color: #64748b;
  font-weight: 700;
}

#page-flow-explorer .fi-ri-dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px 12px;
  margin: 0;
  font-size: 10px;
}

#page-flow-explorer .fi-ri-dl dt {
  margin: 0;
  color: #64748b;
  font-weight: 600;
}

#page-flow-explorer .fi-ri-dl dd {
  margin: 0;
  color: #e2e8f0;
  font-weight: 600;
}

#page-flow-explorer .fi-ri-why {
  margin: 10px 0 6px;
  font-size: 11px;
  line-height: 1.45;
  color: #94a3b8;
}

#page-flow-explorer .fi-ri-neighbor-hint {
  margin: 0;
  font-size: 10px;
  color: #64748b;
}

#page-flow-explorer .fi-live-trace-feed-body {
  min-width: 0;
}

#page-flow-explorer .fi-live-feed-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
}

#page-flow-explorer .fi-live-feed-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
}

@media (max-width: 520px) {
  #page-flow-explorer .fi-live-feed-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

#page-flow-explorer .fi-live-feed-k {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

#page-flow-explorer .fi-live-feed-v {
  color: #e2e8f0;
  font-weight: 500;
  word-break: break-word;
  min-width: 0;
}

#page-flow-explorer .fi-live-feed-actions {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

#page-flow-explorer .fi-flow-node-sub {
  font-size: 7px;
  fill: #64748b;
}

#page-flow-explorer .fi-flow-map-edge--intel-selected-route .fi-flow-edge-line,
#page-flow-explorer .fi-flow-map-edge--intel-replay-active .fi-flow-edge-line {
  stroke-width: 3px;
}

#page-flow-explorer .fi-flow-map-edge--intel-selected-route .fi-flow-edge-line {
  stroke: rgba(20, 184, 166, 0.96);
}

#page-flow-explorer .fi-flow-map-edge--intel-selected-route .fi-flow-edge-arrow,
#page-flow-explorer .fi-flow-map-edge--intel-selected-route .fi-flow-pulse-dot {
  fill: rgba(94, 234, 212, 0.95);
  opacity: 0.95;
}

#page-flow-explorer .fi-flow-map-edge--intel-replay-active .fi-flow-edge-line {
  stroke: rgba(147, 197, 253, 0.96);
}

#page-flow-explorer .fi-flow-map-edge--intel-high-value .fi-flow-edge-line {
  stroke-width: 2.7px;
  opacity: 0.92;
}

#page-flow-explorer .fi-flow-map-edge--intel-priority-path .fi-flow-edge-line {
  stroke: rgba(94, 234, 212, 0.94);
  stroke-width: 2.8px;
  opacity: 0.96;
}

#page-flow-explorer .fi-flow-map-edge--intel-repeated-path .fi-flow-edge-line,
#page-flow-explorer .fi-flow-map-edge--intel-loop-like .fi-flow-edge-line {
  stroke-dasharray: 4 4;
}

#page-flow-explorer .fi-flow-map-edge--intel-route-overlap .fi-flow-edge-line {
  stroke: rgba(103, 232, 249, 0.88);
}

#page-flow-explorer .fi-flow-map-edge--intel-continuation-boundary .fi-flow-edge-line {
  stroke: rgba(74, 222, 128, 0.92);
  stroke-width: 2.8px;
  stroke-dasharray: 5 4;
}

#page-flow-explorer .fi-flow-map-edge--intel-verified-continuation .fi-flow-edge-line {
  stroke: rgba(45, 212, 191, 0.94);
  stroke-width: 2.9px;
}

#page-flow-explorer .fi-flow-map-edge--intel-verified-continuation .fi-flow-edge-arrow,
#page-flow-explorer .fi-flow-map-edge--intel-verified-continuation .fi-flow-pulse-dot {
  fill: rgba(45, 212, 191, 0.95);
  opacity: 0.94;
}

#page-flow-explorer .fi-flow-map-edge--intel-continuation-boundary .fi-flow-edge-arrow,
#page-flow-explorer .fi-flow-map-edge--intel-continuation-boundary .fi-flow-pulse-dot {
  fill: rgba(74, 222, 128, 0.95);
  opacity: 0.95;
}

#page-flow-explorer .fi-flow-map-edge--intel-candidate-continuation .fi-flow-edge-line {
  stroke: rgba(74, 222, 128, 0.88);
  stroke-width: 2.6px;
  stroke-dasharray: 5 4;
}

#page-flow-explorer .fi-flow-map-edge--intel-candidate-continuation .fi-flow-edge-arrow,
#page-flow-explorer .fi-flow-map-edge--intel-candidate-continuation .fi-flow-pulse-dot {
  fill: rgba(74, 222, 128, 0.9);
  opacity: 0.92;
}

#page-flow-explorer .fi-flow-map-edge--intel-selected-route .fi-flow-pulse-dot,
#page-flow-explorer .fi-flow-map-edge--intel-replay-active .fi-flow-pulse-dot {
  opacity: 0.95;
}

@media (max-width: 720px) {
  #page-flow-explorer .fi-flow-map-visual-hint,
  #page-flow-explorer .fi-flow-map-legend-item {
    font-size: 9.5px;
  }
}

/* --- Operational intelligence rail (right column) --- */
#page-flow-explorer .flow-explorer-side-stack.fi-operational-rail {
  align-self: stretch;
  min-height: 0;
  flex: 1 1 auto;
  isolation: isolate;
  min-width: 0;
  max-width: 100%;
}

/* Right rail tabs — fit inside rail; wrap on desktop, scroll strip only when narrow */
#page-flow-explorer .fi-rail-tab-shell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#page-flow-explorer .fi-rail-sticky {
  position: sticky;
  top: 10px;
  z-index: 6;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible;
}

#page-flow-explorer .fi-rail-tabs-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-bottom: 6px;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  container-type: inline-size;
  container-name: railtabs;
}

#page-flow-explorer .fi-rail-tabs {
  display: flex;
  flex-flow: row wrap;
  gap: 6px 8px;
  align-items: center;
  align-content: flex-start;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Very narrow rail: single row, scroll inside strip only */
@container railtabs (max-width: 280px) {
  #page-flow-explorer .fi-rail-tabs {
    flex-wrap: nowrap;
    width: max-content;
    min-width: min-content;
  }
}

#page-flow-explorer .fi-rail-tab {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(8, 28, 28, 0.42);
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.25;
  white-space: nowrap;
  max-width: 100%;
  transition:
    border-color var(--fi-dur) var(--fi-ease),
    background var(--fi-dur) var(--fi-ease),
    color var(--fi-dur) var(--fi-ease);
}

#page-flow-explorer .fi-rail-tab:hover {
  border-color: rgba(20, 184, 166, 0.34);
  color: #f8fafc;
}

#page-flow-explorer .fi-rail-tab--active {
  border-color: rgba(20, 184, 166, 0.34);
  color: #5eead4;
  background: rgba(20, 184, 166, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#page-flow-explorer .fi-rail-tab:focus-visible {
  outline: 2px solid rgba(20, 184, 166, 0.34);
  outline-offset: 2px;
}

#page-flow-explorer .fi-rail-tab-panels {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#page-flow-explorer .fi-rail-tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--fi-stack-gap, 12px);
  min-width: 0;
  padding: 4px 2px 2px;
  box-sizing: border-box;
}

#page-flow-explorer .fi-rail-tab-panel[hidden] {
  display: none !important;
}

#page-flow-explorer .fi-rail-tab-lead {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.45;
  margin: 0 2px 2px;
}

#page-flow-explorer .fi-rail-trace-filters-panel {
  margin-top: 2px;
}

/* Phase 4 — Simple / Advanced presentation (no data or API changes) */
/* Simple view — main/rail shell + left column stack (layout only; Advanced unchanged via selectors) */
#page-flow-explorer .fi-forensic-main-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .simple-main.fintel-layout,
#page-flow-explorer[data-fi-ux-mode="simple"] .fintel-layout.simple-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
  min-width: 0;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .simple-left.fi-forensic-main-column,
#page-flow-explorer[data-fi-ux-mode="simple"] .fi-forensic-main-column.simple-left {
  gap: 24px;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .simple-right.flow-explorer-side-stack,
#page-flow-explorer[data-fi-ux-mode="simple"] .flow-explorer-side-stack.simple-right {
  min-width: 0;
  max-width: 100%;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .fi-executive-context {
  margin-bottom: 0;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .fintel-primary-stack {
  gap: 24px;
}

/* Trace snapshot + Trace coverage — equal width, shared top edge */
#page-flow-explorer[data-fi-ux-mode="simple"] .simple-two-card-row.fintel-two-col.fi-cluster-primary,
#page-flow-explorer[data-fi-ux-mode="simple"] .fintel-two-col.fi-cluster-primary.simple-two-card-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  min-width: 0;
}

/* Simple — shared header row (titles + helpers align on one baseline; scoped to Simple) */
#page-flow-explorer[data-fi-ux-mode="simple"] .header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 28px;
  gap: 16px;
  box-sizing: border-box;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .panel.flow-explorer-subpanel .panel-head.header-row {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  grid-template-columns: unset !important;
  row-gap: 0;
  min-height: 28px;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .fi-priority-strip-head.header-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  grid-template-columns: unset !important;
  row-gap: 0;
  min-height: 28px;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .fi-primary-hero-head.header-row {
  justify-content: flex-start;
  align-items: center;
  min-height: 28px;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .panel.flow-explorer-subpanel .panel-head.header-row > .fi-collapse-toggle {
  flex-shrink: 0;
  align-self: center;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .fi-priority-strip-head.header-row > .fi-collapse-toggle {
  flex-shrink: 0;
  align-self: center;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .header-left {
  display: flex;
  align-items: center;
  min-width: 0;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .fi-primary-hero-head .header-left.fi-primary-hero-head-text {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .header-title,
#page-flow-explorer[data-fi-ux-mode="simple"] .panel-title.header-title,
#page-flow-explorer[data-fi-ux-mode="simple"] .fi-priority-strip-title.header-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-flow-explorer[data-fi-ux-mode="simple"] h2.fi-primary-hero-title.header-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: normal;
  color: #f8fafc;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .fi-primary-hero-head .fi-primary-hero-head-text .fi-primary-hero-kicker {
  margin-bottom: 0;
  line-height: 1;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .header-subtitle,
#page-flow-explorer[data-fi-ux-mode="simple"] .header-right .fi-panel-sub,
#page-flow-explorer[data-fi-ux-mode="simple"] .header-right .fi-panel-sub-inline,
#page-flow-explorer[data-fi-ux-mode="simple"] .header-right .fi-rail-head-sub,
#page-flow-explorer[data-fi-ux-mode="simple"] .header-right .fi-section-helper {
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  max-width: 100%;
  min-width: 0;
  margin: 0;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .header-title.fi-ux-dual-title {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35em;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .header-title.fi-ux-dual-title > span {
  display: inline;
  white-space: nowrap;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .fi-priority-strip-title.fi-ux-dual-title.header-title {
  display: inline-flex;
}

@media (max-width: 900px) {
  #page-flow-explorer[data-fi-ux-mode="simple"] .simple-main.fintel-layout,
  #page-flow-explorer[data-fi-ux-mode="simple"] .fintel-layout.simple-main {
    grid-template-columns: minmax(0, 1fr);
  }

  #page-flow-explorer[data-fi-ux-mode="simple"] {
    overflow-x: hidden;
  }

  #page-flow-explorer[data-fi-ux-mode="simple"] .simple-two-card-row.fintel-two-col.fi-cluster-primary,
  #page-flow-explorer[data-fi-ux-mode="simple"] .fintel-two-col.fi-cluster-primary.simple-two-card-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  #page-flow-explorer[data-fi-ux-mode="simple"] {
    overflow-x: hidden;
  }

  #page-flow-explorer[data-fi-ux-mode="simple"] .panel.flow-explorer-subpanel .panel-head.header-row {
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
  }

  #page-flow-explorer[data-fi-ux-mode="simple"]
    .panel.flow-explorer-subpanel
    .panel-head.header-row
    > .fi-collapse-toggle {
    order: 0;
  }

  #page-flow-explorer[data-fi-ux-mode="simple"]
    .panel.flow-explorer-subpanel
    .panel-head.header-row
    > .header-left {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }

  #page-flow-explorer[data-fi-ux-mode="simple"]
    .panel.flow-explorer-subpanel
    .panel-head.header-row
    .header-left
    .panel-title,
  #page-flow-explorer[data-fi-ux-mode="simple"]
    .panel.flow-explorer-subpanel
    .panel-head.header-row
    .header-left
    .header-title {
    white-space: normal;
  }

  #page-flow-explorer[data-fi-ux-mode="simple"]
    .panel.flow-explorer-subpanel
    .panel-head.header-row
    > .header-right {
    order: 2;
    flex: 1 1 100%;
    max-width: 100%;
    justify-content: flex-start;
  }

  #page-flow-explorer[data-fi-ux-mode="simple"]
    .panel.flow-explorer-subpanel
    .panel-head.header-row
    .header-subtitle,
  #page-flow-explorer[data-fi-ux-mode="simple"]
    .panel.flow-explorer-subpanel
    .panel-head.header-row
    .header-right
    .fi-panel-sub,
  #page-flow-explorer[data-fi-ux-mode="simple"]
    .panel.flow-explorer-subpanel
    .panel-head.header-row
    .header-right
    .fi-panel-sub-inline,
  #page-flow-explorer[data-fi-ux-mode="simple"]
    .panel.flow-explorer-subpanel
    .panel-head.header-row
    .header-right
    .fi-section-helper {
    text-align: left;
    white-space: normal;
  }

  #page-flow-explorer[data-fi-ux-mode="simple"] .fi-priority-strip-head.header-row {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  #page-flow-explorer[data-fi-ux-mode="simple"] .fi-priority-strip-head.header-row > .fi-collapse-toggle {
    order: 0;
  }

  #page-flow-explorer[data-fi-ux-mode="simple"] .fi-priority-strip-head.header-row > .header-left {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
  }

  #page-flow-explorer[data-fi-ux-mode="simple"] .fi-priority-strip-head.header-row > .header-right {
    order: 2;
    flex: 1 1 100%;
    max-width: 100%;
    justify-content: flex-start;
  }

  #page-flow-explorer[data-fi-ux-mode="simple"] .fi-priority-strip-title.header-title {
    flex: 1 1 100%;
    max-width: 100%;
    white-space: normal;
  }

  #page-flow-explorer[data-fi-ux-mode="simple"] .fi-priority-strip-sub.header-subtitle {
    flex: 1 1 100%;
    max-width: 100%;
    text-align: left;
    white-space: normal;
  }

  #page-flow-explorer[data-fi-ux-mode="simple"] .fi-primary-hero-head.header-row {
    flex-wrap: wrap;
  }

  #page-flow-explorer[data-fi-ux-mode="simple"] .fi-primary-hero-head .header-left.fi-primary-hero-head-text {
    flex: 1 1 100%;
  }

  #page-flow-explorer[data-fi-ux-mode="simple"] h2.fi-primary-hero-title.header-title {
    white-space: normal;
  }

  #page-flow-explorer[data-fi-ux-mode="simple"] #fi-panel-trace-coverage .panel-title.header-title,
  #page-flow-explorer[data-fi-ux-mode="simple"] #fi-panel-trace-coverage .header-title.fi-ux-dual-title > .fi-ux-t-adv {
    white-space: nowrap;
  }
}

/* Inline index.html uses 1100px single-column for .fintel-layout — keep Simple two-column until 900px */
@media (max-width: 1100px) and (min-width: 901px) {
  #page-flow-explorer[data-fi-ux-mode="simple"] .simple-main.fintel-layout,
  #page-flow-explorer[data-fi-ux-mode="simple"] .fintel-layout.simple-main {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

#page-flow-explorer[data-fi-ux-mode="simple"] {
  --fi-panel-pad-x: 18px;
}

#page-flow-explorer[data-fi-ux-mode="simple"] [data-fi-ux-advanced-only="1"] {
  display: none !important;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .fi-rail-tab-lead {
  display: none !important;
}

#page-flow-explorer .fi-watchlist-simple-hint,
#page-flow-explorer .fi-rail-feed-simple-hint {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
  display: none !important;
}

#page-flow-explorer[data-fi-ux-mode="simple"] .fi-watchlist-simple-hint,
#page-flow-explorer[data-fi-ux-mode="simple"] .fi-rail-feed-simple-hint {
  display: block !important;
}

#page-flow-explorer[data-fi-ux-mode="advanced"] .fi-ux-t-simple,
#page-flow-explorer[data-fi-ux-mode="simple"] .fi-ux-t-adv {
  display: none !important;
}

/* Simple — Trace coverage: show existing advanced-line label only (markup unchanged) */
#page-flow-explorer[data-fi-ux-mode="simple"] #fi-panel-trace-coverage .fi-ux-t-simple {
  display: none !important;
}
#page-flow-explorer[data-fi-ux-mode="simple"] #fi-panel-trace-coverage .fi-ux-t-adv {
  display: inline !important;
}
#page-flow-explorer[data-fi-ux-mode="simple"] #fi-panel-trace-coverage .panel-title.header-title,
#page-flow-explorer[data-fi-ux-mode="simple"] #fi-panel-trace-coverage .panel-title.fi-ux-dual-title {
  white-space: nowrap;
}

/* Phase 5 — stacked dual wording inside blocks (must not override mode visibility) */
#page-flow-explorer[data-fi-ux-mode="simple"] .fi-ux-dual-block > .fi-ux-t-simple {
  display: block !important;
}
#page-flow-explorer[data-fi-ux-mode="advanced"] .fi-ux-dual-block > .fi-ux-t-adv {
  display: block !important;
}

#page-flow-explorer .fi-inv-sig-detail.fi-ux-dual-block > .fi-ux-t-simple,
#page-flow-explorer .fi-inv-sig-detail.fi-ux-dual-block > .fi-ux-t-adv {
  margin: 0 0 6px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-inv-sig-wallet {
  font-size: 10px;
  color: var(--text-dim);
  margin: 6px 0 0;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-priority-strip-title.fi-ux-dual-title {
  line-height: 1.35;
}

#page-flow-explorer th .fi-ux-dual-inline {
  font-weight: inherit;
}

#page-flow-explorer .fi-watch-risk-k {
  font-weight: 700;
}

#page-flow-explorer .fi-ri-why.fi-ux-dual-block strong {
  color: #5eead4;
}

#page-flow-explorer .fi-ux-dual-title,
#page-flow-explorer .fi-ux-dual-sub {
  display: block;
}

#page-flow-explorer .fi-panel-layout-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fi-space-sm) var(--fi-space-md);
  padding-bottom: 2px;
}

#page-flow-explorer .fi-ux-mode-switch {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-right: auto;
}

#page-flow-explorer .fi-ux-mode-switch-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

#page-flow-explorer .fi-ux-mode-btn--active {
  border-color: rgba(52, 211, 153, 0.55);
  color: #6ee7b7;
}

@media (max-width: 720px) {
  #page-flow-explorer .fi-ux-mode-switch {
    flex: 1 1 100%;
    margin-right: 0;
  }
}

#page-flow-explorer .fi-rail-live-panel {
  border-color: rgba(94, 234, 212, 0.28);
  background: linear-gradient(
    165deg,
    rgba(8, 28, 28, 0.97),
    rgba(6, 18, 18, 0.98)
  );
}

#page-flow-explorer .fi-rail-live-mode-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  flex-wrap: wrap;
}

#page-flow-explorer .fi-rail-mode-pill {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(8, 28, 28, 0.65);
  color: #cbd5e1;
}

#page-flow-explorer .fi-rail-mode-pill.fi-rail-mode--live {
  border-color: rgba(52, 211, 153, 0.55);
  color: #6ee7b7;
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.15);
}

#page-flow-explorer .fi-rail-mode-pill.fi-rail-mode--reconnect {
  border-color: rgba(251, 191, 36, 0.55);
  color: #fcd34d;
  animation: fi-rail-reconnect-pulse 1.6s ease-in-out infinite;
}

#page-flow-explorer .fi-rail-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
  flex-shrink: 0;
}

#page-flow-explorer .fi-rail-pulse-dot.fi-rail-pulse--live {
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
  animation: fi-rail-live-pulse 2s ease-out infinite;
}

#page-flow-explorer .fi-rail-pulse-dot.fi-rail-pulse--warn {
  background: #fbbf24;
  animation: fi-rail-reconnect-pulse 1.2s ease-in-out infinite;
}

@keyframes fi-rail-live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(52, 211, 153, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
  }
}

@keyframes fi-rail-reconnect-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

#page-flow-explorer .fi-rail-pulse-label {
  font-size: 10px;
  color: var(--text-dim);
}

#page-flow-explorer .fi-rail-fallback-msg {
  font-size: 11px;
  color: #fde68a;
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  line-height: 1.45;
}

#page-flow-explorer .fi-rail-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  margin-bottom: 12px;
}

#page-flow-explorer .fi-rail-metric-span2 {
  grid-column: 1 / -1;
}

#page-flow-explorer .fi-rail-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

#page-flow-explorer .fi-rail-mk,
#page-flow-explorer .fi-table-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(148, 163, 184, 0.95);
}

#page-flow-explorer .fi-rail-mv,
#page-flow-explorer .fi-table-value {
  font-size: 12px;
  font-weight: 500;
  color: #e2e8f0;
  word-break: break-word;
}

#page-flow-explorer .fi-rail-feed-line {
  font-size: 10px;
  line-height: 1.4;
}

#page-flow-explorer .fi-rail-subblock {
  margin-top: 8px;
  min-width: 0;
}

#page-flow-explorer .fi-rail-subk {
  font-size: var(--fi-unified-eyebrow-size, 11px);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(148, 163, 184, 0.95);
  margin-bottom: 8px;
}

#page-flow-explorer .fi-rail-split-mini {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

#page-flow-explorer .fi-rail-mini-list {
  font-size: 10px;
  line-height: 1.45;
  max-height: 120px;
  overflow: auto;
  min-width: 0;
}

#page-flow-explorer .fi-rail-alerts-body {
  font-size: 10px;
  line-height: 1.45;
  max-height: 88px;
  overflow: auto;
}

#page-flow-explorer .fi-rail-alert-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#page-flow-explorer .fi-rail-alert-stack .fi-inv-sig-card {
  padding: 10px 10px 8px;
  min-height: 248px;
}

#page-flow-explorer .fi-rail-alert-stack .fi-inv-sig-detail {
  font-size: 10px;
}

#page-flow-explorer .fi-rail-exchange-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#page-flow-explorer .fi-rail-ex-card {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(0, 0, 0, 0.2);
  font-size: 10px;
  min-width: 0;
}

#page-flow-explorer .fi-rail-ex-card--candidate {
  border-style: dashed;
  opacity: 0.92;
}

#page-flow-explorer .fi-rail-ex-name {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 6px;
}

#page-flow-explorer .fi-rail-ex-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 8px;
  margin: 8px 0;
}

#page-flow-explorer .fi-rail-ex-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

#page-flow-explorer .fi-rail-ex-actions .btn {
  font-size: 10px;
  padding: 5px 10px;
}

#page-flow-explorer .fi-rail-ranks-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 420px;
  overflow: auto;
  min-width: 0;
}

#page-flow-explorer .fi-rail-rank-block-title {
  font-size: var(--fi-unified-eyebrow-size, 11px);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(94, 234, 212, 0.92);
  margin: 0 0 8px;
}

#page-flow-explorer .fi-rail-rank-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--fi-table-size);
}

#page-flow-explorer .fi-rail-rank-table th,
#page-flow-explorer .fi-rail-rank-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-rail-rank-table td:nth-child(2),
#page-flow-explorer .fi-rail-rank-table th:nth-child(2),
#page-flow-explorer .fi-rail-rank-table td:nth-child(3),
#page-flow-explorer .fi-rail-rank-table th:nth-child(3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#page-flow-explorer .fi-rail-rank-table td:nth-child(4),
#page-flow-explorer .fi-rail-rank-table th:nth-child(4) {
  text-align: center;
  white-space: nowrap;
}

#page-flow-explorer .fi-rail-rank-table td:nth-child(1),
#page-flow-explorer .fi-rail-rank-table th:nth-child(1) {
  width: 32%;
}

#page-flow-explorer .fi-rail-rank-table td:nth-child(5),
#page-flow-explorer .fi-rail-rank-table th:nth-child(5) {
  width: 22%;
}

#page-flow-explorer .fi-rail-rank-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  color: rgba(148, 163, 184, 0.92);
  vertical-align: middle;
}

#page-flow-explorer .fi-rail-health .fi-cov-row {
  margin-bottom: 6px;
}

#page-flow-explorer .fi-rail-flow-feed {
  max-height: 160px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 10px;
  min-width: 0;
  padding-right: 2px;
}

#page-flow-explorer .fi-rail-feed-line-item {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-rail-feed-line-item .fi-rail-feed-kind {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #7dd3fc;
  margin-right: 6px;
}

#page-flow-explorer .fi-rail-action-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#page-flow-explorer .fi-rail-icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(8, 28, 28, 0.6);
  color: #e2e8f0;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

#page-flow-explorer .fi-rail-icon-btn:hover {
  border-color: rgba(20, 184, 166, 0.34);
  background: rgba(20, 184, 166, 0.16);
}

#page-flow-explorer .fi-rail-icon-btn:focus-visible {
  outline: 2px solid rgba(20, 184, 166, 0.34);
  outline-offset: 2px;
}

#page-flow-explorer .fi-rail-xchain-compact {
  font-size: 10px;
  line-height: 1.45;
  min-width: 0;
}

#page-flow-explorer .fi-rail-chain-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
  min-width: 0;
}

#page-flow-explorer .fi-rail-chain-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-rail-chain-badge.fi-ch-active {
  border-color: rgba(52, 211, 153, 0.5);
  color: #6ee7b7;
}

#page-flow-explorer .fi-rail-chain-badge.fi-ch-staged {
  border-color: rgba(251, 191, 36, 0.45);
  color: #fcd34d;
}

#page-flow-explorer .fi-rail-chain-badge.fi-ch-planned {
  border-color: rgba(148, 163, 184, 0.35);
  color: #94a3b8;
}

#page-flow-explorer .fi-rail-entity-conf .fi-ec-row {
  margin-bottom: 8px;
}

#page-flow-explorer .fi-rail-entity-conf .fi-ec-lab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 10px;
  margin-bottom: 3px;
}

#page-flow-explorer .fi-rail-entity-conf .fi-ec-mean {
  flex: 1 1 100%;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-dim);
  line-height: 1.35;
  opacity: 0.92;
}

#page-flow-explorer .fi-rail-entity-conf .fi-ec-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

#page-flow-explorer .fi-rail-entity-conf .fi-ec-fill {
  height: 100%;
  border-radius: 999px;
}

#page-flow-explorer .fi-rail-entity-conf .fi-ec-fill--hi {
  background: linear-gradient(90deg, #34d399, #6ee7b7);
}

#page-flow-explorer .fi-rail-entity-conf .fi-ec-fill-lo {
  background: linear-gradient(90deg, #64748b, #94a3b8);
}

#page-flow-explorer .fi-rail-entity-conf .fi-ec-fill-md {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

#page-flow-explorer .fi-rail-watchlist-compact {
  font-size: 10px;
  line-height: 1.45;
  margin-bottom: 8px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-rail-watch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#page-flow-explorer .fi-rail-watch-actions .btn {
  font-size: 11px;
  padding: 7px 12px;
}

@media (max-width: 768px) {
  #page-flow-explorer .fi-monitoring-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #page-flow-explorer .fi-monitoring-actions .btn,
  #page-flow-explorer .fi-rail-watch-actions .btn {
    width: 100%;
  }
}

@media (max-width: 720px) {
  #page-flow-explorer .fi-watch-feed-head,
  #page-flow-explorer .fi-watch-reason,
  #page-flow-explorer .fi-watch-ref,
  #page-flow-explorer .fi-monitoring-summary,
  #page-flow-explorer .fi-rail-watchlist-compact {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* Executive context — layout tools, investigation story, priority strip */
#page-flow-explorer .fi-executive-context {
  display: flex;
  flex-direction: column;
  gap: var(--fi-space-md);
  margin-bottom: var(--fi-space-lg);
  min-width: 0;
}

#page-flow-explorer .fi-panel-story-centerpiece.fi-panel-primary {
  border-color: rgba(20, 184, 166, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 40px rgba(0, 0, 0, 0.38);
}

#page-flow-explorer .fi-panel-story-centerpiece .fi-investigation-summary-body {
  font-size: var(--fi-font-body);
  line-height: var(--fi-leading-body);
  color: var(--text-dim);
}

#page-flow-explorer .fi-priority-strip--emphasis {
  opacity: 1;
  border-color: rgba(20, 184, 166, 0.34);
  background: linear-gradient(
    165deg,
    rgba(8, 28, 28, 0.96),
    rgba(6, 18, 18, 0.98)
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 28px rgba(0, 0, 0, 0.28);
}

#page-flow-explorer .flow-explorer-subpanel.panel {
  transition:
    border-color var(--fi-dur-slow) var(--fi-ease),
    box-shadow var(--fi-dur-slow) var(--fi-ease),
    opacity var(--fi-dur-slow) var(--fi-ease);
}

#page-flow-explorer .flow-explorer-subpanel.panel:hover {
  border-color: rgba(20, 184, 166, 0.34);
}

#page-flow-explorer .fi-panel-support-quiet {
  opacity: 0.93;
}

#page-flow-explorer .fi-panel-support-quiet .panel-head .header-subtitle,
#page-flow-explorer .fi-panel-support-quiet .fi-panel-sub--quiet {
  opacity: 0.42;
}

#page-flow-explorer .fi-panel-support-quiet:hover {
  opacity: 0.98;
}

#page-flow-explorer .fi-panel-hero-mass {
  border-color: rgba(20, 184, 166, 0.34);
}

#page-flow-explorer .fi-path-card,
#page-flow-explorer .fi-priority-card,
#page-flow-explorer .fi-ri-card {
  transition:
    border-color var(--fi-dur-slow) var(--fi-ease),
    box-shadow var(--fi-dur-slow) var(--fi-ease),
    opacity var(--fi-dur-slow) var(--fi-ease);
}

#page-flow-explorer .fi-path-card:hover,
#page-flow-explorer .fi-priority-card:hover,
#page-flow-explorer .fi-ri-card:hover {
  border-color: rgba(20, 184, 166, 0.34);
  opacity: 1;
}

#page-flow-explorer #fintel-command-strip {
  transition: border-color var(--fi-dur-slow) var(--fi-ease);
}

#page-flow-explorer #fintel-command-strip .fe-tb-label {
  opacity: 0.72;
}

#page-flow-explorer table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(148, 163, 184, 0.92);
  padding: 10px 8px;
  vertical-align: bottom;
}

#page-flow-explorer table tbody td {
  padding: 10px 8px;
  font-size: var(--fi-font-meta);
  line-height: var(--fi-leading-body);
  vertical-align: top;
}

#page-flow-explorer .fi-interactive-cell .fi-drill-label.mono,
#page-flow-explorer .fi-addr-hover-wrap .fi-drill-label.mono {
  max-width: min(200px, 32vw);
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

#page-flow-explorer .fi-data-refresh-flash {
  animation: fiExecRefreshFlash 0.52s ease-out;
}

@keyframes fiExecRefreshFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
  }
  35% {
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35),
      0 0 28px rgba(52, 211, 153, 0.12);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
  }
}

#page-flow-explorer .fi-priority-strip {
  border: 1px solid rgba(20, 184, 166, 0.34);
  border-radius: 14px;
  background: linear-gradient(
    165deg,
    rgba(8, 28, 28, 0.96),
    rgba(6, 18, 18, 0.98)
  );
  padding: var(--fi-panel-pad-y) var(--fi-panel-pad-x);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#page-flow-explorer .fi-priority-strip-head {
  display: grid;
  align-items: center;
  column-gap: var(--fi-panel-head-col-gap, 24px);
  row-gap: 8px;
  margin-bottom: var(--fi-space-md, 12px);
  min-height: 40px;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
}

#page-flow-explorer .fi-priority-strip-head:has(> .fi-collapse-toggle) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

#page-flow-explorer .fi-priority-strip-title {
  font-size: var(--fi-section-title-size, 15px);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: #ede9fe;
  min-width: 0;
  text-align: left;
}

#page-flow-explorer .fi-priority-strip-sub {
  font-size: var(--fi-unified-helper-size, 12px);
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(226, 232, 240, 0.82);
  margin: 0;
  justify-self: end;
  text-align: right;
  line-height: 1.4;
}

#page-flow-explorer .fi-priority-strip-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x proximity;
}

#page-flow-explorer .fi-priority-strip-empty {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 720px;
}

#page-flow-explorer .fi-priority-card {
  flex: 0 0 min(300px, 85vw);
  scroll-snap-align: start;
  border-radius: 12px;
  padding: 12px 12px 10px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

#page-flow-explorer .fi-priority-card:focus-visible {
  outline: 2px solid rgba(20, 184, 166, 0.34);
  outline-offset: 2px;
}

#page-flow-explorer .fi-priority-card.fi-priority-sev-high {
  border-color: rgba(248, 113, 113, 0.45);
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.12);
}

#page-flow-explorer .fi-priority-card.fi-priority-sev-watch {
  border-color: rgba(251, 191, 36, 0.4);
}

#page-flow-explorer .fi-priority-card.fi-priority-sev-info {
  border-color: rgba(94, 234, 212, 0.28);
}

#page-flow-explorer .fi-priority-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-bottom: 8px;
}

#page-flow-explorer .fi-priority-icon {
  font-size: 14px;
  opacity: 0.9;
}

#page-flow-explorer .fi-priority-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #e2e8f0;
}

#page-flow-explorer .fi-priority-pill {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

#page-flow-explorer .fi-priority-conf {
  font-size: 10px;
  color: #94a3b8;
  margin-left: auto;
}

#page-flow-explorer .fi-priority-pin-btn {
  border: none;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
}

#page-flow-explorer .fi-priority-pin-btn:hover {
  background: rgba(20, 184, 166, 0.18);
}

#page-flow-explorer .fi-priority-line {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #e2e8f0;
  font-weight: 500;
}

#page-flow-explorer .fi-layout-tool-btn {
  font-size: 11px;
  padding: 7px 12px;
}

#page-flow-explorer .fi-investigation-summary-panel {
  border-color: rgba(94, 234, 212, 0.28);
}

#page-flow-explorer .fi-investigation-summary-body {
  padding: 4px 0 2px;
}

#page-flow-explorer .fi-investigation-narrative-list {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 12px;
  line-height: 1.55;
  color: #e2e8f0;
}

#page-flow-explorer .fi-investigation-narrative-list li {
  margin-bottom: 6px;
}

#page-flow-explorer .fi-empty-state {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

#page-flow-explorer .fi-empty-state--neutral {
  border-left: 3px solid rgba(148, 163, 184, 0.4);
  padding-left: 12px;
}

#page-flow-explorer .fi-empty-state--subtle {
  opacity: 0.92;
}

/* Polished empty-state shell (demos & sparse data) */
#page-flow-explorer .fi-empty-state-card {
  border-radius: 14px;
  border: 1px solid rgba(20, 184, 166, 0.22);
  background: linear-gradient(165deg, rgba(8, 28, 28, 0.55), rgba(6, 18, 18, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 14px 16px 16px;
  max-width: 100%;
  box-sizing: border-box;
}

#page-flow-explorer .fi-empty-state-card--inline {
  padding: 12px 14px;
}

#page-flow-explorer .fi-empty-state-card .fi-empty-state {
  margin: 0;
}

#page-flow-explorer .fi-empty-state-card .fi-priority-strip-empty {
  margin: 0 0 8px 0;
  font-size: 13px;
  line-height: 1.45;
  color: #e2e8f0;
}

#page-flow-explorer .fi-empty-state-hint {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(148, 163, 184, 0.95);
}

#page-flow-explorer .fi-rail-queue-block {
  margin-bottom: 10px;
}

#page-flow-explorer .fi-rail-queue-k {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5eead4;
  margin-bottom: 4px;
}

#page-flow-explorer .fi-rail-queue-hint {
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-dim);
}

#page-flow-explorer .fi-rail-queue-muted {
  font-size: 10px;
  color: var(--text-faint);
}

#page-flow-explorer .fi-rail-pin-line {
  font-size: 10px;
  padding: 6px 8px;
  margin-bottom: 4px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

#page-flow-explorer .fi-rail-recent-row {
  margin-bottom: 4px;
}

#page-flow-explorer .fi-rail-recent-drill {
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(8, 28, 28, 0.5);
  color: #e2e8f0;
  cursor: pointer;
}

#page-flow-explorer .fi-rail-recent-drill:hover {
  border-color: rgba(20, 184, 166, 0.34);
}

#page-flow-explorer .fi-rail-risk-clip {
  margin: 0;
  font-size: 10px;
  color: #fecaca;
}

#page-flow-explorer .fi-rail-feed-line-item--enter {
  animation: fiRailFeedIn 0.38s ease-out;
}

@keyframes fiRailFeedIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tables — sticky header + hover */
#page-flow-explorer .fintel-primary-stack table {
  border-collapse: collapse;
}

#page-flow-explorer .fintel-primary-stack .panel thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(8, 28, 28, 0.96);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

#page-flow-explorer .fintel-primary-stack tbody tr {
  transition: background 0.12s ease;
}

#page-flow-explorer .fintel-primary-stack tbody tr:hover {
  background: rgba(20, 184, 166, 0.08);
}

/* Graph — edge emphasis (interaction) */
#page-flow-explorer #feGraphSvg .frtg-edge-group {
  transition: opacity 0.16s ease;
}

#page-flow-explorer #feGraphSvg .frtg-edge-group.frtg-edge--muted {
  opacity: 0.14;
}

#page-flow-explorer #feGraphSvg .frtg-scene.frtg-live-pulse {
  animation: fiGraphScenePulse 0.42s ease-out;
}

#page-flow-explorer .flow-graph-scale-note {
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 7;
  max-width: min(280px, calc(100% - 20px));
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.35;
  color: #94a3b8;
  pointer-events: none;
  box-sizing: border-box;
  background: rgba(8, 28, 28, 0.78);
  border-radius: 8px;
  border: 1px solid rgba(20, 184, 166, 0.22);
}

@keyframes fiGraphScenePulse {
  0% {
    filter: brightness(1);
  }
  40% {
    filter: brightness(1.06);
  }
  100% {
    filter: brightness(1);
  }
}

@media (max-width: 1100px) {
  #page-flow-explorer .fi-rail-sticky {
    position: relative;
    top: auto;
  }
}

/* ===== Forensic cosmetic alignment — typography + spacing + tables (visual only) ===== */
#page-flow-explorer {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  --fi-title-size: 15px;
  --fi-title-weight: 600;
  --fi-panel-title-color: #f8fafc;
  --fi-subtitle-size: 10px;
  --fi-meta-label-size: 10px;
  --fi-meta-value-size: 12px;
  --fi-kv-label-opacity: 0.68;
  --fi-table-size: 11px;
  --fi-table-head-size: 9px;
  --fi-mono-size: 10px;
  --fi-ts-size: 11px;
  --fi-line-tight: 1.45;
  --fi-line-body: 1.5;
  --fi-panel-pad-x: 14px;
  --fi-panel-pad-y: 14px;
  /* Phase 11 — investigation column rhythm (tighter, still airy) */
  --fi-stack-gap: 14px;
  --fi-table-cell-pad-y: 11px;
  --fi-table-cell-pad-x: 12px;
  /* Phase 6 — table row rhythm */
  --fi-table-row-min-h: 42px;
  /* Phase 7 — severity + hero */
  --fi-sev-low: #94b8d9;
  --fi-sev-low-dim: rgba(148, 180, 217, 0.35);
  --fi-sev-medium: #fbbf24;
  --fi-sev-medium-dim: rgba(251, 191, 36, 0.32);
  --fi-sev-high: #fb923c;
  --fi-sev-high-dim: rgba(251, 146, 60, 0.35);
  --fi-sev-critical: #f87171;
  --fi-sev-critical-dim: rgba(248, 113, 113, 0.38);
  --fi-section-title-size: 15px;
  --fi-hero-title-size: 18px;
  --fi-unified-helper-size: 12px;
  --fi-unified-helper-opacity: 0.78;
  --fi-unified-eyebrow-size: 11px;
  --fi-panel-head-min-h: 44px;
  --fi-header-row-gap: 10px 18px;
  /* Shared header column gap — helpers align to one right edge */
  --fi-panel-head-col-gap: 24px;
}

#page-flow-explorer .fintel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, min(380px, 34vw));
  gap: var(--fi-stack-gap);
  align-items: stretch;
  margin-bottom: var(--fi-stack-gap);
  min-width: 0;
}

@media (max-width: 1100px) {
  #page-flow-explorer .fintel-layout {
    grid-template-columns: 1fr;
  }
}

#page-flow-explorer .fintel-layout > * {
  min-width: 0;
}

#page-flow-explorer .fintel-primary-stack {
  gap: var(--fi-stack-gap);
}

#page-flow-explorer .flow-explorer-side-stack {
  display: flex;
  flex-direction: column;
  gap: var(--fi-stack-gap);
  min-width: 0;
  max-width: 100%;
}

#page-flow-explorer .panel.flow-explorer-subpanel .panel-head {
  padding: var(--fi-panel-pad-y) var(--fi-panel-pad-x);
  margin: 0;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  display: grid;
  align-items: center;
  column-gap: var(--fi-panel-head-col-gap, 24px);
  row-gap: 8px;
  min-height: var(--fi-panel-head-min-h, 44px);
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
}

#page-flow-explorer .panel.flow-explorer-subpanel .panel-head:has(> .fi-collapse-toggle) {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

/* Advanced — unified flex headers (titles + helpers share one baseline; Simple unchanged) */
#page-flow-explorer[data-fi-ux-mode="advanced"] {
  --fi-panel-pad-x: 18px;
}

#page-flow-explorer[data-fi-ux-mode="advanced"]
  .panel.flow-explorer-subpanel
  .panel-head.advanced-panel-header,
#page-flow-explorer[data-fi-ux-mode="advanced"]
  .panel.flow-explorer-subpanel.fi-rail-live-panel
  .panel-head.advanced-panel-header {
  display: flex !important;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  gap: 16px;
  padding: 14px 18px 10px 18px;
  margin: 0;
  box-sizing: border-box;
  grid-template-columns: unset !important;
  row-gap: 0;
}

#page-flow-explorer[data-fi-ux-mode="advanced"]
  .panel.flow-explorer-subpanel
  .panel-head.advanced-panel-header
  > .fi-collapse-toggle {
  flex-shrink: 0;
  align-self: center;
}

#page-flow-explorer[data-fi-ux-mode="advanced"] .fi-priority-strip-head.advanced-panel-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  gap: 16px;
  margin-bottom: var(--fi-space-md, 12px);
  grid-template-columns: unset !important;
  row-gap: 0;
}

#page-flow-explorer[data-fi-ux-mode="advanced"]
  .fi-priority-strip-head.advanced-panel-header
  > .fi-collapse-toggle {
  flex-shrink: 0;
  align-self: center;
}

#page-flow-explorer[data-fi-ux-mode="advanced"] .fi-primary-hero-head.advanced-panel-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  gap: 16px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

#page-flow-explorer[data-fi-ux-mode="advanced"] .advanced-panel-header .advanced-panel-title-wrap {
  display: flex;
  align-items: center;
  min-width: 0;
}

#page-flow-explorer[data-fi-ux-mode="advanced"]
  .advanced-panel-header
  .advanced-panel-title-wrap.fi-primary-hero-head-text {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  flex: 1 1 auto;
}

#page-flow-explorer[data-fi-ux-mode="advanced"] .advanced-panel-header .advanced-panel-title-wrap:not(.fi-primary-hero-head-text) {
  flex: 0 1 auto;
}

#page-flow-explorer[data-fi-ux-mode="advanced"] .advanced-panel-header .advanced-panel-title,
#page-flow-explorer[data-fi-ux-mode="advanced"] .advanced-panel-header .panel-title.advanced-panel-title,
#page-flow-explorer[data-fi-ux-mode="advanced"]
  .advanced-panel-header
  .fi-priority-strip-title.advanced-panel-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.02em;
}

#page-flow-explorer[data-fi-ux-mode="advanced"]
  .advanced-panel-header
  h2.fi-primary-hero-title.advanced-panel-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-flow-explorer[data-fi-ux-mode="advanced"] .advanced-panel-header .advanced-panel-title.fi-ux-dual-title {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35em;
}

#page-flow-explorer[data-fi-ux-mode="advanced"]
  .advanced-panel-header
  .advanced-panel-title.fi-ux-dual-title
  > span {
  white-space: nowrap;
}

#page-flow-explorer[data-fi-ux-mode="advanced"] .advanced-panel-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#page-flow-explorer[data-fi-ux-mode="advanced"] .advanced-panel-subtitle,
#page-flow-explorer[data-fi-ux-mode="advanced"]
  .advanced-panel-header
  .fi-priority-strip-sub.advanced-panel-subtitle,
#page-flow-explorer[data-fi-ux-mode="advanced"]
  .advanced-panel-header-right
  .fi-panel-sub,
#page-flow-explorer[data-fi-ux-mode="advanced"]
  .advanced-panel-header-right
  .fi-panel-sub-inline,
#page-flow-explorer[data-fi-ux-mode="advanced"]
  .advanced-panel-header-right
  .fi-rail-head-sub,
#page-flow-explorer[data-fi-ux-mode="advanced"]
  .advanced-panel-header-right
  .fi-card-subtitle,
#page-flow-explorer[data-fi-ux-mode="advanced"]
  .advanced-panel-header-right
  .fi-section-helper {
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  opacity: 0.48;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  max-width: 55%;
  margin: 0;
  justify-self: auto;
  color: rgba(226, 232, 240, 0.92);
}

#page-flow-explorer .panel.flow-explorer-subpanel .panel-head > .panel-title {
  min-width: 0;
  text-align: left;
}

#page-flow-explorer .panel.flow-explorer-subpanel .panel-head .fi-panel-sub,
#page-flow-explorer .panel.flow-explorer-subpanel .panel-head .fi-panel-sub-inline,
#page-flow-explorer .panel.flow-explorer-subpanel .panel-head .fi-rail-head-sub,
#page-flow-explorer .panel.flow-explorer-subpanel .panel-head .fi-card-subtitle,
#page-flow-explorer .panel.flow-explorer-subpanel .panel-head .fi-section-helper {
  margin: 0;
  justify-self: end;
  text-align: right;
  font-size: var(--fi-unified-helper-size, 12px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(203, 213, 225, var(--fi-unified-helper-opacity, 0.78));
  line-height: 1.35;
}

#page-flow-explorer .fi-panel-primary .panel.flow-explorer-subpanel .panel-head .panel-title,
#page-flow-explorer .fi-panel-head-strong .panel-title {
  font-size: var(--fi-section-title-size);
  font-weight: var(--fi-title-weight);
  letter-spacing: -0.02em;
  line-height: var(--fi-line-tight);
}

#page-flow-explorer .fi-panel-secondary .panel.flow-explorer-subpanel .panel-head .panel-title {
  font-size: var(--fi-section-title-size);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--fi-line-tight);
}

/* Phase 11 — scan hierarchy: section titles slightly brighter than body */
#page-flow-explorer .panel.flow-explorer-subpanel .panel-head .panel-title {
  color: var(--fi-panel-title-color, var(--text));
}

#page-flow-explorer .panel.flow-explorer-subpanel > :not(.panel-head) {
  padding-left: var(--fi-panel-pad-x);
  padding-right: var(--fi-panel-pad-x);
  box-sizing: border-box;
}

#page-flow-explorer .panel.flow-explorer-subpanel > :not(.panel-head):first-of-type {
  padding-top: var(--fi-body-after-header-pad, 10px);
}

#page-flow-explorer .panel.flow-explorer-subpanel > :not(.panel-head):last-child {
  padding-bottom: calc(var(--fi-panel-pad-y) + 2px);
}

#page-flow-explorer .fintel-primary-stack .kv {
  display: grid;
  grid-template-columns: minmax(128px, 44%) minmax(0, 1fr);
  gap: 9px 16px;
  align-items: center;
  padding: 11px 0;
  margin: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  font-size: var(--fi-meta-value-size);
  line-height: var(--fi-line-body);
}

#page-flow-explorer .fintel-primary-stack .kv .k {
  font-size: var(--fi-meta-label-size);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, var(--fi-kv-label-opacity, 0.68));
  line-height: var(--fi-line-tight);
}

#page-flow-explorer .fintel-primary-stack .kv .v {
  font-size: var(--fi-meta-value-size);
  line-height: var(--fi-line-body);
  text-align: right;
  word-break: break-word;
  font-weight: 500;
  color: #e8edf4;
  font-variant-numeric: tabular-nums;
}

#page-flow-explorer .flow-explorer-subpanel table {
  font-size: var(--fi-table-size);
  line-height: var(--fi-line-tight);
  width: 100%;
}

#page-flow-explorer .flow-explorer-subpanel table th,
#page-flow-explorer .flow-explorer-subpanel table td {
  padding: var(--fi-table-cell-pad-y) var(--fi-table-cell-pad-x);
  vertical-align: middle;
  line-height: var(--fi-line-tight);
}

#page-flow-explorer .flow-explorer-subpanel table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(148, 163, 184, 0.92);
  vertical-align: middle;
  white-space: nowrap;
}

#page-flow-explorer .flow-explorer-subpanel table tbody tr {
  min-height: var(--fi-table-row-min-h, 36px);
}

#page-flow-explorer .flow-explorer-subpanel table td.mono,
#page-flow-explorer .flow-explorer-subpanel table th.mono {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: var(--fi-mono-size);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

#page-flow-explorer .flow-explorer-subpanel .fi-drill-label,
#page-flow-explorer .flow-explorer-subpanel code {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
  font-size: var(--fi-mono-size);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

#page-flow-explorer .fi-timeline-row td,
#page-flow-explorer .fi-case-tl-row td {
  vertical-align: middle;
  padding: var(--fi-table-cell-pad-y) var(--fi-table-cell-pad-x);
}

#page-flow-explorer .fi-timeline-burst td,
#page-flow-explorer .fi-timeline-day td {
  vertical-align: middle;
}

#page-flow-explorer .fi-behavior-summary-list {
  font-size: var(--fi-meta-value-size);
  line-height: var(--fi-line-body);
  padding-left: 20px;
  margin: 0;
}

#page-flow-explorer .fi-behavior-summary-list li {
  margin-bottom: 8px;
}

#page-flow-explorer .fi-investigation-summary-body {
  padding: 8px 0 4px;
  font-size: var(--fi-meta-value-size);
  line-height: var(--fi-line-body);
}

#page-flow-explorer .fi-investigation-narrative-list {
  font-size: var(--fi-meta-value-size);
  line-height: var(--fi-line-body);
  padding-left: 20px;
}

#page-flow-explorer .fi-investigation-narrative-list li {
  margin-bottom: 8px;
}

#page-flow-explorer .fi-cov-grid {
  gap: 14px;
}

#page-flow-explorer .fi-cov-row {
  gap: 12px;
  align-items: center;
}

#page-flow-explorer .fi-muted-banner {
  font-size: var(--fi-meta-label-size);
  line-height: var(--fi-line-body);
  padding: 10px 12px;
  margin-bottom: 10px;
}

#page-flow-explorer .fi-risk-badge {
  min-height: 28px;
  padding: 6px 12px;
  font-size: 11px;
  line-height: 1.2;
  align-items: center;
}

#page-flow-explorer .fi-inv-sig-sev,
#page-flow-explorer .fi-priority-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  box-sizing: border-box;
}

#page-flow-explorer .fi-path-partial-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  box-sizing: border-box;
}

#page-flow-explorer .fi-inv-sig-ts,
#page-flow-explorer .fi-live-feed-v,
#page-flow-explorer .fi-ri-dl dd {
  font-size: var(--fi-ts-size);
  color: var(--text-dim);
  line-height: var(--fi-line-tight);
}

#page-flow-explorer .fi-rail-section .flow-explorer-subpanel .panel-head,
#page-flow-explorer .fi-rail-live-panel .panel-head {
  padding: var(--fi-panel-pad-y) var(--fi-panel-pad-x);
}

#page-flow-explorer .fi-rail-metric {
  padding: 8px 10px;
  gap: 4px;
}

#page-flow-explorer .fi-rail-subblock {
  margin-top: 10px;
}

#page-flow-explorer .fi-rail-subblock:first-child {
  margin-top: 0;
}

#page-flow-explorer .fi-trace-summary-stack {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 720px) {
  #page-flow-explorer {
    --fi-panel-pad-x: 12px;
    --fi-table-cell-pad-x: 10px;
  }

  #page-flow-explorer .fintel-primary-stack .kv {
    grid-template-columns: 1fr;
    align-items: start;
  }

  #page-flow-explorer .fintel-primary-stack .kv .v {
    text-align: left;
  }
}

/* ===== Forensic data tables — full width + column rhythm (Case Timeline baseline) ===== */
#page-flow-explorer .fintel-primary-stack .flow-explorer-subpanel > div[style*="overflow-x"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#page-flow-explorer .fintel-primary-stack .flow-explorer-subpanel > .fi-forensic-table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: var(--forensic-table-scroll-margin-top, 8px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  container-type: inline-size;
  container-name: fi-tbl;
  border-radius: 10px;
}

#page-flow-explorer .fintel-primary-stack .flow-explorer-subpanel > div[style*="overflow-x"] > table {
  width: 100%;
  min-width: 100%;
  max-width: none;
  border-collapse: collapse;
  box-sizing: border-box;
}

#page-flow-explorer .fintel-primary-stack .flow-explorer-subpanel > .fi-forensic-table-scroll > table {
  width: 100%;
  min-width: 100%;
  max-width: none;
  border-collapse: collapse;
  box-sizing: border-box;
}

#page-flow-explorer .fi-top-dest-src-scroll > table {
  min-width: 720px;
}

#page-flow-explorer #fi-panel-case-timeline .fi-forensic-table-scroll > table {
  min-width: 880px;
}

#page-flow-explorer .fintel-primary-stack .flow-explorer-subpanel > .fi-forensic-table-scroll > table:has(#flow-top-flows-tbody),
#page-flow-explorer .fintel-primary-stack .flow-explorer-subpanel > .fi-forensic-table-scroll > table:has(#fintel-contracts-tbody) {
  min-width: 960px;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-contracts-tbody),
#page-flow-explorer .fintel-primary-stack table:has(#flow-top-flows-tbody),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-dest-tbody),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-src-tbody) {
  table-layout: fixed;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) .fi-addr-hover-wrap,
#page-flow-explorer .fintel-primary-stack table:has(#fintel-contracts-tbody) .fi-addr-hover-wrap,
#page-flow-explorer .fintel-primary-stack table:has(#flow-top-flows-tbody) .fi-addr-hover-wrap,
#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-dest-tbody) .fi-addr-hover-wrap,
#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-src-tbody) .fi-addr-hover-wrap,
#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) .fi-addr-hover-wrap {
  min-width: 0;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) th,
#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) th:nth-child(1),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) td:nth-child(1) {
  width: 10%;
  white-space: normal;
  word-break: break-word;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) th:nth-child(2),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) td:nth-child(2) {
  width: 11%;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) th:nth-child(5),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) td:nth-child(5) {
  width: 11%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) th:nth-child(6),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) td:nth-child(6) {
  width: 26%;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) th:nth-child(7),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) td:nth-child(7) {
  width: 9%;
  min-width: 4.5rem;
  white-space: normal;
  text-align: center;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#page-flow-explorer .fintel-primary-stack table:has(#flow-top-flows-tbody) th:nth-child(3),
#page-flow-explorer .fintel-primary-stack table:has(#flow-top-flows-tbody) td:nth-child(3) {
  width: 6%;
  text-align: center;
  white-space: nowrap;
}

#page-flow-explorer .fintel-primary-stack table:has(#flow-top-flows-tbody) th:nth-child(4),
#page-flow-explorer .fintel-primary-stack table:has(#flow-top-flows-tbody) td:nth-child(4),
#page-flow-explorer .fintel-primary-stack table:has(#flow-top-flows-tbody) th:nth-child(5),
#page-flow-explorer .fintel-primary-stack table:has(#flow-top-flows-tbody) td:nth-child(5),
#page-flow-explorer .fintel-primary-stack table:has(#flow-top-flows-tbody) th:nth-child(6),
#page-flow-explorer .fintel-primary-stack table:has(#flow-top-flows-tbody) td:nth-child(6) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-dest-tbody) th:nth-child(3),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-dest-tbody) td:nth-child(3),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-dest-tbody) th:nth-child(4),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-dest-tbody) td:nth-child(4) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-dest-tbody) th:nth-child(5),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-dest-tbody) td:nth-child(5) {
  white-space: nowrap;
  min-width: 10rem;
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-dest-tbody) th:nth-child(1),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-dest-tbody) td:nth-child(1) {
  width: 22%;
  min-width: 9rem;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-src-tbody) th:nth-child(1),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-src-tbody) td:nth-child(1) {
  width: 20%;
  min-width: 9rem;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-src-tbody) th:nth-child(5),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-src-tbody) td:nth-child(5),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-src-tbody) th:nth-child(6),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-src-tbody) td:nth-child(6) {
  min-width: 9rem;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-flow-explorer .fi-case-timeline-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 8px 0 6px;
}

/* Phase 20 — trace replay (timeline rows only; no graph mutation) */
#page-flow-explorer .fi-replay-wrap {
  flex: 1 1 100%;
  min-width: 0;
}

#page-flow-explorer .fi-replay-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

#page-flow-explorer .fi-replay-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#page-flow-explorer .fi-replay-btn {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 12px;
}

#page-flow-explorer .fi-replay-readout {
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
}

#page-flow-explorer .fi-replay-step-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 2px;
}

#page-flow-explorer .fi-replay-readout-simple {
  margin: 0;
  color: var(--text);
  font-weight: 500;
}

#page-flow-explorer .fi-replay-readout-adv {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--text-dim);
  white-space: pre-wrap;
  word-break: break-word;
}

#page-flow-explorer .fi-case-tl-row.fi-replay-active {
  outline: 2px solid rgba(96, 165, 250, 0.55);
  outline-offset: -2px;
  background: rgba(96, 165, 250, 0.09);
}

#page-flow-explorer .fi-path-card.fi-path-card--replay-active {
  outline: 2px solid rgba(96, 165, 250, 0.5);
  outline-offset: 2px;
  border-radius: 10px;
}

@media (max-width: 520px) {
  #page-flow-explorer .fi-replay-btn-row {
    gap: 6px;
  }

  #page-flow-explorer .fi-replay-btn {
    flex: 1 1 auto;
    min-width: calc(50% - 4px);
    justify-content: center;
  }
}

#page-flow-explorer .fintel-two-col .fi-top-dest-src-scroll {
  margin-top: 8px;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-dest-tbody) th:nth-child(6),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-dest-tbody) td:nth-child(6) {
  width: 7%;
  text-align: center;
  white-space: nowrap;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-src-tbody) th:nth-child(4),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-src-tbody) td:nth-child(4) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-src-tbody) th:nth-child(7),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-top-src-tbody) td:nth-child(7) {
  width: 7%;
  text-align: center;
  white-space: nowrap;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) th:nth-child(4),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) td:nth-child(4),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) th:nth-child(5),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) td:nth-child(5),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-contracts-tbody) th:nth-child(4),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-contracts-tbody) td:nth-child(4),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-contracts-tbody) th:nth-child(5),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-contracts-tbody) td:nth-child(5) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) th:nth-child(6),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) td:nth-child(6),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) th:nth-child(7),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) td:nth-child(7),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-contracts-tbody) th:nth-child(6),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-contracts-tbody) td:nth-child(6),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-contracts-tbody) th:nth-child(7),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-contracts-tbody) td:nth-child(7) {
  text-align: center;
  white-space: nowrap;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) th:nth-child(8),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) td:nth-child(8),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-contracts-tbody) th:nth-child(8),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-contracts-tbody) td:nth-child(8) {
  width: 18%;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) th:nth-child(9),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) td:nth-child(9),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) th:nth-child(10),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) td:nth-child(10),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-contracts-tbody) th:nth-child(9),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-contracts-tbody) td:nth-child(9),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-contracts-tbody) th:nth-child(10),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-contracts-tbody) td:nth-child(10) {
  width: 8%;
  white-space: nowrap;
  font-size: 10px;
}

/* Forensic UX cleanup: connected wallets, case timeline — alignment + hash ellipsis */
#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) th,
#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) td,
#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) th,
#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) td {
  padding: 8px 10px;
  vertical-align: top;
  box-sizing: border-box;
  min-width: 0;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) td:nth-child(1),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) th:nth-child(1) {
  width: 16%;
  min-width: 8.5rem;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) td:nth-child(3),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) th:nth-child(3),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) td:nth-child(4),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) th:nth-child(4) {
  width: 12%;
  min-width: 6.5rem;
  max-width: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) td:nth-child(6),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-case-timeline-tbody) th:nth-child(6) {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) td:nth-child(8),
#page-flow-explorer .fintel-primary-stack table:has(#fintel-connected-tbody) th:nth-child(8) {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

/* —— Connected wallets table: layout only (#fi-panel-connected-wallets; does not affect Related contracts) —— */
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin-top: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  container-type: inline-size;
  container-name: fi-cw;
  border-radius: 10px;
}

#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table {
  table-layout: fixed;
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
  box-sizing: border-box;
}

#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table th,
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table td {
  padding: 10px 12px;
  vertical-align: top;
  line-height: 1.35;
  box-sizing: border-box;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table th:nth-child(1),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table td:nth-child(1) {
  width: 15%;
  min-width: 168px;
  max-width: none;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table th:nth-child(2),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table td:nth-child(2),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table th:nth-child(3),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table td:nth-child(3) {
  width: 11%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table th:nth-child(4),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table td:nth-child(4),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table th:nth-child(5),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table td:nth-child(5),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table th:nth-child(6),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table td:nth-child(6),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table th:nth-child(7),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table td:nth-child(7) {
  text-align: inherit;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table th:nth-child(4),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table td:nth-child(4),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table th:nth-child(5),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table td:nth-child(5) {
  text-align: right;
}

#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table th:nth-child(6),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table td:nth-child(6),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table th:nth-child(7),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table td:nth-child(7) {
  text-align: center;
}

#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table th:nth-child(8),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table td:nth-child(8) {
  width: 220px;
  max-width: 220px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table th:nth-child(9),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table td:nth-child(9),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table th:nth-child(10),
#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table td:nth-child(10) {
  min-width: 150px;
  width: 11%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

#page-flow-explorer #fi-panel-connected-wallets .fi-connected-wallets-table td:nth-child(1) .fi-addr-hover-wrap {
  min-width: 0;
}

/* Forensic polish pass (fi-forensic-polish.js) — skeleton tint, copy helpers (notice bars removed from DOM) */
#page-flow-explorer .fi-polish-panel-skeleton {
  position: relative;
  opacity: 0.92;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

#page-flow-explorer .fintel-primary-stack.fi-polish-panel-skeleton::before,
#page-flow-explorer .flow-explorer-side-stack.fi-polish-panel-skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 40;
  border-radius: 12px;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 42%,
    rgba(20, 184, 166, 0.09) 50%,
    transparent 58%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: fiPolishShimmer 1.15s ease-in-out infinite;
}

@keyframes fiPolishShimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

#page-flow-explorer .fi-polish-copy-btn {
  font-size: 10px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}

#page-flow-explorer .fi-hero-copy-btn {
  margin-top: 4px;
  align-self: flex-start;
}

@media (max-width: 720px) {
  #page-flow-explorer {
    overflow-x: hidden;
  }

  #page-flow-explorer .panel.flow-explorer-subpanel {
    max-width: 100%;
    min-width: 0;
    overflow-x: visible;
    box-sizing: border-box;
  }
}

/* —— Additive forensic enhancements (fi-forensic-enhancements.js) —— */
#page-flow-explorer .fi-enh-command-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 14px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: 12px;
  background: rgba(8, 28, 28, 0.55);
  max-width: 100%;
  box-sizing: border-box;
}

#page-flow-explorer .fi-enh-seed-trail-wrap {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#page-flow-explorer .fi-enh-meta-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-faint);
  flex-shrink: 0;
}

#page-flow-explorer .fi-enh-seed-trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

#page-flow-explorer .fi-enh-bc-chip {
  font-size: 10px;
  font-family: ui-monospace, monospace;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(20, 184, 166, 0.34);
  background: rgba(20, 184, 166, 0.12);
  color: #e2e8f0;
  cursor: pointer;
  max-width: 100%;
}

#page-flow-explorer .fi-enh-bc-chip:hover {
  border-color: rgba(94, 234, 212, 0.45);
}

#page-flow-explorer .fi-enh-bc-sep {
  color: #64748b;
  font-size: 11px;
  user-select: none;
}

#page-flow-explorer .fi-enh-bc-empty {
  font-size: 11px;
  color: var(--text-dim);
}

#page-flow-explorer .fi-enh-public-toggle-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
}

#page-flow-explorer .fi-enh-meta-hint {
  font-size: 10px;
  color: var(--text-faint);
  width: 100%;
}

#page-flow-explorer .fi-enh-panel .fi-enh-activity-timing-body ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
}

#page-flow-explorer .fi-enh-intel-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
}

#page-flow-explorer .fi-enh-intel-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 6px;
}

#page-flow-explorer .fi-enh-intel-k {
  color: var(--text-faint);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 9px;
}

#page-flow-explorer .fi-enh-intel-v {
  color: #e2e8f0;
  text-align: right;
  max-width: 100%;
  word-break: break-word;
}

#page-flow-explorer .fi-enh-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
  font-size: 11px;
}

#page-flow-explorer .fi-enh-field-k {
  color: var(--text-dim);
}

#page-flow-explorer .fi-enh-input,
#page-flow-explorer .fi-enh-textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
}

#page-flow-explorer .fi-enh-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

#page-flow-explorer .fi-enh-snapshots-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#page-flow-explorer .fi-enh-snap-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#page-flow-explorer .fi-enh-snap-title {
  flex: 1 1 160px;
  min-width: 0;
  word-break: break-word;
  font-family: ui-monospace, monospace;
  color: var(--text-dim);
}

#page-flow-explorer .fi-enh-snap-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

#page-flow-explorer .fi-enh-snap-actions .btn {
  font-size: 11px;
  padding: 4px 10px;
}

#page-flow-explorer .fi-enh-mini-copy {
  font-size: 11px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

#page-flow-explorer .fi-enh-explain-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

#page-flow-explorer .fi-enh-explain-btn {
  font-size: 10px;
  padding: 2px 8px;
  line-height: 1.2;
}

#page-flow-explorer .fi-enh-explain-panel {
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-dim);
  max-width: 280px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(8, 28, 28, 0.96);
  border: 1px solid rgba(20, 184, 166, 0.25);
}

#page-flow-explorer .fi-priority-card-head .fi-enh-explain-wrap,
#page-flow-explorer .fi-inv-sig-head .fi-enh-explain-wrap {
  margin-left: auto;
}

#page-flow-explorer .fi-inv-sig-head {
  flex-wrap: wrap;
}

#page-flow-explorer .fi-enh-rel-tags {
  display: block;
  font-size: 9px;
  color: #5eead4;
  margin-top: 4px;
  line-height: 1.35;
}

#page-flow-explorer .fi-enh-route-rel-tags--route {
  margin: 6px 0 0 0;
  font-size: 10px;
  color: #5eead4;
}

#page-flow-explorer.fi-enh-public-view .fi-ri-dl,
#page-flow-explorer.fi-enh-public-view .fi-ri-neighbor-hint {
  display: none !important;
}

#page-flow-explorer.fi-enh-public-view .fi-inv-sig-meta,
#page-flow-explorer.fi-enh-public-view .fi-sig-center-meta {
  display: none !important;
}

#page-flow-explorer.fi-enh-public-view .fi-priority-conf {
  display: none !important;
}

/* ===== Phase 7 — premium hierarchy, hero strip, path story cards, severity ===== */
#page-flow-explorer .fi-panel-sub--quiet,
#page-flow-explorer span.fi-panel-sub-inline.fi-panel-sub--quiet {
  color: rgba(148, 163, 184, 0.82) !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

#page-flow-explorer span.fi-panel-sub-inline {
  display: inline-block;
  font-size: var(--fi-unified-helper-size, 12px);
  vertical-align: middle;
}

#page-flow-explorer .panel.flow-explorer-subpanel .panel-head span.fi-panel-sub-inline {
  margin-left: 0;
}

#page-flow-explorer[data-fi-ux-mode="advanced"] .fi-panel-sub.fi-ux-dual-sub.fi-panel-sub--quiet {
  opacity: 0.9;
}

#page-flow-explorer .fi-cluster-primary {
  gap: 16px;
}

#page-flow-explorer .fi-cluster-secondary {
  gap: 14px;
}

#page-flow-explorer .fi-primary-hero {
  margin: 0 0 2px;
  padding: 16px 18px 18px;
  border-radius: 16px;
  border: 1px solid rgba(20, 184, 166, 0.28);
  background: linear-gradient(
    145deg,
    rgba(8, 28, 28, 0.96),
    rgba(6, 18, 18, 0.98)
  );
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#page-flow-explorer .fi-primary-hero-head {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

#page-flow-explorer .fi-primary-hero-kicker {
  display: block;
  font-size: var(--fi-unified-eyebrow-size, 11px);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
  color: rgba(94, 234, 212, 0.78);
  margin-bottom: 6px;
}

#page-flow-explorer .fi-section-eyebrow {
  display: block;
  font-size: var(--fi-unified-eyebrow-size, 11px);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
  color: rgba(94, 234, 212, 0.9);
  margin-bottom: 6px;
}

#page-flow-explorer .fi-primary-hero-title {
  margin: 0;
  font-size: var(--fi-hero-title-size);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #f8fafc;
  line-height: 1.2;
}

#page-flow-explorer .fi-primary-hero-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: stretch;
}

@media (max-width: 1100px) {
  #page-flow-explorer .fi-primary-hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  #page-flow-explorer .fi-primary-hero-grid {
    grid-template-columns: 1fr;
  }
}

#page-flow-explorer .fi-hero-tile {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(148, 163, 184, 0.12);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#page-flow-explorer .fi-hero-tile--focus {
  border-color: rgba(94, 234, 212, 0.35);
  background: rgba(45, 212, 191, 0.06);
}

#page-flow-explorer .fi-hero-tile--concern {
  border-color: rgba(251, 191, 36, 0.22);
}

#page-flow-explorer .fi-hero-tile--sev-low {
  border-color: rgba(148, 180, 217, 0.28);
}

#page-flow-explorer .fi-hero-tile--sev-medium {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.05);
}

#page-flow-explorer .fi-hero-tile--sev-high {
  border-color: rgba(251, 146, 60, 0.4);
  background: rgba(251, 146, 60, 0.06);
}

#page-flow-explorer .fi-hero-tile--sev-critical {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.07);
}

#page-flow-explorer .fi-hero-lab {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.95);
}

#page-flow-explorer .fi-hero-val {
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.35;
  word-break: break-word;
}

#page-flow-explorer .fi-sev-text {
  font-weight: 600;
}

#page-flow-explorer .fi-sev-text--low {
  color: var(--fi-sev-low);
}

#page-flow-explorer .fi-sev-text--medium {
  color: var(--fi-sev-medium);
}

#page-flow-explorer .fi-sev-text--high {
  color: var(--fi-sev-high);
}

#page-flow-explorer .fi-sev-text--critical {
  color: var(--fi-sev-critical);
}

#page-flow-explorer .fi-path-story {
  margin: 0 0 12px;
  min-width: 0;
}

#page-flow-explorer .fi-path-story-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
}

#page-flow-explorer .fi-path-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  color: #e2e8f0;
  background: rgba(8, 28, 28, 0.72);
  border: 1px solid rgba(20, 184, 166, 0.22);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-flow-explorer .fi-path-chip--focus {
  border-color: rgba(45, 212, 191, 0.45);
  background: rgba(13, 148, 136, 0.18);
  color: #ccfbf1;
}

#page-flow-explorer .fi-path-arrow {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 800;
  color: #5eead4;
  line-height: 1;
}

#page-flow-explorer .fi-path-route-hint {
  margin-top: 8px;
  font-size: 10px;
  color: rgba(94, 234, 212, 0.88);
  line-height: 1.4;
}

#page-flow-explorer .fi-path-route-hint.fi-graph-intel-hint {
  margin-top: 6px;
  min-width: 0;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
}

#page-flow-explorer .fi-graph-intel-kv {
  min-width: 0;
}

#page-flow-explorer .fi-graph-intel-kv .v {
  min-width: 0;
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

#page-flow-explorer .fi-path-card--sev-low {
  border-color: rgba(20, 184, 166, 0.22);
}

#page-flow-explorer .fi-path-card--sev-medium {
  border-color: rgba(251, 191, 36, 0.32);
}

#page-flow-explorer .fi-path-card--sev-high {
  border-color: rgba(251, 146, 60, 0.38);
}

#page-flow-explorer .fi-path-card--sev-critical {
  border-color: rgba(248, 113, 113, 0.42);
}

#page-flow-explorer .fi-path-why {
  font-size: 11px;
  color: rgba(203, 213, 225, 0.88);
}

#page-flow-explorer #fi-panel-active-signals.fi-panel-signals-priority {
  border-width: 1px;
  border-color: rgba(20, 184, 166, 0.34);
  box-shadow:
    0 14px 44px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

#page-flow-explorer .flow-explorer-subpanel.fi-panel-secondary {
  border-color: rgba(100, 116, 139, 0.16);
}

#page-flow-explorer .fi-live-intelligence-rail .fi-rail-block {
  padding: 7px 9px;
}

#page-flow-explorer .fi-live-intelligence-rail .fi-rail-cell {
  padding: 7px 9px;
}

#page-flow-explorer .fi-sev-pill.fi-sev-info {
  color: var(--fi-sev-low);
  border-color: var(--fi-sev-low-dim);
}

#page-flow-explorer .fi-sev-pill.fi-sev-watch {
  color: var(--fi-sev-medium);
  border-color: var(--fi-sev-medium-dim);
}

#page-flow-explorer .fi-sev-pill.fi-sev-elevated {
  color: var(--fi-sev-high);
  border-color: var(--fi-sev-high-dim);
}

#page-flow-explorer .fi-sev-pill.fi-sev-critical {
  color: var(--fi-sev-critical);
  border-color: var(--fi-sev-critical-dim);
}

#page-flow-explorer .fi-empty-hint {
  color: rgba(148, 163, 184, 0.95);
  font-weight: 500;
  font-size: 12px;
}

@media (max-width: 720px) {
  #page-flow-explorer .fi-enh-command-meta {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Dedicated PDF/print surface — populated by fintel-report-ui.js before window.print() */
#fi-print-report-root {
  display: none !important;
}

@media print {
  html,
  body {
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
  }

  body * {
    visibility: hidden !important;
  }

  #fi-print-report-root,
  #fi-print-report-root * {
    visibility: visible !important;
  }

  #fi-print-report-root {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    color: #111827 !important;
    overflow: visible !important;
  }

  #fi-print-report-root .fi-print-report-sheet {
    padding: 12px 16px 28px;
    font-size: 11pt;
    line-height: 1.45;
  }

  #fi-print-report-root h1,
  #fi-print-report-root h2 {
    color: #0f172a !important;
  }

  #fi-print-report-root .fi-print-title {
    font-size: 18pt !important;
    margin: 0 0 8px !important;
  }

  #fi-print-report-root .fi-print-lead,
  #fi-print-report-root p,
  #fi-print-report-root li,
  #fi-print-report-root td,
  #fi-print-report-root th,
  #fi-print-report-root dt,
  #fi-print-report-root dd {
    color: #111827 !important;
  }

  #fi-print-report-root .fi-print-muted {
    color: #475569 !important;
  }

  #fi-print-report-root .fi-report-table,
  #fi-print-report-root .fi-report-table th,
  #fi-print-report-root .fi-report-table td {
    border: 1px solid #cbd5e1 !important;
    background: #fff !important;
    color: #111827 !important;
  }

  #fi-print-report-root .fi-print-pre {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
  }

  #fi-print-report-root .fi-report-sec h2,
  #fi-print-report-root .fi-report-status-bar,
  #fi-print-report-root .fi-report-dl dt {
    color: #0f172a !important;
  }

  #fi-print-report-root .fi-report-dl dd {
    color: #111827 !important;
  }

  #fintel-report-modal {
    display: none !important;
    visibility: hidden !important;
  }
}

/* Demo presets kept in DOM for future Guided mode — not shown */
#page-flow-explorer .fi-demo-ui-anchor {
  display: none !important;
}

#page-flow-explorer #fintel-command-strip .fi-demo-inv-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

#page-flow-explorer .fi-demo-inv-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 80;
  width: min(380px, calc(100vw - 36px));
  padding: 12px 14px 14px;
  border-radius: 14px;
  border: 1px solid rgba(20, 184, 166, 0.35);
  background: linear-gradient(155deg, rgba(8, 28, 28, 0.98), rgba(6, 18, 18, 0.98));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

#page-flow-explorer .fi-demo-inv-lead {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
}

#page-flow-explorer .fi-demo-inv-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#page-flow-explorer .fi-demo-inv-actions .btn {
  justify-content: flex-start;
  text-align: left;
  font-size: 12px;
  padding: 9px 12px;
}

#page-flow-explorer .fi-ent-cell {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  vertical-align: middle;
}

#page-flow-explorer .fi-ent-badge {
  display: inline-flex;
  align-items: center;
  max-width: 220px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  border: 1px solid transparent;
}

#page-flow-explorer .fi-ent-badge--verified {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(74, 222, 128, 0.45);
  color: #bbf7d0;
}

#page-flow-explorer .fi-ent-badge--analyst {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.42);
  color: #fde68a;
}

#page-flow-explorer .fi-ent-badge--pattern {
  background: rgba(20, 184, 166, 0.14);
  border-color: rgba(20, 184, 166, 0.35);
  color: #ccfbf1;
}

#page-flow-explorer .fi-ent-dots {
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  opacity: 0.85;
}

#page-flow-explorer .fi-ent-cell--na {
  color: var(--text-dim);
}

#page-flow-explorer .fi-trace-freshness-strip {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

#page-flow-explorer .fi-trace-freshness-k {
  font-weight: 700;
  color: var(--text);
}

#page-flow-explorer .fi-investigation-story {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

#page-flow-explorer .fi-investigation-story-title {
  margin: 0 0 var(--fi-space-sm);
  font-size: var(--fi-font-subsection);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #f5f3ff;
}

#page-flow-explorer .fi-investigation-story-list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}

#page-flow-explorer .fi-investigation-story-list li + li {
  margin-top: 6px;
}

#page-flow-explorer .fi-investigation-narrative-list {
  margin-top: 8px;
}

#page-flow-explorer .fi-forensic-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.fi-report-product h2 {
  margin-top: 1.25rem;
}

.fi-report-plain-list,
.fi-report-story-list {
  font-size: 13px;
  line-height: 1.5;
}

/* --- Forensic section header system: semantic utilities (scope: #page-flow-explorer) --- */
#page-flow-explorer .fi-section-title,
#page-flow-explorer .fi-card-title {
  font-size: var(--fi-section-title-size);
  font-weight: var(--fi-title-weight);
  letter-spacing: -0.02em;
  line-height: var(--fi-line-tight);
  color: var(--fi-panel-title-color, var(--text));
}

#page-flow-explorer .fi-section-helper {
  font-size: var(--fi-unified-helper-size);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  color: rgba(226, 232, 240, var(--fi-unified-helper-opacity, 0.88));
}

#page-flow-explorer .panel.flow-explorer-subpanel .panel-head .fi-section-helper {
  text-align: right;
}

#page-flow-explorer .fi-card-subtitle {
  font-size: var(--fi-unified-helper-size);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  color: rgba(226, 232, 240, var(--fi-unified-helper-opacity, 0.88));
}

#page-flow-explorer .kv .k.fi-table-label,
#page-flow-explorer table .fi-table-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(148, 163, 184, 0.95);
}

#page-flow-explorer .kv .v.fi-table-value,
#page-flow-explorer table .fi-table-value {
  font-size: var(--fi-meta-value-size);
  font-weight: 500;
  line-height: var(--fi-line-body);
  color: #e2e8f0;
}

/* ========== Phase 11 — enterprise polish (visual only; scoped #page-flow-explorer) ========== */

/* Trace summary + metric cards — even vertical rhythm */
#page-flow-explorer .fi-trace-summary-stack {
  gap: 9px !important;
  padding-top: 2px !important;
}

/* Investigation narrative blocks — less loose vertical slack */
#page-flow-explorer .fi-investigation-summary-body {
  padding: 6px 0 2px;
}

#page-flow-explorer .fi-empty-state-card {
  padding: 12px 14px 14px;
}

#page-flow-explorer .fi-empty-state-card--inline {
  padding: 11px 13px;
}

/* Forensic tables — row separation + numeric scan */
#page-flow-explorer .flow-explorer-subpanel table tbody tr {
  border-bottom: 1px solid rgba(148, 163, 184, 0.07);
}

#page-flow-explorer .flow-explorer-subpanel table tbody tr:last-child {
  border-bottom: none;
}

#page-flow-explorer .flow-explorer-subpanel table tbody td {
  font-variant-numeric: tabular-nums;
}

#page-flow-explorer .flow-explorer-subpanel table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.88);
}

#page-flow-explorer .flow-explorer-subpanel table td.time,
#page-flow-explorer .flow-explorer-subpanel table .time {
  font-size: calc(var(--fi-table-size) + 0.5px);
  color: rgba(226, 232, 240, 0.94);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Primary hero — quieter labels, clearer values */
#page-flow-explorer .fi-hero-lab {
  color: rgba(148, 163, 184, 0.62);
}

#page-flow-explorer .fi-hero-val {
  color: #e8edf4;
  font-variant-numeric: tabular-nums;
}

/* Right rail — unified card rhythm + tab strip */
#page-flow-explorer .flow-explorer-side-stack.fi-operational-rail {
  gap: var(--fi-stack-gap);
}

#page-flow-explorer .fi-rail-tab-shell {
  gap: 10px;
}

#page-flow-explorer .fi-rail-tabs-scroll {
  padding-bottom: 8px;
}

#page-flow-explorer .fi-rail-tab {
  padding: 7px 12px;
  line-height: 1.2;
}

#page-flow-explorer .fi-rail-tab-panel {
  gap: var(--fi-stack-gap);
  padding: 6px 0 4px;
  box-sizing: border-box;
}

#page-flow-explorer .fi-rail-tab-lead {
  margin: 0 0 4px;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(148, 163, 184, 0.82);
  max-width: 100%;
  overflow-wrap: anywhere;
}

#page-flow-explorer .flow-explorer-side-stack .fi-rail-section.flow-explorer-subpanel > :not(.panel-head) {
  padding-top: 10px;
}

#page-flow-explorer .fi-rail-cell {
  gap: 5px;
  padding: 9px 11px;
}

#page-flow-explorer .fi-rail-block {
  padding: 9px 11px;
}

#page-flow-explorer .fi-rail-k {
  color: rgba(148, 163, 184, 0.62);
}

#page-flow-explorer .fi-rail-v {
  font-weight: 500;
  color: #e8edf4;
  font-variant-numeric: tabular-nums;
}

#page-flow-explorer .fi-rail-trace-filters-panel .panel-head + div {
  gap: 12px !important;
  padding-top: 2px;
  box-sizing: border-box;
}

#page-flow-explorer .fi-rail-live-panel .panel-head {
  min-height: var(--fi-panel-head-min-h, 44px);
}

/* Flow graph (SVG) — label legibility without layout changes */
#page-flow-explorer .frtg-svg text {
  font-family: ui-monospace, "JetBrains Mono", Consolas, monospace !important;
}

#page-flow-explorer .frtg-node text {
  paint-order: stroke fill;
  stroke: rgba(5, 3, 16, 0.92);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

#page-flow-explorer .frtg-hub-focus text {
  paint-order: stroke fill;
  stroke: rgba(12, 6, 24, 0.65);
  stroke-width: 2px;
  stroke-linejoin: round;
}

#page-flow-explorer .frtg-edge-group text {
  paint-order: stroke fill;
  stroke: rgba(5, 3, 16, 0.88);
  stroke-width: 2px;
}

#page-flow-explorer .fe-graph-inner .fe-legend {
  justify-content: center;
  gap: 16px 20px;
  padding: 11px 16px 12px;
}

#page-flow-explorer .fe-graph-inner .fe-legend .rl-item {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.88);
}

@media (max-width: 720px) {
  #page-flow-explorer .fi-rail-tabs {
    row-gap: 8px;
  }

  #page-flow-explorer .fi-rail-tab-panel {
    padding: 8px 0 6px;
  }

  #page-flow-explorer .frtg-node text,
  #page-flow-explorer .frtg-hub-focus text,
  #page-flow-explorer .frtg-edge-group text {
    stroke-width: 1.75px;
  }
}

/* ========== Phase 12 — investigation experience (UX + display only) ========== */

/* Lightweight hover tips (uses data-fi-tip; keeps native title as fallback) */
#page-flow-explorer .fi-native-tip {
  position: relative;
  cursor: help;
}

#page-flow-explorer .fi-native-tip[data-fi-tip]:hover::after,
#page-flow-explorer .fi-native-tip[data-fi-tip]:focus-visible::after {
  content: attr(data-fi-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  z-index: 50;
  max-width: min(280px, 70vw);
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  color: #e2e8f0;
  background: rgba(8, 28, 28, 0.72);
  border: 1px solid rgba(20, 184, 166, 0.34);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  white-space: pre-line;
  word-break: break-word;
  pointer-events: none;
  opacity: 0;
  animation: fiTipFade 0.14s ease forwards;
}

@keyframes fiTipFade {
  to {
    opacity: 1;
  }
}

#page-flow-explorer .fi-path-stat .fi-native-tip:hover::after,
#page-flow-explorer .fi-path-stat .fi-native-tip:focus-visible::after {
  left: auto;
  right: 0;
  transform: none;
}

#page-flow-explorer #fintel-trace-paths-grid.fi-path-grid-star:has(
    .fi-path-card:hover
  )
  .fi-path-card:not(:hover) {
  opacity: 0.78;
  transition: opacity var(--fi-dur) var(--fi-ease);
}

#page-flow-explorer .fi-path-card {
  transition:
    border-color var(--fi-dur) var(--fi-ease),
    box-shadow var(--fi-dur) var(--fi-ease),
    opacity var(--fi-dur) var(--fi-ease);
}

#page-flow-explorer .fi-path-card--top-route {
  border-color: rgba(20, 184, 166, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(20, 184, 166, 0.22),
    0 12px 36px rgba(0, 0, 0, 0.4);
  background: linear-gradient(
    165deg,
    rgba(8, 28, 28, 0.92),
    rgba(6, 18, 18, 0.88)
  );
}

#page-flow-explorer .fi-path-context-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 0 10px;
  min-width: 0;
}

#page-flow-explorer .fi-path-context-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #5eead4;
  background: rgba(20, 184, 166, 0.18);
  border: 1px solid rgba(20, 184, 166, 0.34);
}

#page-flow-explorer .fi-path-route-num-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.85);
  margin-right: 4px;
}

#page-flow-explorer .fi-path-arrow--out {
  color: #7dd3fc;
}

#page-flow-explorer .fi-path-arrow--in {
  color: #5eead4;
}

#page-flow-explorer .fi-path-card[data-fi-path-neighbor]:hover {
  border-color: rgba(20, 184, 166, 0.34) !important;
}

/* Trust + trace context strips */
#page-flow-explorer .fi-trace-trust-strip {
  margin: 0 0 12px;
  min-width: 0;
}

#page-flow-explorer .fi-trace-trust-strip[hidden] {
  display: none !important;
}

#page-flow-explorer .fi-trust-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  background: rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
}

#page-flow-explorer .fi-trust-chip {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(203, 213, 225, 0.88);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-flow-explorer .fi-trust-chip--warn {
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.35);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.08);
}

#page-flow-explorer .fi-trust-chip--ok {
  color: #bbf7d0;
  border: 1px solid rgba(74, 222, 128, 0.35);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.1);
}

#page-flow-explorer .fi-trace-summary-context {
  margin: 0 0 8px;
  min-width: 0;
}

#page-flow-explorer .fi-trace-summary-context[hidden] {
  display: none !important;
}

#page-flow-explorer .fi-context-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 0 6px;
}

#page-flow-explorer .fi-context-pill {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
  color: #5eead4;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(20, 184, 166, 0.34);
  background: rgba(20, 184, 166, 0.18);
  max-width: 100%;
}

/* Active focus wallet in tables */
#page-flow-explorer .fi-drill-label.fi-trace-focus-active {
  outline: 1px solid rgba(20, 184, 166, 0.34);
  outline-offset: 2px;
  border-radius: 4px;
  background: rgba(20, 184, 166, 0.18);
}

/* Case timeline — direction + time hierarchy */
#page-flow-explorer .fi-tl-time-cell {
  vertical-align: middle;
  min-width: 128px;
}

#page-flow-explorer .fi-tl-time-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#page-flow-explorer .fi-tl-flow-mark {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

#page-flow-explorer .fi-tl-inline-dir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}

#page-flow-explorer .fi-tl-inline-dir--out {
  color: #7dd3fc;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
}

#page-flow-explorer .fi-tl-inline-dir--in {
  color: #5eead4;
  background: rgba(20, 184, 166, 0.14);
  border: 1px solid rgba(20, 184, 166, 0.32);
}

#page-flow-explorer .fi-tl-inline-dir--through {
  color: #94a3b8;
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

#page-flow-explorer .fi-case-tl-row--out .fi-tl-time-cell {
  box-shadow: inset 3px 0 0 rgba(56, 189, 248, 0.45);
}

#page-flow-explorer .fi-case-tl-row--in .fi-tl-time-cell {
  box-shadow: inset 3px 0 0 rgba(20, 184, 166, 0.34);
}

#page-flow-explorer .fi-case-tl-row--through .fi-tl-time-cell {
  box-shadow: inset 3px 0 0 rgba(148, 163, 184, 0.35);
}

#page-flow-explorer .fi-case-tl-row--rolled .fi-tl-time-cell {
  box-shadow: inset 3px 0 0 rgba(148, 163, 184, 0.25);
}

#page-flow-explorer .fi-tl-ts-tip {
  font-variant-numeric: tabular-nums;
  color: rgba(226, 232, 240, 0.95);
}

@media (max-width: 720px) {
  #page-flow-explorer .fi-trust-inner {
    row-gap: 6px;
  }

  #page-flow-explorer .fi-trust-chip {
    white-space: normal;
  }

  #page-flow-explorer .fi-native-tip[data-fi-tip]:hover::after,
  #page-flow-explorer .fi-native-tip[data-fi-tip]:focus-visible::after {
    max-width: min(240px, 88vw);
    font-size: 10px;
  }

  #page-flow-explorer .fi-tl-time-cell {
    min-width: 0;
  }
}

/* ----- Phase 13 — trace error copy + mobile overflow guardrails ----- */

#page-flow-explorer .fi-trace-user-msg {
  display: block;
}

#page-flow-explorer .fi-trace-error-hint {
  display: block;
  margin-top: var(--fi-space-sm, 8px);
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-faint);
  opacity: 0.9;
}

@media (max-width: 768px) {
  #page-flow-explorer {
    overflow-x: hidden;
    max-width: 100%;
  }

  #page-flow-explorer .fintel-layout,
  #page-flow-explorer .fintel-primary-stack,
  #page-flow-explorer .flow-explorer-side-stack {
    min-width: 0;
  }
}

@media (max-width: 430px) {
  #page-flow-explorer .fi-trust-inner {
    flex-wrap: wrap;
  }
}

/* ----- Phase 14 — label source pills + path chip labels (additive) ----- */

#page-flow-explorer .fi-lbl-src-pill {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.3;
}

#page-flow-explorer .fi-lbl-src-pill--verified {
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(74, 222, 128, 0.4);
  color: #bbf7d0;
}

#page-flow-explorer .fi-lbl-src-pill--analyst {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.38);
  color: #fde68a;
}

#page-flow-explorer .fi-lbl-src-pill--unknown {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
}

#page-flow-explorer .fi-lbl-src-pill--inferred {
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.38);
  color: #bfdbfe;
}

#page-flow-explorer .fi-card-why {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-dim);
  opacity: 0.92;
}

#page-flow-explorer .fi-card-why.fi-ux-dual-block > .fi-ux-t-simple,
#page-flow-explorer .fi-card-why.fi-ux-dual-block > .fi-ux-t-adv {
  overflow-wrap: anywhere;
}

#page-flow-explorer .fi-inline-hex {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin: 2px 4px 2px 0;
  vertical-align: middle;
}

#page-flow-explorer .fi-inline-hex-text {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-flow-explorer .fi-inline-copy-btn {
  padding: 1px 5px;
  font-size: 10px;
  line-height: 1;
  flex: 0 0 auto;
}

#page-flow-explorer .fi-path-entity-why {
  margin: 4px 0 0;
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-faint);
  opacity: 0.9;
}

#page-flow-explorer .fi-eih-title-line {
  min-width: 0;
}

#page-flow-explorer .fi-ent-label-txt {
  font-size: 11px;
  color: var(--text);
  line-height: 1.35;
  min-width: 0;
  word-break: break-word;
}

#page-flow-explorer .fi-ent-src-line {
  flex: 1 1 100%;
  font-size: 10px;
  color: var(--text-faint);
  opacity: 0.92;
}

#page-flow-explorer .fi-path-chip--lbl {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
  vertical-align: middle;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

#page-flow-explorer .fi-path-chip--lbl .fi-lbl-src-pill {
  font-size: 8px;
  padding: 1px 6px;
}

#page-flow-explorer .fi-path-chip-txt {
  min-width: 0;
  word-break: break-word;
  font-weight: 600;
}

#page-flow-explorer .fi-path-chip-meta {
  flex: 1 1 100%;
  font-size: 9px;
  color: var(--text-dim);
  opacity: 0.9;
  min-width: 0;
}

@media (max-width: 720px) {
  #page-flow-explorer .fi-path-chip--lbl {
    max-width: 100%;
  }

  #page-flow-explorer .fi-native-tip.fi-path-chip--lbl:hover::after,
  #page-flow-explorer .fi-native-tip.fi-path-chip--lbl:focus-visible::after {
    max-width: min(260px, 92vw);
  }
}

/* ----- Phase 15 — workspace toast, share-route highlight, investigation rail ----- */

#page-flow-explorer {
  position: relative;
}

#page-flow-explorer .fi-ws-toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  max-width: min(420px, 92vw);
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #e2e8f0;
  background: rgba(8, 28, 28, 0.96);
  border: 1px solid rgba(20, 184, 166, 0.34);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

#page-flow-explorer .fi-path-card--share-route {
  outline: 2px solid rgba(45, 212, 191, 0.55);
  outline-offset: 2px;
}

#page-flow-explorer .fi-ws-workspace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

#page-flow-explorer .fi-cm-host {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  min-width: 0;
}

#page-flow-explorer .fi-cm-host--rail {
  margin-top: 14px;
}

#page-flow-explorer .fi-cm-summary {
  min-width: 0;
}

#page-flow-explorer .fi-cm-lead,
#page-flow-explorer .fi-cm-foot {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-cm-foot {
  color: var(--text-faint);
}

#page-flow-explorer .fi-cm-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

#page-flow-explorer .fi-cm-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.03);
  font-size: 10px;
  line-height: 1.3;
  color: var(--text-dim);
}

#page-flow-explorer .fi-cm-details {
  margin-top: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  min-width: 0;
}

#page-flow-explorer .fi-cm-summary-btn {
  cursor: pointer;
  padding: 9px 10px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text);
  list-style: none;
}

#page-flow-explorer .fi-cm-summary-btn::-webkit-details-marker {
  display: none;
}

#page-flow-explorer .fi-cm-body {
  padding: 0 10px 10px;
  min-width: 0;
}

#page-flow-explorer .fi-cm-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#page-flow-explorer .fi-cm-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#page-flow-explorer .fi-cm-row {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
  min-width: 0;
}

#page-flow-explorer .fi-cm-sub {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-faint);
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-cm-mini-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#page-flow-explorer .fi-cm-mini-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 10px;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-dim);
}

#page-flow-explorer .fi-cm-mini-k {
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

#page-flow-explorer .fi-cm-mini-v {
  text-align: right;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#page-flow-explorer .fi-ws-subk {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 10px 0 8px;
}

#page-flow-explorer .fi-ws-inv-recent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 12px;
}

#page-flow-explorer .fi-ws-inv-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
}

#page-flow-explorer .fi-ws-inv-row-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  font-weight: 600;
  color: var(--text);
}

#page-flow-explorer .fi-ws-inv-row-title-main {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-flow-explorer .fi-ws-inv-row-sub {
  min-width: 0;
  max-width: 100%;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#page-flow-explorer .fi-wl-inv-compact {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#page-flow-explorer .fi-ws-inv-row-meta {
  font-size: 10px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

#page-flow-explorer .fi-ws-inv-open {
  padding: 4px 10px;
  font-size: 11px;
}

/* Phase 16 — maturity copy (confidence meaning, interpretation note) */

#page-flow-explorer .fi-path-conf-mean {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-dim);
  opacity: 0.9;
}

#page-flow-explorer .fi-interpretation-note {
  margin: 12px 0 0;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-faint);
  opacity: 0.88;
  font-style: italic;
}

/* ----- Phase 17 — executive demo polish (loading, empty, rhythm, trust) ----- */

#page-flow-explorer {
  overflow-x: clip;
}

#page-flow-explorer .fi-type-panel-title,
#page-flow-explorer .panel.flow-explorer-subpanel .panel-title,
#page-flow-explorer .fi-priority-strip-title {
  font-size: var(--forensic-title-size, 15px);
  font-weight: var(--forensic-title-weight, 600);
  line-height: var(--forensic-title-leading, 1.25);
  letter-spacing: 0.01em;
  color: var(--text);
}

#page-flow-explorer .fi-type-panel-subtitle,
#page-flow-explorer .panel.flow-explorer-subpanel .fi-panel-sub,
#page-flow-explorer .fi-priority-strip-sub {
  font-size: var(--forensic-subtitle-size, 11px);
  font-weight: var(--forensic-subtitle-weight, 400);
  line-height: 1.45;
  letter-spacing: 0.02em;
  opacity: var(--forensic-subtitle-opacity, 0.48);
  color: var(--text-dim);
}

#page-flow-explorer .fi-type-section-label,
#page-flow-explorer .fi-primary-hero-kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0.88;
}

#page-flow-explorer table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.92;
}

#page-flow-explorer .fi-type-empty,
#page-flow-explorer td.forensic-empty-state .fi-type-empty {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--text-dim);
  opacity: 0.9;
}

#page-flow-explorer .fi-type-empty-hint,
#page-flow-explorer td.forensic-empty-state .fi-type-empty-hint {
  display: block;
  margin-top: var(--fi-space-sm, 8px);
  font-size: 11px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--text-faint);
  opacity: 0.82;
}

#page-flow-explorer .fi-empty-hint-below {
  display: block;
  margin-top: 6px;
}

#page-flow-explorer .fi-trace-summary-stack .k,
#page-flow-explorer .fi-hero-lab {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0.88;
}

#page-flow-explorer .fi-trace-summary-stack .v,
#page-flow-explorer .fi-hero-val {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}

#page-flow-explorer[data-fi-trace-loading="1"] .fi-primary-hero[data-fi-loading="1"] .fi-hero-val {
  opacity: 0.38;
}

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

#page-flow-explorer .fi-skel-block {
  min-height: 72px;
  padding: var(--fi-space-md) 0;
  box-sizing: border-box;
}

#page-flow-explorer .fi-skel-line {
  height: 10px;
  border-radius: 6px;
  margin-bottom: 10px;
  max-width: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(255, 255, 255, 0.09) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: fiSkelShimmer 2.8s ease-in-out infinite;
}

#page-flow-explorer .fi-skel-line--1 {
  width: 88%;
}
#page-flow-explorer .fi-skel-line--2 {
  width: 72%;
}
#page-flow-explorer .fi-skel-line--3 {
  width: 56%;
}

#page-flow-explorer .fi-skel-caption {
  margin: 4px 0 0;
}

#page-flow-explorer .fi-skel-row,
#page-flow-explorer .fi-skel-path-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fi-space-md);
  min-height: 100px;
}

@media (max-width: 720px) {
  #page-flow-explorer .fi-skel-row,
  #page-flow-explorer .fi-skel-path-grid {
    grid-template-columns: 1fr;
  }
}

#page-flow-explorer .fi-skel-td {
  padding: var(--fi-space-lg) var(--fi-space-md);
  vertical-align: middle;
}

#page-flow-explorer .fi-trust-chip--wait {
  opacity: 0.92;
}

#page-flow-explorer .fi-demo-inv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#page-flow-explorer .fi-demo-preset-btn,
#page-flow-explorer #fi-demo-wallet-btn,
#page-flow-explorer .fi-demo-inv-toggle {
  flex-shrink: 0;
  max-width: 100%;
}

/* Phase 4 — entity heuristics chips (wrap, truncate-friendly; no wide tables) */
#page-flow-explorer .fi-heur-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
#page-flow-explorer .fi-heur-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}
#page-flow-explorer .fi-heur-chip--meta {
  opacity: 0.88;
  font-size: 11px;
}
#page-flow-explorer .fi-heuristic-priority-hint {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
#page-flow-explorer .fi-heur-center-wrap {
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#page-flow-explorer .fi-heur-center-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
#page-flow-explorer .fi-heur-center-lim {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.35;
  opacity: 0.82;
  word-break: break-word;
}
#page-flow-explorer .fi-ri-heur-hint {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.4;
  min-width: 0;
}
#page-flow-explorer .fi-heur-chip-note {
  opacity: 0.85;
  font-size: 11px;
}

#page-flow-explorer .fi-ei-consolidated-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#page-flow-explorer .fi-exp-block,
#page-flow-explorer .fi-exp-kv-value {
  min-width: 0;
}
#page-flow-explorer .fi-exp-block {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
#page-flow-explorer .fi-exp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
#page-flow-explorer .fi-exp-line {
  margin: 6px 0 0;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-dim);
  overflow-wrap: anywhere;
  word-break: break-word;
}
#page-flow-explorer .fi-exp-details {
  margin-top: 6px;
}
#page-flow-explorer .fi-exp-summary {
  cursor: pointer;
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-faint);
  list-style: none;
}
#page-flow-explorer .fi-exp-summary::-webkit-details-marker {
  display: none;
}
#page-flow-explorer .fi-exp-detail-body {
  margin-top: 6px;
}
#page-flow-explorer .fi-exp-detail-line {
  margin: 0 0 6px;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-dim);
  overflow-wrap: anywhere;
  word-break: break-word;
}
#page-flow-explorer .fi-exp-detail-line:last-child {
  margin-bottom: 0;
}
#page-flow-explorer .fi-exp-detail-line strong {
  color: var(--text);
}
#page-flow-explorer .fi-exp-detail-line--limit {
  opacity: 0.88;
}
#page-flow-explorer .fi-exp-kv .v {
  text-align: left;
}
#page-flow-explorer .fi-exp-kv .fi-exp-kv-value {
  display: block;
}
#page-flow-explorer .fi-consolidation-priority-hint {
  margin: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
#page-flow-explorer .fi-orch-ei-supplement {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.4;
  opacity: 0.88;
  word-break: break-word;
}
@media (max-width: 720px) {
  #page-flow-explorer .fi-heur-chip {
    max-width: min(100%, 280px);
  }
  #page-flow-explorer .fi-ei-consolidated-chip {
    max-width: min(100%, 280px);
  }
  #page-flow-explorer .fi-exp-line,
  #page-flow-explorer .fi-exp-detail-line {
    font-size: 10px;
  }
}

/* Phase 7 — investigator operations (compact, local-only) */
#page-flow-explorer .fi-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
#page-flow-explorer .fi-inv-ops-wrap {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  min-width: 0;
}
#page-flow-explorer .fi-inv-ops-row--simple {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
  min-width: 0;
}
#page-flow-explorer .fi-inv-op-btn {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  padding: 6px 8px;
}
#page-flow-explorer .fi-inv-op-tag-lbl {
  flex: 1 1 140px;
  min-width: 0;
  margin: 0;
}
#page-flow-explorer .fi-inv-op-select {
  width: 100%;
  max-width: 100%;
  font-size: 12px;
  padding: 6px 8px;
  box-sizing: border-box;
}
#page-flow-explorer .fi-inv-ops-summary {
  cursor: pointer;
  font-size: 12px;
  opacity: 0.92;
  margin-top: 8px;
}
#page-flow-explorer .fi-inv-ops-adv-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  min-width: 0;
}
#page-flow-explorer .fi-inv-op-mini-details {
  margin-top: 4px;
}
#page-flow-explorer .fi-inv-op-mini-sum {
  font-size: 11px;
  cursor: pointer;
}
#page-flow-explorer .fi-inv-op-mini-list {
  font-size: 11px;
  line-height: 1.45;
  min-width: 0;
  word-break: break-word;
}
#page-flow-explorer .fi-inv-op-li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 4px;
}
#page-flow-explorer .fi-inv-op-li-btn {
  font-size: 11px;
  padding: 4px 8px;
  flex: 0 0 auto;
}
#page-flow-explorer .fi-inv-ops-case-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  min-width: 0;
}
#page-flow-explorer .fi-inv-route-pin-slot {
  margin-left: auto;
  flex-shrink: 0;
}
#page-flow-explorer .fi-inv-route-pin {
  font-size: 11px;
  line-height: 1;
  padding: 2px 6px;
  min-width: 0;
  opacity: 0.9;
  color: #5eead4;
  background: rgba(20, 184, 166, 0.12);
  border-color: rgba(20, 184, 166, 0.22);
}
#page-flow-explorer .fi-path-card--inv-pinned .fi-inv-route-pin {
  opacity: 1;
}
#page-flow-explorer .fi-path-card--inv-pinned {
  box-shadow: inset 0 0 0 1px rgba(255, 200, 120, 0.35);
}
#page-flow-explorer .fi-inv-tl-notes-host {
  margin-top: 6px;
  min-width: 0;
}
#page-flow-explorer .fi-inv-tl-notes-fi-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 10px;
  color: var(--text-dim, #aaa);
  min-width: 0;
}
#page-flow-explorer .fi-inv-tl-notes-k {
  font-weight: 600;
  margin-right: 4px;
}
#page-flow-explorer .fi-inv-tl-note-chip {
  display: inline-block;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#page-flow-explorer .fi-inv-tl-note-more {
  opacity: 0.85;
}
#page-flow-explorer[data-fi-ux-mode="simple"] #fi-inv-ops-details {
  display: none;
}
@media (max-width: 720px) {
  #page-flow-explorer .fi-inv-ops-row--simple {
    flex-direction: column;
  }
  #page-flow-explorer .fi-inv-op-btn,
  #page-flow-explorer .fi-inv-op-select {
    width: 100%;
    max-width: 100%;
  }
  #page-flow-explorer .fi-inv-route-pin-slot {
    margin-left: 0;
  }
}

/* Phase 13 — analyst ergonomics + workflow polish */
#page-flow-explorer .fi-analyst-ergonomics-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin: 0 0 12px;
  border: 1px solid rgba(45, 212, 191, 0.16);
  border-radius: 12px;
  background: rgba(5, 15, 18, 0.66);
}
#page-flow-explorer .fi-analyst-nav,
#page-flow-explorer .fi-analyst-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
#page-flow-explorer .fi-analyst-nav-btn,
#page-flow-explorer .fi-analyst-tool-btn,
#page-flow-explorer .fi-analyst-density-btn {
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1.2;
}
#page-flow-explorer .fi-analyst-density-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
#page-flow-explorer .fi-analyst-tool-btn--active,
#page-flow-explorer .fi-analyst-density-btn--active {
  color: #ccfbf1;
  border-color: rgba(45, 212, 191, 0.38);
  background: rgba(20, 184, 166, 0.14);
}

#page-flow-explorer .fi-route-compare-summary {
  margin: 0 0 10px;
}
#page-flow-explorer .fi-route-compare-empty,
#page-flow-explorer .fi-route-compare-shell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(94, 234, 212, 0.12);
  border-radius: 12px;
  background: rgba(9, 16, 19, 0.72);
}
#page-flow-explorer .fi-route-compare-empty {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
#page-flow-explorer .fi-route-compare-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #99f6e4;
}
#page-flow-explorer .fi-route-compare-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}
#page-flow-explorer .fi-route-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#page-flow-explorer .fi-route-compare-card {
  min-width: 0;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
}
#page-flow-explorer .fi-route-compare-card--pending {
  opacity: 0.9;
}
#page-flow-explorer .fi-route-compare-card-title {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
#page-flow-explorer .fi-route-compare-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
}
#page-flow-explorer .fi-route-compare-row span:first-child {
  color: var(--text-dim);
}
#page-flow-explorer .fi-route-compare-row strong {
  min-width: 0;
  text-align: right;
  word-break: break-word;
}
#page-flow-explorer .fi-route-compare-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#page-flow-explorer .fi-route-compare-note {
  display: inline-flex;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-dim);
}
#page-flow-explorer .fi-route-compare-clear {
  padding: 5px 9px;
  font-size: 11px;
}
#page-flow-explorer .fi-route-compare-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  color: #d1fae5;
  background: rgba(13, 148, 136, 0.22);
}
#page-flow-explorer .fi-path-card--compare-a,
#page-flow-explorer .fi-path-card--compare-b {
  box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.34);
}
#page-flow-explorer .fi-path-card--compare-a .fi-route-compare-badge,
#page-flow-explorer .fi-path-card--compare-b .fi-route-compare-badge {
  background: rgba(20, 184, 166, 0.24);
}

#page-flow-explorer .fi-analyst-route-meta-toggle,
#page-flow-explorer .fi-analyst-summary-toggle,
#page-flow-explorer .fi-analyst-signals-toggle {
  margin-top: 8px;
  align-self: flex-start;
  padding: 5px 9px;
  font-size: 11px;
}
#page-flow-explorer .fi-path-card.fi-analyst-route-meta-collapsed
  > :not(.fi-path-card-head):not(.fi-path-context-badges):not(.fi-path-route):not(.fi-analyst-route-meta-toggle) {
  display: none !important;
}
#page-flow-explorer .fi-analyst-hidden-item {
  display: none !important;
}
#page-flow-explorer .fi-analyst-empty-note {
  line-height: 1.45;
}

#page-flow-explorer[data-fi-summary-density="compact"] .fi-trace-summary-stack,
#page-flow-explorer[data-fi-summary-density="compact"] .fi-ai-summary,
#page-flow-explorer[data-fi-summary-density="compact"] .fi-signals-center-grid {
  gap: 8px !important;
}
#page-flow-explorer[data-fi-summary-density="compact"] .fi-path-card {
  padding: 12px 12px 11px;
}
#page-flow-explorer[data-fi-summary-density="compact"] .fi-path-stat {
  padding: 6px 8px;
}
#page-flow-explorer[data-fi-summary-density="compact"] .fi-sig-center-card,
#page-flow-explorer[data-fi-summary-density="compact"] .fi-route-compare-card {
  padding: 9px;
}

#page-flow-explorer[data-fi-analyst-focus="1"] .fi-panel-support-quiet,
#page-flow-explorer[data-fi-analyst-focus="1"] .fi-rail-section,
#page-flow-explorer[data-fi-analyst-focus="1"] .fi-sig-center-card,
#page-flow-explorer[data-fi-analyst-focus="1"] .fi-path-card {
  opacity: 0.76;
  filter: saturate(0.86);
  transition: opacity var(--fi-dur) var(--fi-ease),
    filter var(--fi-dur) var(--fi-ease),
    box-shadow var(--fi-dur) var(--fi-ease);
}
#page-flow-explorer[data-fi-analyst-focus="1"] #fi-priority-findings-strip,
#page-flow-explorer[data-fi-analyst-focus="1"] #fi-panel-watchlist-alerts,
#page-flow-explorer[data-fi-analyst-focus="1"] .fi-path-card--top-route,
#page-flow-explorer[data-fi-analyst-focus="1"] .fi-path-card--replay-active,
#page-flow-explorer[data-fi-analyst-focus="1"] .fi-path-card--compare-a,
#page-flow-explorer[data-fi-analyst-focus="1"] .fi-path-card--compare-b,
#page-flow-explorer[data-fi-analyst-focus="1"] .fi-analyst-focus-target,
#page-flow-explorer[data-fi-analyst-focus="1"] .fi-analyst-current-finding {
  opacity: 1;
  filter: none;
}
#page-flow-explorer[data-fi-analyst-focus="1"] .fi-analyst-focus-target,
#page-flow-explorer[data-fi-analyst-focus="1"] .fi-path-card--compare-a,
#page-flow-explorer[data-fi-analyst-focus="1"] .fi-path-card--compare-b,
#page-flow-explorer[data-fi-analyst-focus="1"] .fi-analyst-current-finding {
  box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.22),
    0 0 0 1px rgba(20, 184, 166, 0.08);
}

@media (max-width: 900px) {
  #page-flow-explorer .fi-route-compare-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  #page-flow-explorer .fi-analyst-ergonomics-strip {
    align-items: stretch;
  }
  #page-flow-explorer .fi-analyst-nav,
  #page-flow-explorer .fi-analyst-tools {
    width: 100%;
  }
  #page-flow-explorer .fi-analyst-nav-btn,
  #page-flow-explorer .fi-analyst-tool-btn,
  #page-flow-explorer .fi-analyst-density-btn,
  #page-flow-explorer .fi-route-compare-clear,
  #page-flow-explorer .fi-analyst-route-meta-toggle,
  #page-flow-explorer .fi-analyst-summary-toggle,
  #page-flow-explorer .fi-analyst-signals-toggle {
    flex: 1 1 auto;
  }
  #page-flow-explorer .fi-route-compare-empty,
  #page-flow-explorer .fi-route-compare-head {
    flex-direction: column;
    align-items: stretch;
  }
  #page-flow-explorer .fi-route-compare-row {
    flex-direction: column;
    align-items: flex-start;
  }
  #page-flow-explorer .fi-route-compare-row strong {
    text-align: left;
  }
}