:root {
--graph-bg: #020617;
--graph-bg-2: #07111f;
--graph-panel: rgba(15, 23, 42, 0.92);
--graph-panel-strong: rgba(15, 23, 42, 0.98);
--graph-border: rgba(125, 211, 252, 0.24);
--graph-border-strong: rgba(125, 211, 252, 0.46);
--graph-text: rgba(248, 250, 252, 0.96);
--graph-muted: rgba(203, 213, 225, 0.84);
--graph-soft: rgba(148, 163, 184, 0.72);
--graph-cyan: #5eead4;
--graph-blue: #38bdf8;
--graph-gold: #facc15;
--graph-gold-soft: rgba(250, 204, 21, 0.14);
--graph-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}
html,
body.research-graph-demo {
min-height: 100%;
margin: 0;
background:
radial-gradient(circle at top left, rgba(56, 189, 248, 0.13), transparent 34rem),
radial-gradient(circle at 80% 20%, rgba(250, 204, 21, 0.08), transparent 26rem),
linear-gradient(180deg, #020617 0%, #030712 100%) !important;
color: var(--graph-text) !important;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.graph-site-chrome {
position: sticky;
top: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.2rem;
padding: 1rem 1.4rem;
border-bottom: 1px solid rgba(125, 211, 252, 0.18);
background: rgba(2, 6, 23, 0.88);
backdrop-filter: blur(18px);
}
.graph-site-brand {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.graph-site-brand strong {
color: var(--graph-text);
font-size: 0.92rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.graph-site-brand span {
color: var(--graph-muted);
font-size: 0.78rem;
}
.graph-site-nav {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
align-items: center;
justify-content: flex-end;
}
.graph-site-nav a,
.graph-site-pill,
body.research-graph-demo button,
body.research-graph-demo .btn {
border: 1px solid rgba(125, 211, 252, 0.28) !important;
border-radius: 999px !important;
background: rgba(15, 23, 42, 0.76) !important;
color: var(--graph-text) !important;
padding: 0.48rem 0.78rem !important;
font-size: 0.78rem !important;
font-weight: 700 !important;
line-height: 1 !important;
text-decoration: none !important;
box-shadow: none !important;
}
.graph-site-nav a:hover,
body.research-graph-demo button:hover,
body.research-graph-demo .btn:hover {
border-color: rgba(94, 234, 212, 0.58) !important;
color: #ffffff !important;
background: rgba(14, 165, 233, 0.18) !important;
}
.graph-site-nav a.primary {
background: linear-gradient(135deg, #67e8f9, #38bdf8) !important;
color: #020617 !important;
border-color: rgba(125, 211, 252, 0.7) !important;
}
body.research-graph-demo h1,
body.research-graph-demo h2,
body.research-graph-demo h3 {
color: var(--graph-text) !important;
letter-spacing: -0.03em;
}
body.research-graph-demo p,
body.research-graph-demo li,
body.research-graph-demo label,
body.research-graph-demo small {
color: var(--graph-muted) !important;
}
body.research-graph-demo a {
color: var(--graph-blue);
}
body.research-graph-demo select,
body.research-graph-demo input,
body.research-graph-demo textarea {
border: 1px solid rgba(125, 211, 252, 0.24) !important;
border-radius: 0.8rem !important;
background: rgba(15, 23, 42, 0.86) !important;
color: var(--graph-text) !important;
padding: 0.5rem 0.65rem !important;
}
body.research-graph-demo table {
border-collapse: collapse;
background: rgba(15, 23, 42, 0.72) !important;
color: var(--graph-text) !important;
}
body.research-graph-demo th {
background: rgba(15, 23, 42, 0.98) !important;
color: var(--graph-text) !important;
border-color: rgba(125, 211, 252, 0.22) !important;
}
body.research-graph-demo td {
border-color: rgba(125, 211, 252, 0.16) !important;
color: var(--graph-muted) !important;
}
body.research-graph-demo #mynetwork,
body.research-graph-demo #network,
body.research-graph-demo .vis-network,
body.research-graph-demo [id*="network"],
body.research-graph-demo [class*="network"] {
background:
radial-gradient(circle at 30% 20%, rgba(56, 189, 248, 0.08), transparent 22rem),
rgba(2, 6, 23, 0.82) !important;
border: 1px solid rgba(125, 211, 252, 0.22) !important;
border-radius: 1.15rem !important;
box-shadow: var(--graph-shadow);
}
body.research-graph-demo .vis-tooltip {
background: rgba(15, 23, 42, 0.98) !important;
color: var(--graph-text) !important;
border: 1px solid rgba(125, 211, 252, 0.34) !important;
border-radius: 0.8rem !important;
box-shadow: var(--graph-shadow) !important;
padding: 0.7rem 0.8rem !important;
}
body.research-graph-demo :is(.card, .panel, .sidebar, .legend, .modal-content),
body.research-graph-demo [class*="card"],
body.research-graph-demo [class*="panel"],
body.research-graph-demo [class*="sidebar"],
body.research-graph-demo [id*="panel"],
body.research-graph-demo [id*="Panel"],
body.research-graph-demo [id*="sidebar"],
body.research-graph-demo [id*="Sidebar"] {
background: var(--graph-panel) !important;
color: var(--graph-text) !important;
border-color: var(--graph-border) !important;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}
body.research-graph-demo [class*="badge"],
body.research-graph-demo [class*="pill"],
body.research-graph-demo [class*="tag"] {
border: 1px solid rgba(94, 234, 212, 0.28) !important;
border-radius: 999px !important;
background: rgba(14, 165, 233, 0.12) !important;
color: rgba(224, 242, 254, 0.96) !important;
}
body.research-graph-demo [class*="score"],
body.research-graph-demo [id*="score"],
body.research-graph-demo [class*="Score"],
body.research-graph-demo [id*="Score"] {
color: var(--graph-gold) !important;
}
body.research-graph-demo [class*="citation"],
body.research-graph-demo [id*="citation"],
body.research-graph-demo [class*="Citation"],
body.research-graph-demo [id*="Citation"] {
color: var(--graph-soft) !important;
border-left: 2px solid rgba(250, 204, 21, 0.36);
padding-left: 0.75rem;
}
body.research-graph-demo mark,
body.research-graph-demo [class*="highlight"] {
background: rgba(250, 204, 21, 0.16) !important;
color: var(--graph-text) !important;
border-radius: 0.28rem;
padding: 0.05rem 0.16rem;
}
body.research-graph-demo ::selection {
background: rgba(94, 234, 212, 0.26);
}
@media (max-width: 860px) {
.graph-site-chrome {
align-items: flex-start;
flex-direction: column;
}
.graph-site-nav {
justify-content: flex-start;
}
}
/* Graph demo readability v2 */
body.research-graph-demo {
background: #020617 !important;
}
body.research-graph-demo .graph-site-chrome {
min-height: 54px;
}
body.research-graph-demo .graph-site-nav a {
white-space: nowrap;
}
body.research-graph-demo aside,
body.research-graph-demo .sidebar,
body.research-graph-demo .panel,
body.research-graph-demo .card,
body.research-graph-demo .modal-content,
body.research-graph-demo [id*="panel"],
body.research-graph-demo [id*="Panel"],
body.research-graph-demo [id*="sidebar"],
body.research-graph-demo [id*="Sidebar"],
body.research-graph-demo [id*="detail"],
body.research-graph-demo [id*="Detail"],
body.research-graph-demo [class*="panel"],
body.research-graph-demo [class*="Panel"],
body.research-graph-demo [class*="sidebar"],
body.research-graph-demo [class*="Sidebar"],
body.research-graph-demo [class*="detail"],
body.research-graph-demo [class*="Detail"] {
background: #0f172a !important;
color: rgba(248,250,252,0.96) !important;
border-color: rgba(125,211,252,0.24) !important;
}
body.research-graph-demo [class*="tab"],
body.research-graph-demo [id*="tab"] {
color: rgba(248,250,252,0.92) !important;
}
body.research-graph-demo [class*="active"],
body.research-graph-demo [aria-selected="true"] {
color: #020617 !important;
background: linear-gradient(135deg, #67e8f9, #38bdf8) !important;
}
body.research-graph-demo .vis-network {
background: #020617 !important;
}
/* ------------------------------------------------------------
DESKTOP GRAPH WORKSPACE RESET V1
Desktop only. Mobile intentionally parked.
------------------------------------------------------------ */
@media (min-width: 961px) {
html,
body.research-graph-demo {
width: 100%;
height: 100%;
overflow: hidden !important;
background: #020617 !important;
color: var(--graph-text) !important;
}
body.research-graph-demo {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
}
/* Site-level chrome: BLACKBONE / Research / project links */
.graph-site-chrome {
position: relative !important;
min-height: 56px;
padding: 0.75rem 1.1rem !important;
background:
radial-gradient(circle at 12% 0%, rgba(56,189,248,0.10), transparent 24rem),
rgba(2, 6, 23, 0.96) !important;
border-bottom: 1px solid rgba(125,211,252,0.22) !important;
backdrop-filter: blur(18px);
}
.graph-site-brand strong {
color: rgba(248,250,252,0.98) !important;
letter-spacing: 0.13em;
}
.graph-site-brand span {
color: rgba(203,213,225,0.82) !important;
}
.graph-site-nav a {
color: rgba(226,232,240,0.94) !important;
background: rgba(15,23,42,0.78) !important;
border: 1px solid rgba(125,211,252,0.28) !important;
border-radius: 999px !important;
padding: 0.46rem 0.7rem !important;
font-size: 0.75rem !important;
font-weight: 800 !important;
text-decoration: none !important;
}
.graph-site-nav a:hover {
color: rgba(248,250,252,0.98) !important;
background: rgba(14,165,233,0.16) !important;
border-color: rgba(125,211,252,0.58) !important;
}
.graph-site-nav a.primary {
color: #020617 !important;
background: linear-gradient(135deg, #67e8f9, #38bdf8) !important;
border-color: rgba(125,211,252,0.70) !important;
}
/* Graph app controls: keep them compact, but separate from site chrome */
body.research-graph-demo header,
body.research-graph-demo .graph-toolbar,
body.research-graph-demo [class*="toolbar"],
body.research-graph-demo [id*="toolbar"],
body.research-graph-demo [class*="controls"],
body.research-graph-demo [id*="controls"] {
background: rgba(15,23,42,0.96) !important;
color: rgba(248,250,252,0.96) !important;
border-color: rgba(125,211,252,0.18) !important;
}
body.research-graph-demo button,
body.research-graph-demo .btn,
body.research-graph-demo select,
body.research-graph-demo input {
background: rgba(15,23,42,0.94) !important;
color: rgba(248,250,252,0.96) !important;
border: 1px solid rgba(125,211,252,0.34) !important;
border-radius: 999px !important;
}
body.research-graph-demo button:hover,
body.research-graph-demo .btn:hover {
background: rgba(14,165,233,0.15) !important;
border-color: rgba(125,211,252,0.58) !important;
}
/* Graph canvas */
body.research-graph-demo .vis-network,
body.research-graph-demo #mynetwork,
body.research-graph-demo #network,
body.research-graph-demo [id*="network"] {
background:
radial-gradient(circle at 42% 38%, rgba(56,189,248,0.06), transparent 28rem),
#020617 !important;
border: 1px solid rgba(125,211,252,0.18) !important;
border-radius: 1rem !important;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.02),
0 24px 80px rgba(0,0,0,0.34) !important;
}
/* Right-side discourse / detail panel */
body.research-graph-demo aside,
body.research-graph-demo .sidebar,
body.research-graph-demo [id*="sidebar"],
body.research-graph-demo [id*="Sidebar"],
body.research-graph-demo [id*="detail"],
body.research-graph-demo [id*="Detail"],
body.research-graph-demo [id*="panel"],
body.research-graph-demo [id*="Panel"] {
background:
radial-gradient(circle at 18% 8%, rgba(56,189,248,0.08), transparent 18rem),
#0f172a !important;
color: rgba(248,250,252,0.96) !important;
border-color: rgba(125,211,252,0.24) !important;
}
body.research-graph-demo aside *,
body.research-graph-demo .sidebar *,
body.research-graph-demo [id*="sidebar"] *,
body.research-graph-demo [id*="Sidebar"] *,
body.research-graph-demo [id*="detail"] *,
body.research-graph-demo [id*="Detail"] *,
body.research-graph-demo [id*="panel"] *,
body.research-graph-demo [id*="Panel"] * {
color: rgba(203,213,225,0.88);
}
body.research-graph-demo aside h1,
body.research-graph-demo aside h2,
body.research-graph-demo aside h3,
body.research-graph-demo aside strong,
body.research-graph-demo .sidebar h1,
body.research-graph-demo .sidebar h2,
body.research-graph-demo .sidebar h3,
body.research-graph-demo .sidebar strong,
body.research-graph-demo [id*="panel"] h1,
body.research-graph-demo [id*="panel"] h2,
body.research-graph-demo [id*="panel"] h3,
body.research-graph-demo [id*="panel"] strong {
color: rgba(248,250,252,0.98) !important;
}
body.research-graph-demo [class*="score"],
body.research-graph-demo [id*="score"],
body.research-graph-demo [class*="Score"],
body.research-graph-demo [id*="Score"] {
color: #facc15 !important;
font-weight: 800 !important;
}
body.research-graph-demo [class*="citation"],
body.research-graph-demo [id*="citation"],
body.research-graph-demo [class*="Citation"],
body.research-graph-demo [id*="Citation"] {
color: rgba(148,163,184,0.84) !important;
border-left: 2px solid rgba(250,204,21,0.36) !important;
padding-left: 0.7rem !important;
}
body.research-graph-demo mark,
body.research-graph-demo [class*="highlight"] {
background: rgba(250,204,21,0.16) !important;
color: rgba(248,250,252,0.98) !important;
border-radius: 0.25rem;
padding: 0.04rem 0.16rem;
}
}
/* ------------------------------------------------------------
DESKTOP LAYOUT HIERARCHY V1
Layout only: nav order, panel collision, collapsible panel, vis arrows.
------------------------------------------------------------ */
@media (min-width: 961px) {
body.research-graph-demo.graph-desktop-layout-v1 {
overflow: hidden !important;
background: #020617 !important;
}
body.research-graph-demo .graph-site-chrome-fixed-layer {
position: sticky !important;
top: 0 !important;
z-index: 100000 !important;
width: 100% !important;
background: rgba(2, 6, 23, 0.97) !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.22) !important;
}
body.research-graph-demo .graph-control-bar-detected {
width: 100% !important;
background: rgba(15, 23, 42, 0.96) !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.16) !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;
}
body.research-graph-demo .graph-detail-panel-detected {
width: 360px !important;
max-width: 360px !important;
min-width: 360px !important;
background:
radial-gradient(circle at 18% 8%, rgba(56, 189, 248, 0.08), transparent 18rem),
#0f172a !important;
color: rgba(248, 250, 252, 0.96) !important;
border-left: 1px solid rgba(125, 211, 252, 0.28) !important;
box-shadow: -24px 0 60px rgba(0, 0, 0, 0.34) !important;
transition: width 180ms ease, min-width 180ms ease, max-width 180ms ease;
}
body.research-graph-demo.graph-panel-collapsed .graph-detail-panel-detected {
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
overflow: hidden !important;
}
body.research-graph-demo.graph-panel-collapsed .graph-detail-panel-detected > *:not(.graph-detail-toggle) {
opacity: 0 !important;
pointer-events: none !important;
}
body.research-graph-demo .graph-detail-toggle {
position: sticky !important;
top: 0.75rem !important;
left: 0 !important;
z-index: 10 !important;
width: 32px !important;
height: 32px !important;
margin: 0.6rem 0 0.4rem 0.4rem !important;
display: grid !important;
place-items: center !important;
border-radius: 999px !important;
border: 1px solid rgba(125, 211, 252, 0.42) !important;
background: rgba(15, 23, 42, 0.96) !important;
color: rgba(248, 250, 252, 0.96) !important;
font-size: 1.15rem !important;
font-weight: 900 !important;
cursor: pointer !important;
}
body.research-graph-demo .graph-detail-toggle:hover {
background: rgba(14, 165, 233, 0.18) !important;
border-color: rgba(125, 211, 252, 0.72) !important;
}
body.research-graph-demo .vis-navigation,
body.research-graph-demo .vis-button {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
/* ------------------------------------------------------------
EXACT DESKTOP LAYOUT V2
Uses actual FP graph DOM:
.graph-site-chrome, .fp-shell, #mynetwork, .fp-side, #sequenceSide
------------------------------------------------------------ */
@media (min-width: 961px) {
:root {
--graph-side-panel-w: 360px;
}
body.research-graph-demo.graph-panel-collapsed {
--graph-side-panel-w: 44px;
}
body.research-graph-demo.graph-exact-layout-v2 {
overflow: hidden !important;
background: #020617 !important;
}
body.research-graph-demo .graph-site-chrome-exact {
position: sticky !important;
top: 0 !important;
z-index: 100000 !important;
width: 100% !important;
min-height: 56px !important;
background: rgba(2, 6, 23, 0.97) !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.22) !important;
}
body.research-graph-demo .graph-control-bar-exact,
body.research-graph-demo .fp-shell.graph-control-bar-exact {
position: sticky !important;
top: var(--graph-site-h, 56px) !important;
z-index: 99990 !important;
width: 100% !important;
min-height: 42px !important;
background: rgba(15, 23, 42, 0.97) !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.16) !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24) !important;
}
body.research-graph-demo .graph-canvas-exact,
body.research-graph-demo #mynetwork.graph-canvas-exact {
position: fixed !important;
left: 0.5rem !important;
right: calc(var(--graph-side-panel-w, 360px) + 0.5rem) !important;
top: calc(var(--graph-top-h, 98px) + 0.5rem) !important;
bottom: 0.5rem !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
overflow: hidden !important;
border-radius: 1rem !important;
}
body.research-graph-demo #mynetwork.graph-canvas-exact .vis-network,
body.research-graph-demo .graph-canvas-exact .vis-network {
width: 100% !important;
height: 100% !important;
}
body.research-graph-demo .graph-detail-panel-exact,
body.research-graph-demo .fp-side.graph-detail-panel-exact {
position: fixed !important;
right: 0 !important;
top: var(--graph-top-h, 98px) !important;
bottom: 0 !important;
z-index: 99980 !important;
width: var(--graph-side-panel-w, 360px) !important;
min-width: var(--graph-side-panel-w, 360px) !important;
max-width: var(--graph-side-panel-w, 360px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
background:
radial-gradient(circle at 18% 8%, rgba(56, 189, 248, 0.08), transparent 18rem),
#0f172a !important;
color: rgba(248, 250, 252, 0.96) !important;
border-left: 1px solid rgba(125, 211, 252, 0.28) !important;
box-shadow: -24px 0 60px rgba(0, 0, 0, 0.34) !important;
transition:
width 180ms ease,
min-width 180ms ease,
max-width 180ms ease;
}
body.research-graph-demo.graph-panel-collapsed .fp-side.graph-detail-panel-exact > *:not(.graph-detail-toggle) {
opacity: 0 !important;
pointer-events: none !important;
}
body.research-graph-demo .graph-detail-toggle {
position: sticky !important;
top: 0.6rem !important;
z-index: 99999 !important;
width: 30px !important;
height: 30px !important;
margin: 0.45rem 0 0.35rem 0.45rem !important;
display: grid !important;
place-items: center !important;
border-radius: 999px !important;
border: 1px solid rgba(125, 211, 252, 0.48) !important;
background: rgba(15, 23, 42, 0.98) !important;
color: rgba(248, 250, 252, 0.98) !important;
font-size: 1.05rem !important;
line-height: 1 !important;
font-weight: 900 !important;
cursor: pointer !important;
}
body.research-graph-demo .graph-detail-toggle:hover {
background: rgba(14, 165, 233, 0.20) !important;
border-color: rgba(125, 211, 252, 0.80) !important;
}
body.research-graph-demo .graph-sequence-panel-exact,
body.research-graph-demo #sequenceSide.graph-sequence-panel-exact {
top: var(--graph-top-h, 98px) !important;
bottom: 0 !important;
z-index: 99970 !important;
}
body.research-graph-demo .vis-navigation,
body.research-graph-demo .vis-button {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
/* ------------------------------------------------------------
EXACT DESKTOP LAYOUT V3
Fixes fp-shell covering website nav.
------------------------------------------------------------ */
@media (min-width: 961px) {
:root {
--graph-side-panel-w: 360px;
}
body.research-graph-demo.graph-panel-collapsed {
--graph-side-panel-w: 44px;
}
body.research-graph-demo.graph-exact-layout-v3 {
overflow: hidden !important;
background: #020617 !important;
}
body.research-graph-demo .graph-site-chrome-exact-v3 {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1000000 !important;
background: rgba(2, 6, 23, 0.97) !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.22) !important;
}
body.research-graph-demo .fp-shell.graph-control-bar-exact-v3 {
position: fixed !important;
top: var(--graph-site-h, 79px) !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 999990 !important;
background: rgba(15, 23, 42, 0.97) !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.16) !important;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24) !important;
}
body.research-graph-demo #mynetwork.graph-canvas-exact-v3 {
position: fixed !important;
left: 0.5rem !important;
right: calc(var(--graph-side-panel-w, 360px) + 0.5rem) !important;
top: calc(var(--graph-top-h, 132px) + 0.5rem) !important;
bottom: 0.5rem !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
overflow: hidden !important;
z-index: 1 !important;
}
body.research-graph-demo .fp-side.graph-detail-panel-exact-v3 {
position: fixed !important;
right: 0 !important;
top: var(--graph-top-h, 132px) !important;
bottom: 0 !important;
width: var(--graph-side-panel-w, 360px) !important;
min-width: var(--graph-side-panel-w, 360px) !important;
max-width: var(--graph-side-panel-w, 360px) !important;
z-index: 999980 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
background:
radial-gradient(circle at 18% 8%, rgba(56, 189, 248, 0.08), transparent 18rem),
#0f172a !important;
border-left: 1px solid rgba(125, 211, 252, 0.28) !important;
box-shadow: -24px 0 60px rgba(0, 0, 0, 0.34) !important;
}
body.research-graph-demo.graph-panel-collapsed .fp-side.graph-detail-panel-exact-v3 > *:not(.graph-detail-toggle) {
opacity: 0 !important;
pointer-events: none !important;
}
body.research-graph-demo .graph-detail-toggle {
position: sticky !important;
top: 0.6rem !important;
z-index: 1000001 !important;
width: 30px !important;
height: 30px !important;
margin: 0.45rem 0 0.35rem 0.45rem !important;
display: grid !important;
place-items: center !important;
border-radius: 999px !important;
border: 1px solid rgba(125, 211, 252, 0.48) !important;
background: rgba(15, 23, 42, 0.98) !important;
color: rgba(248, 250, 252, 0.98) !important;
font-size: 1.05rem !important;
line-height: 1 !important;
font-weight: 900 !important;
cursor: pointer !important;
}
body.research-graph-demo #sequenceSide.graph-sequence-panel-exact-v3 {
top: var(--graph-top-h, 132px) !important;
bottom: 0 !important;
z-index: 999970 !important;
}
body.research-graph-demo .vis-navigation,
body.research-graph-demo .vis-button {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
}
/* ------------------------------------------------------------
SIDEBAR COLOR REPAIR V1
Fixes over-broad [class*="active"] rules bleeding into .fp-side.
------------------------------------------------------------ */
@media (min-width: 961px) {
body.research-graph-demo .fp-side,
body.research-graph-demo .fp-side.graph-detail-panel-exact-v3 {
background:
radial-gradient(circle at 18% 8%, rgba(56, 189, 248, 0.08), transparent 18rem),
#0f172a !important;
color: rgba(248, 250, 252, 0.96) !important;
}
body.research-graph-demo .fp-side *,
body.research-graph-demo .fp-side .active,
body.research-graph-demo .fp-side [class*="active"] {
background-color: transparent !important;
background-image: none !important;
}
body.research-graph-demo .fp-side .fp-panel-header {
background: rgba(15, 23, 42, 0.72) !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.22) !important;
}
body.research-graph-demo .fp-side .fp-title,
body.research-graph-demo .fp-side h1,
body.research-graph-demo .fp-side h2,
body.research-graph-demo .fp-side h3,
body.research-graph-demo .fp-side strong,
body.research-graph-demo .fp-side b {
color: rgba(248, 250, 252, 0.98) !important;
}
body.research-graph-demo .fp-side .fp-subtitle,
body.research-graph-demo .fp-side .fp-muted,
body.research-graph-demo .fp-side .fp-debug-meta,
body.research-graph-demo .fp-side p,
body.research-graph-demo .fp-side div,
body.research-graph-demo .fp-side span,
body.research-graph-demo .fp-side li,
body.research-graph-demo .fp-side small {
color: rgba(203, 213, 225, 0.86) !important;
}
body.research-graph-demo .fp-side .fp-object-chip {
display: inline-flex !important;
width: fit-content !important;
border: 1px solid rgba(125, 211, 252, 0.28) !important;
border-radius: 999px !important;
padding: 0.24rem 0.5rem !important;
background: rgba(14, 165, 233, 0.12) !important;
color: rgba(224, 242, 254, 0.96) !important;
}
body.research-graph-demo .fp-side .fp-tabs {
background: rgba(2, 6, 23, 0.36) !important;
border-top: 1px solid rgba(125, 211, 252, 0.18) !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.18) !important;
}
body.research-graph-demo .fp-side .fp-tab {
background: transparent !important;
color: rgba(203, 213, 225, 0.76) !important;
border-bottom: 2px solid transparent !important;
}
body.research-graph-demo .fp-side .fp-tab.active {
background: rgba(56, 189, 248, 0.12) !important;
color: rgba(248, 250, 252, 0.98) !important;
border-bottom-color: #38bdf8 !important;
}
body.research-graph-demo .fp-side .fp-section,
body.research-graph-demo .fp-side .fp-section.active {
background: transparent !important;
color: rgba(203, 213, 225, 0.86) !important;
}
body.research-graph-demo .fp-side .fp-section-label {
color: rgba(125, 211, 252, 0.92) !important;
background: transparent !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.16) !important;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.research-graph-demo .fp-side .fp-narrative {
color: rgba(226, 232, 240, 0.92) !important;
background: rgba(15, 23, 42, 0.48) !important;
border: 1px solid rgba(125, 211, 252, 0.14) !important;
border-radius: 0.6rem !important;
padding: 0.55rem 0.65rem !important;
}
body.research-graph-demo .fp-side .graph-detail-toggle {
background: rgba(15, 23, 42, 0.98) !important;
color: rgba(248, 250, 252, 0.98) !important;
border: 1px solid rgba(125, 211, 252, 0.48) !important;
}
}
/* ------------------------------------------------------------
DISCOURSE CARD SKIN V1
Aligns discourse/frame cards with the repaired BLACKBONE sidebar.
Scoped only to .fp-side.
------------------------------------------------------------ */
@media (min-width: 961px) {
body.research-graph-demo .fp-side [class*="discourse"],
body.research-graph-demo .fp-side [class*="Discourse"],
body.research-graph-demo .fp-side [class*="frame"],
body.research-graph-demo .fp-side [class*="Frame"],
body.research-graph-demo .fp-side [class*="sentence"],
body.research-graph-demo .fp-side [class*="Sentence"],
body.research-graph-demo .fp-side [class*="source"],
body.research-graph-demo .fp-side [class*="Source"],
body.research-graph-demo .fp-side [class*="citation"],
body.research-graph-demo .fp-side [class*="Citation"] {
color: rgba(203, 213, 225, 0.88) !important;
}
body.research-graph-demo .fp-side [class*="card"],
body.research-graph-demo .fp-side [class*="Card"],
body.research-graph-demo .fp-side [class*="frame-card"],
body.research-graph-demo .fp-side [class*="discourse-card"],
body.research-graph-demo .fp-side [class*="sentence-card"],
body.research-graph-demo .fp-side [class*="source-card"] {
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.52)) !important;
border: 1px solid rgba(125, 211, 252, 0.16) !important;
border-radius: 0.72rem !important;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22) !important;
}
body.research-graph-demo .fp-side [class*="discourse-card"],
body.research-graph-demo .fp-side [class*="frame-card"],
body.research-graph-demo .fp-side [class*="sentence-card"] {
margin: 0.55rem 0 !important;
padding: 0.65rem 0.72rem !important;
}
body.research-graph-demo .fp-side [class*="discourse"] h1,
body.research-graph-demo .fp-side [class*="discourse"] h2,
body.research-graph-demo .fp-side [class*="discourse"] h3,
body.research-graph-demo .fp-side [class*="frame"] h1,
body.research-graph-demo .fp-side [class*="frame"] h2,
body.research-graph-demo .fp-side [class*="frame"] h3,
body.research-graph-demo .fp-side [class*="title"],
body.research-graph-demo .fp-side [class*="Title"] {
color: rgba(248, 250, 252, 0.98) !important;
background: transparent !important;
}
body.research-graph-demo .fp-side [class*="label"],
body.research-graph-demo .fp-side [class*="Label"],
body.research-graph-demo .fp-side [class*="role"],
body.research-graph-demo .fp-side [class*="Role"] {
color: rgba(125, 211, 252, 0.92) !important;
background: transparent !important;
letter-spacing: 0.07em;
text-transform: uppercase;
}
body.research-graph-demo .fp-side [class*="score"],
body.research-graph-demo .fp-side [class*="Score"] {
color: #facc15 !important;
background: rgba(250, 204, 21, 0.08) !important;
border: 1px solid rgba(250, 204, 21, 0.20) !important;
border-radius: 999px !important;
padding: 0.12rem 0.42rem !important;
font-weight: 800 !important;
}
body.research-graph-demo .fp-side [class*="citation"],
body.research-graph-demo .fp-side [class*="Citation"],
body.research-graph-demo .fp-side [class*="source"],
body.research-graph-demo .fp-side [class*="Source"] {
background: transparent !important;
color: rgba(148, 163, 184, 0.86) !important;
}
body.research-graph-demo .fp-side a,
body.research-graph-demo .fp-side [class*="source"] a,
body.research-graph-demo .fp-side [class*="citation"] a {
color: rgba(103, 232, 249, 0.96) !important;
text-decoration: none !important;
}
body.research-graph-demo .fp-side a:hover,
body.research-graph-demo .fp-side [class*="source"] a:hover,
body.research-graph-demo .fp-side [class*="citation"] a:hover {
color: rgba(186, 230, 253, 1) !important;
text-decoration: underline !important;
}
body.research-graph-demo .fp-side mark,
body.research-graph-demo .fp-side [class*="highlight"],
body.research-graph-demo .fp-side [class*="Highlight"] {
background: rgba(250, 204, 21, 0.14) !important;
color: rgba(248, 250, 252, 0.98) !important;
border-radius: 0.22rem !important;
padding: 0.03rem 0.14rem !important;
}
body.research-graph-demo .fp-side hr,
body.research-graph-demo .fp-side [class*="divider"],
body.research-graph-demo .fp-side [class*="Divider"] {
border-color: rgba(125, 211, 252, 0.14) !important;
}
body.research-graph-demo .fp-side pre,
body.research-graph-demo .fp-side code {
background: rgba(2, 6, 23, 0.44) !important;
color: rgba(226, 232, 240, 0.94) !important;
border: 1px solid rgba(125, 211, 252, 0.12) !important;
border-radius: 0.5rem !important;
}
}
/* ------------------------------------------------------------
DISCOURSE CARD CONTRAST REPAIR V2
Restores cyan/white hierarchy inside discourse cards.
------------------------------------------------------------ */
@media (min-width: 961px) {
/* Card containers */
body.research-graph-demo .fp-side [class*="discourse"],
body.research-graph-demo .fp-side [class*="Discourse"],
body.research-graph-demo .fp-side [class*="frame"],
body.research-graph-demo .fp-side [class*="Frame"],
body.research-graph-demo .fp-side [class*="sentence"],
body.research-graph-demo .fp-side [class*="Sentence"] {
color: rgba(226, 232, 240, 0.92) !important;
}
/* Discourse card boxes */
body.research-graph-demo .fp-side [class*="discourse-card"],
body.research-graph-demo .fp-side [class*="DiscourseCard"],
body.research-graph-demo .fp-side [class*="frame-card"],
body.research-graph-demo .fp-side [class*="FrameCard"],
body.research-graph-demo .fp-side [class*="sentence-card"],
body.research-graph-demo .fp-side [class*="SentenceCard"],
body.research-graph-demo .fp-side .fp-narrative > div {
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(15, 23, 42, 0.58)) !important;
border: 1px solid rgba(125, 211, 252, 0.20) !important;
border-radius: 0.72rem !important;
color: rgba(226, 232, 240, 0.92) !important;
}
/* Primary discourse titles / numbered frame labels */
body.research-graph-demo .fp-side [class*="discourse"] h1,
body.research-graph-demo .fp-side [class*="discourse"] h2,
body.research-graph-demo .fp-side [class*="discourse"] h3,
body.research-graph-demo .fp-side [class*="frame"] h1,
body.research-graph-demo .fp-side [class*="frame"] h2,
body.research-graph-demo .fp-side [class*="frame"] h3,
body.research-graph-demo .fp-side [class*="sentence"] h1,
body.research-graph-demo .fp-side [class*="sentence"] h2,
body.research-graph-demo .fp-side [class*="sentence"] h3,
body.research-graph-demo .fp-side [class*="frame-title"],
body.research-graph-demo .fp-side [class*="FrameTitle"],
body.research-graph-demo .fp-side [class*="discourse-title"],
body.research-graph-demo .fp-side [class*="DiscourseTitle"],
body.research-graph-demo .fp-side [class*="sentence-title"],
body.research-graph-demo .fp-side [class*="SentenceTitle"] {
color: rgba(248, 250, 252, 0.98) !important;
background: transparent !important;
font-weight: 800 !important;
}
/* Role/category labels like governance, narrative, source_side, layer */
body.research-graph-demo .fp-side [class*="role"],
body.research-graph-demo .fp-side [class*="Role"],
body.research-graph-demo .fp-side [class*="label"],
body.research-graph-demo .fp-side [class*="Label"],
body.research-graph-demo .fp-side [class*="meta"],
body.research-graph-demo .fp-side [class*="Meta"],
body.research-graph-demo .fp-side [class*="tag"],
body.research-graph-demo .fp-side [class*="Tag"],
body.research-graph-demo .fp-side [class*="chip"],
body.research-graph-demo .fp-side [class*="Chip"] {
color: rgba(125, 211, 252, 0.95) !important;
}
/* Make explicit metadata chips match the sidebar */
body.research-graph-demo .fp-side [class*="tag"],
body.research-graph-demo .fp-side [class*="Tag"],
body.research-graph-demo .fp-side [class*="chip"],
body.research-graph-demo .fp-side [class*="Chip"] {
display: inline-flex !important;
width: fit-content !important;
border: 1px solid rgba(125, 211, 252, 0.26) !important;
border-radius: 999px !important;
padding: 0.12rem 0.42rem !important;
background: rgba(14, 165, 233, 0.10) !important;
color: rgba(224, 242, 254, 0.96) !important;
}
/* Body text should be muted white, not flat gray */
body.research-graph-demo .fp-side [class*="sentence-text"],
body.research-graph-demo .fp-side [class*="SentenceText"],
body.research-graph-demo .fp-side [class*="excerpt"],
body.research-graph-demo .fp-side [class*="Excerpt"],
body.research-graph-demo .fp-side [class*="explanation"],
body.research-graph-demo .fp-side [class*="Explanation"],
body.research-graph-demo .fp-side [class*="body"],
body.research-graph-demo .fp-side [class*="Body"] {
color: rgba(226, 232, 240, 0.92) !important;
}
/* Generic small/meta text stays softer */
body.research-graph-demo .fp-side [class*="citation"],
body.research-graph-demo .fp-side [class*="Citation"],
body.research-graph-demo .fp-side [class*="source"],
body.research-graph-demo .fp-side [class*="Source"] {
color: rgba(148, 163, 184, 0.88) !important;
}
body.research-graph-demo .fp-side [class*="source"] a,
body.research-graph-demo .fp-side [class*="Source"] a,
body.research-graph-demo .fp-side [class*="citation"] a,
body.research-graph-demo .fp-side [class*="Citation"] a,
body.research-graph-demo .fp-side a {
color: rgba(103, 232, 249, 0.98) !important;
}
/* Scores and highlighted spans */
body.research-graph-demo .fp-side [class*="score"],
body.research-graph-demo .fp-side [class*="Score"] {
color: #facc15 !important;
background: rgba(250, 204, 21, 0.08) !important;
border-color: rgba(250, 204, 21, 0.22) !important;
}
body.research-graph-demo .fp-side mark,
body.research-graph-demo .fp-side [class*="highlight"],
body.research-graph-demo .fp-side [class*="Highlight"] {
background: rgba(250, 204, 21, 0.16) !important;
color: rgba(248, 250, 252, 0.98) !important;
}
}
/* ------------------------------------------------------------
ROLE-TABBED DISCOURSE CARD STYLE V1
Discourse belongs inside Narrative/Governance/Leadership/Analysis.
------------------------------------------------------------ */
@media (min-width: 961px) {
body.research-graph-demo .fp-side .bb-hidden-generic-discourse-heading {
display: none !important;
}
body.research-graph-demo .fp-side .bb-role-discourse-slot {
margin-top: 0.75rem !important;
padding-top: 0.65rem !important;
border-top: 1px solid rgba(125, 211, 252, 0.16) !important;
background: transparent !important;
}
body.research-graph-demo .fp-side .bb-role-discourse-heading {
margin: 0 0 0.55rem !important;
color: rgba(125, 211, 252, 0.96) !important;
background: transparent !important;
font-size: 0.72rem !important;
font-weight: 900 !important;
letter-spacing: 0.09em !important;
text-transform: uppercase !important;
}
body.research-graph-demo .fp-side .bb-role-discourse-body {
display: grid !important;
gap: 0.62rem !important;
background: transparent !important;
}
body.research-graph-demo .fp-side .bb-role-discourse-card {
margin: 0 !important;
padding: 0.65rem 0.72rem !important;
border: 1px solid rgba(125, 211, 252, 0.20) !important;
border-radius: 0.72rem !important;
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.62)) !important;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24) !important;
color: rgba(226, 232, 240, 0.94) !important;
}
body.research-graph-demo .fp-side .bb-role-discourse-card *,
body.research-graph-demo .fp-side .bb-role-discourse-slot * {
color: rgba(226, 232, 240, 0.94) !important;
}
body.research-graph-demo .fp-side .bb-role-discourse-card h1,
body.research-graph-demo .fp-side .bb-role-discourse-card h2,
body.research-graph-demo .fp-side .bb-role-discourse-card h3,
body.research-graph-demo .fp-side .bb-role-discourse-card h4,
body.research-graph-demo .fp-side .bb-role-discourse-card strong,
body.research-graph-demo .fp-side .bb-role-discourse-card b {
color: rgba(248, 250, 252, 0.99) !important;
background: transparent !important;
font-weight: 850 !important;
}
body.research-graph-demo .fp-side .bb-role-discourse-card [class*="label"],
body.research-graph-demo .fp-side .bb-role-discourse-card [class*="Label"],
body.research-graph-demo .fp-side .bb-role-discourse-card [class*="role"],
body.research-graph-demo .fp-side .bb-role-discourse-card [class*="Role"],
body.research-graph-demo .fp-side .bb-role-discourse-card [class*="tag"],
body.research-graph-demo .fp-side .bb-role-discourse-card [class*="Tag"],
body.research-graph-demo .fp-side .bb-role-discourse-card [class*="chip"],
body.research-graph-demo .fp-side .bb-role-discourse-card [class*="Chip"],
body.research-graph-demo .fp-side .bb-role-discourse-card [class*="meta"],
body.research-graph-demo .fp-side .bb-role-discourse-card [class*="Meta"] {
color: rgba(125, 211, 252, 0.96) !important;
background: transparent !important;
}
body.research-graph-demo .fp-side .bb-role-discourse-card [class*="score"],
body.research-graph-demo .fp-side .bb-role-discourse-card [class*="Score"] {
color: #facc15 !important;
background: rgba(250, 204, 21, 0.08) !important;
border: 1px solid rgba(250, 204, 21, 0.22) !important;
border-radius: 999px !important;
padding: 0.12rem 0.42rem !important;
font-weight: 850 !important;
}
body.research-graph-demo .fp-side .bb-role-discourse-card a {
color: rgba(103, 232, 249, 0.98) !important;
text-decoration: none !important;
}
body.research-graph-demo .fp-side .bb-role-discourse-card a:hover {
color: rgba(186, 230, 253, 1) !important;
text-decoration: underline !important;
}
body.research-graph-demo .fp-side .bb-role-discourse-card mark,
body.research-graph-demo .fp-side .bb-role-discourse-card [class*="highlight"],
body.research-graph-demo .fp-side .bb-role-discourse-card [class*="Highlight"] {
background: rgba(250, 204, 21, 0.16) !important;
color: rgba(248, 250, 252, 0.99) !important;
border-radius: 0.22rem !important;
padding: 0.03rem 0.14rem !important;
}
body.research-graph-demo .fp-side .bb-role-discourse-card [class*="citation"],
body.research-graph-demo .fp-side .bb-role-discourse-card [class*="Citation"],
body.research-graph-demo .fp-side .bb-role-discourse-card [class*="source"],
body.research-graph-demo .fp-side .bb-role-discourse-card [class*="Source"] {
color: rgba(148, 163, 184, 0.90) !important;
}
}
/* ------------------------------------------------------------
ROLE-MOUNTED DISCOURSE OVERRIDE V4
Fixes old inline light-mode discourse styles inside role tabs.
------------------------------------------------------------ */
@media (min-width: 961px) {
body.research-graph-demo .fp-side .fpdisc-mounted-role {
margin-top: 0.85rem !important;
padding-top: 0.72rem !important;
border-top: 1px solid rgba(125, 211, 252, 0.16) !important;
background: transparent !important;
color: rgba(226, 232, 240, 0.94) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role,
body.research-graph-demo .fp-side .fpdisc-mounted-role * {
color: rgba(226, 232, 240, 0.94) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-title {
color: rgba(248, 250, 252, 0.99) !important;
font-size: 0.82rem !important;
font-weight: 900 !important;
background: transparent !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-subtitle {
margin-top: 0.24rem !important;
color: rgba(203, 213, 225, 0.84) !important;
font-size: 0.68rem !important;
line-height: 1.35 !important;
background: transparent !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="background:#fff"],
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="background:#f7fff8"],
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="background:#f9fafb"],
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="background:#fffaf0"],
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="border:1px solid #ddd"] {
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.54)) !important;
border-color: rgba(125, 211, 252, 0.18) !important;
color: rgba(226, 232, 240, 0.94) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="border-left:4px solid #2b7a3d"] {
border-left: 3px solid rgba(94, 234, 212, 0.82) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="border-left:4px solid #6b7280"] {
border-left: 3px solid rgba(56, 189, 248, 0.72) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="border-left:4px solid #b7791f"] {
border-left: 3px solid rgba(250, 204, 21, 0.76) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="color:#222"],
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="color:#666"],
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="color:#555"],
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="color:#8a5a00"] {
color: rgba(226, 232, 240, 0.94) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role b,
body.research-graph-demo .fp-side .fpdisc-mounted-role strong {
color: rgba(248, 250, 252, 0.99) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role a {
color: rgba(103, 232, 249, 0.98) !important;
font-weight: 800 !important;
text-decoration: none !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role a:hover {
color: rgba(186, 230, 253, 1) !important;
text-decoration: underline !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role table,
body.research-graph-demo .fp-side .fpdisc-mounted-role table[style] {
width: 100% !important;
background: rgba(2, 6, 23, 0.36) !important;
color: rgba(226, 232, 240, 0.92) !important;
border-collapse: collapse !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role th,
body.research-graph-demo .fp-side .fpdisc-mounted-role td {
border-color: rgba(125, 211, 252, 0.12) !important;
color: rgba(203, 213, 225, 0.88) !important;
background: transparent !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role th {
color: rgba(248, 250, 252, 0.94) !important;
background: rgba(15, 23, 42, 0.72) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role summary {
color: rgba(125, 211, 252, 0.94) !important;
font-weight: 850 !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role mark {
color: rgba(248, 250, 252, 0.99) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role mark[style*="background:#e6fffa"] {
background: rgba(94, 234, 212, 0.18) !important;
border-bottom-color: rgba(94, 234, 212, 0.72) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role mark[style*="background:#fff4d6"] {
background: rgba(250, 204, 21, 0.16) !important;
border-bottom-color: rgba(250, 204, 21, 0.76) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role mark[style*="background:#f0e8ff"] {
background: rgba(167, 139, 250, 0.16) !important;
border-bottom-color: rgba(167, 139, 250, 0.72) !important;
}
}
/* ------------------------------------------------------------
SPAN + NLP DETAILS STYLE V1
Keeps technical detail readable without overpowering discourse cards.
------------------------------------------------------------ */
@media (min-width: 961px) {
body.research-graph-demo .fp-side details,
body.research-graph-demo .fp-side .fpdisc-details {
margin-top: 0.6rem !important;
padding-top: 0.45rem !important;
border-top: 1px solid rgba(125, 211, 252, 0.14) !important;
background: transparent !important;
}
body.research-graph-demo .fp-side details summary,
body.research-graph-demo .fp-side .fpdisc-details summary {
cursor: pointer !important;
color: rgba(103, 232, 249, 0.96) !important;
font-size: 0.66rem !important;
font-weight: 900 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
body.research-graph-demo .fp-side details summary:hover,
body.research-graph-demo .fp-side .fpdisc-details summary:hover {
color: rgba(186, 230, 253, 1) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role table,
body.research-graph-demo .fp-side .fpdisc-table {
display: block !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
margin-top: 0.55rem !important;
border: 1px solid rgba(125, 211, 252, 0.12) !important;
border-radius: 0.55rem !important;
background: rgba(2, 6, 23, 0.42) !important;
font-size: 0.64rem !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role table thead,
body.research-graph-demo .fp-side .fpdisc-mounted-role table tbody,
body.research-graph-demo .fp-side .fpdisc-mounted-role table tr,
body.research-graph-demo .fp-side .fpdisc-table thead,
body.research-graph-demo .fp-side .fpdisc-table tbody,
body.research-graph-demo .fp-side .fpdisc-table tr {
width: 100% !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role table th,
body.research-graph-demo .fp-side .fpdisc-mounted-role table td,
body.research-graph-demo .fp-side .fpdisc-table th,
body.research-graph-demo .fp-side .fpdisc-table td {
padding: 0.35rem 0.42rem !important;
vertical-align: top !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.10) !important;
color: rgba(203, 213, 225, 0.90) !important;
background: transparent !important;
line-height: 1.35 !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role table th,
body.research-graph-demo .fp-side .fpdisc-table th {
color: rgba(248, 250, 252, 0.96) !important;
background: rgba(15, 23, 42, 0.78) !important;
font-weight: 900 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role table td:first-child,
body.research-graph-demo .fp-side .fpdisc-table td:first-child {
color: rgba(125, 211, 252, 0.94) !important;
font-weight: 800 !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role table td:nth-child(2),
body.research-graph-demo .fp-side .fpdisc-table td:nth-child(2) {
color: rgba(248, 250, 252, 0.94) !important;
font-weight: 700 !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role table td:nth-child(3),
body.research-graph-demo .fp-side .fpdisc-table td:nth-child(3) {
color: rgba(186, 230, 253, 0.92) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role table td:nth-child(4),
body.research-graph-demo .fp-side .fpdisc-table td:nth-child(4) {
color: rgba(148, 163, 184, 0.92) !important;
}
body.research-graph-demo .fp-side .fpdisc-advanced,
body.research-graph-demo .fp-side details > div:not(.fpdisc-table) {
margin-top: 0.55rem !important;
padding: 0.55rem 0.6rem !important;
border: 1px solid rgba(125, 211, 252, 0.12) !important;
border-radius: 0.55rem !important;
background: rgba(2, 6, 23, 0.34) !important;
color: rgba(203, 213, 225, 0.90) !important;
font-size: 0.66rem !important;
line-height: 1.45 !important;
}
body.research-graph-demo .fp-side .fpdisc-advanced b,
body.research-graph-demo .fp-side details b {
color: rgba(248, 250, 252, 0.96) !important;
font-weight: 900 !important;
}
}
/* ------------------------------------------------------------
SIDEBAR WIDTH + TECHNICAL DETAIL READABILITY V1
------------------------------------------------------------ */
@media (min-width: 961px) {
:root {
--graph-side-panel-w: 460px;
}
body.research-graph-demo.graph-panel-collapsed {
--graph-side-panel-w: 48px;
}
body.research-graph-demo .fp-side {
width: 460px !important;
min-width: 460px !important;
max-width: 460px !important;
}
body.research-graph-demo.graph-panel-collapsed .fp-side {
width: 460px !important;
min-width: 460px !important;
max-width: 460px !important;
transform: translateX(412px) !important;
}
body.research-graph-demo.graph-panel-collapsed #mynetwork {
right: calc(48px + 0.5rem) !important;
}
body.research-graph-demo:not(.graph-panel-collapsed) #mynetwork {
right: calc(460px + 0.5rem) !important;
}
}
/* ------------------------------------------------------------
SPAN + NLP DETAILS STYLE V1
Keeps technical detail readable without overpowering discourse cards.
------------------------------------------------------------ */
@media (min-width: 961px) {
body.research-graph-demo .fp-side details,
body.research-graph-demo .fp-side .fpdisc-details {
margin-top: 0.6rem !important;
padding-top: 0.45rem !important;
border-top: 1px solid rgba(125, 211, 252, 0.14) !important;
background: transparent !important;
}
body.research-graph-demo .fp-side details summary,
body.research-graph-demo .fp-side .fpdisc-details summary {
cursor: pointer !important;
color: rgba(103, 232, 249, 0.96) !important;
font-size: 0.66rem !important;
font-weight: 900 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
body.research-graph-demo .fp-side details summary:hover,
body.research-graph-demo .fp-side .fpdisc-details summary:hover {
color: rgba(186, 230, 253, 1) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role table,
body.research-graph-demo .fp-side .fpdisc-table {
display: block !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
margin-top: 0.55rem !important;
border: 1px solid rgba(125, 211, 252, 0.12) !important;
border-radius: 0.55rem !important;
background: rgba(2, 6, 23, 0.42) !important;
font-size: 0.64rem !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role table thead,
body.research-graph-demo .fp-side .fpdisc-mounted-role table tbody,
body.research-graph-demo .fp-side .fpdisc-mounted-role table tr,
body.research-graph-demo .fp-side .fpdisc-table thead,
body.research-graph-demo .fp-side .fpdisc-table tbody,
body.research-graph-demo .fp-side .fpdisc-table tr {
width: 100% !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role table th,
body.research-graph-demo .fp-side .fpdisc-mounted-role table td,
body.research-graph-demo .fp-side .fpdisc-table th,
body.research-graph-demo .fp-side .fpdisc-table td {
padding: 0.35rem 0.42rem !important;
vertical-align: top !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.10) !important;
color: rgba(203, 213, 225, 0.90) !important;
background: transparent !important;
line-height: 1.35 !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role table th,
body.research-graph-demo .fp-side .fpdisc-table th {
color: rgba(248, 250, 252, 0.96) !important;
background: rgba(15, 23, 42, 0.78) !important;
font-weight: 900 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role table td:first-child,
body.research-graph-demo .fp-side .fpdisc-table td:first-child {
color: rgba(125, 211, 252, 0.94) !important;
font-weight: 800 !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role table td:nth-child(2),
body.research-graph-demo .fp-side .fpdisc-table td:nth-child(2) {
color: rgba(248, 250, 252, 0.94) !important;
font-weight: 700 !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role table td:nth-child(3),
body.research-graph-demo .fp-side .fpdisc-table td:nth-child(3) {
color: rgba(186, 230, 253, 0.92) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role table td:nth-child(4),
body.research-graph-demo .fp-side .fpdisc-table td:nth-child(4) {
color: rgba(148, 163, 184, 0.92) !important;
}
body.research-graph-demo .fp-side .fpdisc-advanced,
body.research-graph-demo .fp-side details > div:not(.fpdisc-table) {
margin-top: 0.55rem !important;
padding: 0.55rem 0.6rem !important;
border: 1px solid rgba(125, 211, 252, 0.12) !important;
border-radius: 0.55rem !important;
background: rgba(2, 6, 23, 0.34) !important;
color: rgba(203, 213, 225, 0.90) !important;
font-size: 0.66rem !important;
line-height: 1.45 !important;
}
body.research-graph-demo .fp-side .fpdisc-advanced b,
body.research-graph-demo .fp-side details b {
color: rgba(248, 250, 252, 0.96) !important;
font-weight: 900 !important;
}
}
/* ------------------------------------------------------------
SPAN HIGHLIGHT COLOR SYSTEM V1
------------------------------------------------------------ */
@media (min-width: 961px) {
body.research-graph-demo .fp-side mark,
body.research-graph-demo .fp-side .fpdisc-mark {
border-radius: 0.22rem !important;
padding: 0.02rem 0.16rem !important;
color: rgba(248, 250, 252, 0.99) !important;
font-weight: 750 !important;
}
body.research-graph-demo .fp-side .fpdisc-mark-agent,
body.research-graph-demo .fp-side mark[style*="background:#e6fffa"] {
background: rgba(45, 212, 191, 0.18) !important;
border-bottom: 2px solid rgba(45, 212, 191, 0.72) !important;
color: rgba(240, 253, 250, 0.99) !important;
}
body.research-graph-demo .fp-side .fpdisc-mark-action,
body.research-graph-demo .fp-side mark[style*="background:#fff4d6"] {
background: rgba(250, 204, 21, 0.16) !important;
border-bottom: 2px solid rgba(250, 204, 21, 0.74) !important;
color: rgba(254, 249, 195, 0.99) !important;
}
body.research-graph-demo .fp-side .fpdisc-mark-target,
body.research-graph-demo .fp-side mark[style*="background:#f0e8ff"] {
background: rgba(167, 139, 250, 0.18) !important;
border-bottom: 2px solid rgba(167, 139, 250, 0.72) !important;
color: rgba(245, 243, 255, 0.99) !important;
}
}
/* ------------------------------------------------------------
BLACKBONE GRAPH SIDEBAR FINAL POLISH BUNDLE V6
Purpose:
- widen the discourse/detail panel on desktop
- even rhythm between role summary and discourse samples
- make source titles and frame titles white
- keep meta/source/technical labels secondary
- keep span/NLP details readable without dominating the card
- style old inline-rendered discourse blocks mounted inside role tabs
------------------------------------------------------------ */
@media (min-width: 961px) {
:root {
--graph-side-panel-w: 460px;
}
body.research-graph-demo.graph-panel-collapsed {
--graph-side-panel-w: 48px;
}
body.research-graph-demo .fp-side,
body.research-graph-demo .fp-side.graph-detail-panel-exact-v3 {
width: 460px !important;
min-width: 460px !important;
max-width: 460px !important;
background:
radial-gradient(circle at 18% 8%, rgba(56, 189, 248, 0.08), transparent 18rem),
#0f172a !important;
color: rgba(248, 250, 252, 0.96) !important;
}
body.research-graph-demo:not(.graph-panel-collapsed) #mynetwork,
body.research-graph-demo:not(.graph-panel-collapsed) #mynetwork.graph-canvas-exact-v3 {
right: calc(460px + 0.5rem) !important;
}
body.research-graph-demo.graph-panel-collapsed .fp-side,
body.research-graph-demo.graph-panel-collapsed .fp-side.graph-detail-panel-exact-v3 {
width: 460px !important;
min-width: 460px !important;
max-width: 460px !important;
transform: translateX(412px) !important;
overflow: hidden !important;
}
body.research-graph-demo.graph-panel-collapsed #mynetwork,
body.research-graph-demo.graph-panel-collapsed #mynetwork.graph-canvas-exact-v3 {
right: calc(48px + 0.5rem) !important;
}
body.research-graph-demo.graph-panel-collapsed .fp-side > *:not(.graph-detail-toggle) {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
body.research-graph-demo .fp-side .graph-detail-toggle {
background: rgba(15, 23, 42, 0.98) !important;
color: rgba(248, 250, 252, 0.98) !important;
border: 1px solid rgba(125, 211, 252, 0.48) !important;
}
/* Role tab rhythm */
body.research-graph-demo .fp-side .fp-tabs {
background: rgba(2, 6, 23, 0.36) !important;
border-top: 1px solid rgba(125, 211, 252, 0.18) !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.18) !important;
}
body.research-graph-demo .fp-side .fp-tab {
background: transparent !important;
color: rgba(203, 213, 225, 0.76) !important;
border-bottom: 2px solid transparent !important;
}
body.research-graph-demo .fp-side .fp-tab.active {
background: rgba(56, 189, 248, 0.12) !important;
color: rgba(248, 250, 252, 0.98) !important;
border-bottom-color: #38bdf8 !important;
}
body.research-graph-demo .fp-side .fp-section,
body.research-graph-demo .fp-side .fp-section.active {
background: transparent !important;
color: rgba(203, 213, 225, 0.88) !important;
}
body.research-graph-demo .fp-side .fp-section.active {
padding-top: 0.95rem !important;
padding-bottom: 1.05rem !important;
}
body.research-graph-demo .fp-side .fp-section-label {
margin-bottom: 0.62rem !important;
padding-bottom: 0.42rem !important;
color: rgba(103, 232, 249, 0.96) !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.15) !important;
font-size: 0.72rem !important;
font-weight: 900 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
body.research-graph-demo .fp-side .fp-title,
body.research-graph-demo .fp-side h1,
body.research-graph-demo .fp-side h2,
body.research-graph-demo .fp-side h3,
body.research-graph-demo .fp-side strong,
body.research-graph-demo .fp-side b {
color: rgba(248, 250, 252, 0.98) !important;
}
body.research-graph-demo .fp-side .fp-subtitle,
body.research-graph-demo .fp-side .fp-muted,
body.research-graph-demo .fp-side .fp-debug-meta,
body.research-graph-demo .fp-side p,
body.research-graph-demo .fp-side li,
body.research-graph-demo .fp-side small {
color: rgba(203, 213, 225, 0.86) !important;
}
/* Mounted discourse section */
body.research-graph-demo .fp-side .fpdisc-mounted-role {
margin-top: 0.95rem !important;
padding-top: 0.9rem !important;
border-top: 1px solid rgba(125, 211, 252, 0.18) !important;
background: transparent !important;
color: rgba(226, 232, 240, 0.94) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role,
body.research-graph-demo .fp-side .fpdisc-mounted-role * {
color: rgba(226, 232, 240, 0.94) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-title {
margin: 0 0 0.3rem 0 !important;
color: rgba(248, 250, 252, 0.99) !important;
background: transparent !important;
font-size: 0.92rem !important;
line-height: 1.15 !important;
font-weight: 950 !important;
letter-spacing: 0.075em !important;
text-transform: uppercase !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-subtitle {
margin: 0 0 0.62rem 0 !important;
color: rgba(148, 163, 184, 0.92) !important;
background: transparent !important;
font-size: 0.70rem !important;
line-height: 1.35 !important;
letter-spacing: 0.055em !important;
text-transform: uppercase !important;
}
body.research-graph-demo .fp-side .fpdisc-legend {
display: flex !important;
gap: 0.35rem !important;
flex-wrap: wrap !important;
margin: 0.42rem 0 0.48rem !important;
background: transparent !important;
font-size: 0.65rem !important;
}
/* Source group container: U.S. DISCOURSE / KOREA DISCOURSE. */
body.research-graph-demo .fp-side .fpdisc-mounted-role > div[style*="border:1px solid #ddd"],
body.research-graph-demo .fp-side .fpdisc-mounted-role > div[style*="background:#fff"] {
margin-top: 0.58rem !important;
padding: 0.72rem 0.76rem !important;
border: 1px solid rgba(125, 211, 252, 0.20) !important;
border-radius: 0.72rem !important;
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(15, 23, 42, 0.58)) !important;
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22) !important;
color: rgba(226, 232, 240, 0.94) !important;
}
/* Source title: KOREA DISCOURSE should be white. */
body.research-graph-demo .fp-side .fpdisc-mounted-role > div[style*="border:1px solid #ddd"] > div:first-child,
body.research-graph-demo .fp-side .fpdisc-mounted-role > div[style*="background:#fff"] > div:first-child {
color: rgba(248, 250, 252, 0.99) !important;
background: transparent !important;
font-size: 0.82rem !important;
line-height: 1.18 !important;
font-weight: 950 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
/* Source group meta line. */
body.research-graph-demo .fp-side .fpdisc-mounted-role > div[style*="border:1px solid #ddd"] > div:nth-child(2),
body.research-graph-demo .fp-side .fpdisc-mounted-role > div[style*="background:#fff"] > div:nth-child(2) {
margin-top: 0.22rem !important;
color: rgba(148, 163, 184, 0.92) !important;
background: transparent !important;
font-size: 0.66rem !important;
line-height: 1.3 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
/* Old inline-rendered discourse card container. */
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="border-left:4px solid"] {
margin-top: 0.62rem !important;
padding: 0.7rem 0.74rem !important;
border-radius: 0.64rem !important;
background:
linear-gradient(180deg, rgba(2, 6, 23, 0.50), rgba(15, 23, 42, 0.64)) !important;
border-top: 1px solid rgba(125, 211, 252, 0.10) !important;
border-right: 1px solid rgba(125, 211, 252, 0.10) !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.10) !important;
color: rgba(226, 232, 240, 0.94) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="border-left:4px solid #2b7a3d"] {
border-left: 3px solid rgba(94, 234, 212, 0.82) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="border-left:4px solid #6b7280"] {
border-left: 3px solid rgba(56, 189, 248, 0.72) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="border-left:4px solid #b7791f"] {
border-left: 3px solid rgba(250, 204, 21, 0.76) !important;
}
/* Frame header row. */
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="border-left:4px solid"] > div:first-child {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 0.7rem !important;
margin-bottom: 0.42rem !important;
background: transparent !important;
}
/* Frame title: 3. SECONDARY FRAME should be white. */
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="border-left:4px solid"] > div:first-child > div:first-child {
color: rgba(248, 250, 252, 0.99) !important;
background: transparent !important;
font-size: 0.75rem !important;
line-height: 1.2 !important;
font-weight: 950 !important;
letter-spacing: 0.075em !important;
text-transform: uppercase !important;
}
/* Right-side role badge: LEADERSHIP / GOVERNANCE etc. */
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="border-left:4px solid"] > div:first-child > div:nth-child(2) {
flex: 0 0 auto !important;
color: rgba(186, 230, 253, 0.92) !important;
background: transparent !important;
font-size: 0.64rem !important;
line-height: 1.2 !important;
font-weight: 850 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
/* Public explanation + sentence text. */
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="border-left:4px solid"] > div:nth-child(2),
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="border-left:4px solid"] > div:nth-child(3),
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="border-left:4px solid"] > div:nth-child(4) {
color: rgba(226, 232, 240, 0.94) !important;
background: transparent !important;
font-size: 0.72rem !important;
line-height: 1.48 !important;
}
/* Technical details drawer. */
body.research-graph-demo .fp-side .fpdisc-mounted-role details {
margin-top: 0.58rem !important;
padding-top: 0.44rem !important;
border-top: 1px solid rgba(125, 211, 252, 0.14) !important;
background: transparent !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role details summary {
color: rgba(103, 232, 249, 0.96) !important;
background: transparent !important;
font-size: 0.65rem !important;
font-weight: 900 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role table,
body.research-graph-demo .fp-side .fpdisc-table {
display: block !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
margin-top: 0.48rem !important;
border: 1px solid rgba(125, 211, 252, 0.12) !important;
border-radius: 0.55rem !important;
background: rgba(2, 6, 23, 0.42) !important;
color: rgba(226, 232, 240, 0.92) !important;
font-size: 0.64rem !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role th,
body.research-graph-demo .fp-side .fpdisc-mounted-role td,
body.research-graph-demo .fp-side .fpdisc-table th,
body.research-graph-demo .fp-side .fpdisc-table td {
padding: 0.35rem 0.42rem !important;
vertical-align: top !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.10) !important;
background: transparent !important;
line-height: 1.35 !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role th,
body.research-graph-demo .fp-side .fpdisc-table th {
color: rgba(248, 250, 252, 0.96) !important;
background: rgba(15, 23, 42, 0.78) !important;
font-weight: 900 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role td,
body.research-graph-demo .fp-side .fpdisc-table td {
color: rgba(203, 213, 225, 0.90) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role td:first-child,
body.research-graph-demo .fp-side .fpdisc-table td:first-child {
color: rgba(125, 211, 252, 0.94) !important;
font-weight: 800 !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role td:nth-child(2),
body.research-graph-demo .fp-side .fpdisc-table td:nth-child(2) {
color: rgba(248, 250, 252, 0.94) !important;
font-weight: 700 !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role td:nth-child(3),
body.research-graph-demo .fp-side .fpdisc-table td:nth-child(3) {
color: rgba(186, 230, 253, 0.92) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role td:nth-child(4),
body.research-graph-demo .fp-side .fpdisc-table td:nth-child(4) {
color: rgba(148, 163, 184, 0.92) !important;
}
/* Advanced syntactic detail box. */
body.research-graph-demo .fp-side .fpdisc-advanced,
body.research-graph-demo .fp-side details > div:not(.fpdisc-table) {
margin-top: 0.55rem !important;
padding: 0.55rem 0.6rem !important;
border: 1px solid rgba(125, 211, 252, 0.12) !important;
border-radius: 0.55rem !important;
background: rgba(2, 6, 23, 0.34) !important;
color: rgba(203, 213, 225, 0.90) !important;
font-size: 0.66rem !important;
line-height: 1.45 !important;
}
body.research-graph-demo .fp-side .fpdisc-advanced b,
body.research-graph-demo .fp-side details b {
color: rgba(248, 250, 252, 0.96) !important;
font-weight: 900 !important;
}
/* Metadata and links. */
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="font-size:10px"],
body.research-graph-demo .fp-side .fpdisc-mounted-role .fpdisc-meta,
body.research-graph-demo .fp-side .fpdisc-mounted-role .fpdisc-citation,
body.research-graph-demo .fp-side .fpdisc-mounted-role .fpdisc-source {
color: rgba(148, 163, 184, 0.90) !important;
background: transparent !important;
font-size: 0.64rem !important;
line-height: 1.38 !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="font-size:10px"] b,
body.research-graph-demo .fp-side .fpdisc-mounted-role .fpdisc-meta b,
body.research-graph-demo .fp-side .fpdisc-mounted-role .fpdisc-citation b {
color: rgba(248, 250, 252, 0.96) !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role a,
body.research-graph-demo .fp-side .fpdisc-source-link,
body.research-graph-demo .fp-side .fpdisc-source a {
color: rgba(103, 232, 249, 0.98) !important;
font-weight: 800 !important;
text-decoration: none !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role a:hover,
body.research-graph-demo .fp-side .fpdisc-source-link:hover,
body.research-graph-demo .fp-side .fpdisc-source a:hover {
color: rgba(186, 230, 253, 1) !important;
text-decoration: underline !important;
}
/* Span highlights: agent/action/target. */
body.research-graph-demo .fp-side mark,
body.research-graph-demo .fp-side .fpdisc-mark {
border-radius: 0.22rem !important;
padding: 0.02rem 0.16rem !important;
color: rgba(248, 250, 252, 0.99) !important;
font-weight: 750 !important;
}
body.research-graph-demo .fp-side .fpdisc-mark-agent,
body.research-graph-demo .fp-side mark[style*="background:#e6fffa"] {
background: rgba(45, 212, 191, 0.18) !important;
border-bottom: 2px solid rgba(45, 212, 191, 0.72) !important;
color: rgba(240, 253, 250, 0.99) !important;
}
body.research-graph-demo .fp-side .fpdisc-mark-action,
body.research-graph-demo .fp-side mark[style*="background:#fff4d6"] {
background: rgba(250, 204, 21, 0.16) !important;
border-bottom: 2px solid rgba(250, 204, 21, 0.74) !important;
color: rgba(254, 249, 195, 0.99) !important;
}
body.research-graph-demo .fp-side .fpdisc-mark-target,
body.research-graph-demo .fp-side mark[style*="background:#f0e8ff"] {
background: rgba(167, 139, 250, 0.18) !important;
border-bottom: 2px solid rgba(167, 139, 250, 0.72) !important;
color: rgba(245, 243, 255, 0.99) !important;
}
}
/* ------------------------------------------------------------
ROLE-MOUNTED DISCOURSE READABILITY TUNE V7
Ground truth:
- role-tab mount behavior is correct
- source/frame headings already resolve mostly correctly
- metadata is intentionally muted but currently too flat
- keep renderer untouched
------------------------------------------------------------ */
@media (min-width: 961px) {
/* Source group titles: U.S. discourse / Korea discourse / Venezuela discourse */
body.research-graph-demo .fp-side .fpdisc-mounted-role > div[style*="border:1px solid #ddd"] > div:first-child,
body.research-graph-demo .fp-side .fpdisc-mounted-role > div[style*="background:#fff"] > div:first-child {
color: rgba(248, 250, 252, 0.99) !important;
font-size: 0.82rem !important;
font-weight: 950 !important;
letter-spacing: 0.015em !important;
text-transform: none !important;
}
/* Source subtitle line: original_baseline / opposition_expansion */
body.research-graph-demo .fp-side .fpdisc-mounted-role > div[style*="border:1px solid #ddd"] > div:nth-child(2),
body.research-graph-demo .fp-side .fpdisc-mounted-role > div[style*="background:#fff"] > div:nth-child(2),
body.research-graph-demo .fp-side .fpdisc-mounted-role .fp-muted {
color: rgba(148, 163, 184, 0.92) !important;
font-size: 0.66rem !important;
line-height: 1.35 !important;
}
/* Frame title row: 1. Secondary frame / 3. Review frame */
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="border-left:4px solid"] > div:first-child > div:first-child {
color: rgba(248, 250, 252, 0.99) !important;
font-size: 0.75rem !important;
font-weight: 950 !important;
letter-spacing: 0.01em !important;
}
/* Right-side role badge: narrative / governance / leadership / analysis */
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="border-left:4px solid"] > div:first-child > div:nth-child(2) {
color: rgba(125, 211, 252, 0.96) !important;
background: rgba(14, 165, 233, 0.10) !important;
border: 1px solid rgba(125, 211, 252, 0.24) !important;
border-radius: 999px !important;
padding: 0.08rem 0.42rem !important;
font-size: 0.58rem !important;
font-weight: 900 !important;
letter-spacing: 0.075em !important;
text-transform: uppercase !important;
}
/* Sentence body: keep it readable off-white */
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="border-left:4px solid"] > div:nth-child(2) {
color: rgba(226, 232, 240, 0.95) !important;
font-size: 0.72rem !important;
line-height: 1.55 !important;
}
/* Metadata blocks: still secondary, but not dead gray */
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="font-size:10px"],
body.research-graph-demo .fp-side .fpdisc-mounted-role .fpdisc-meta,
body.research-graph-demo .fp-side .fpdisc-mounted-role .fpdisc-citation,
body.research-graph-demo .fp-side .fpdisc-mounted-role .fpdisc-source {
color: rgba(176, 190, 211, 0.92) !important;
font-size: 0.64rem !important;
line-height: 1.45 !important;
}
body.research-graph-demo .fp-side .fpdisc-mounted-role div[style*="font-size:10px"] b,
body.research-graph-demo .fp-side .fpdisc-mounted-role .fpdisc-meta b,
body.research-graph-demo .fp-side .fpdisc-mounted-role .fpdisc-citation b {
color: rgba(248, 250, 252, 0.98) !important;
font-weight: 900 !important;
}
}
/* ------------------------------------------------------------
DUAL MODE SEQUENCE PANEL POLISH V1
Purpose: keep Dual mode functional while making the left
SequenceState inspector match the BLACKBONE graph reader.
------------------------------------------------------------ */
body.research-graph-demo .fp-sequence-side {
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(8, 13, 28, 0.98)) !important;
border-right: 1px solid rgba(125, 211, 252, 0.20) !important;
box-shadow: 18px 0 34px rgba(0, 0, 0, 0.22) !important;
color: rgba(226, 232, 240, 0.94) !important;
}
body.research-graph-demo .fp-sequence-side .fp-panel-header {
padding: 12px 14px 10px !important;
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(10, 16, 32, 0.92)) !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.18) !important;
}
body.research-graph-demo .fp-sequence-side .fp-title {
color: rgba(248, 250, 252, 0.96) !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
line-height: 1.25 !important;
}
body.research-graph-demo .fp-sequence-side .fp-subtitle,
body.research-graph-demo .fp-sequence-side .fp-debug-meta,
body.research-graph-demo .fp-sequence-side .fp-muted {
color: rgba(148, 163, 184, 0.92) !important;
font-size: 10.5px !important;
line-height: 1.45 !important;
}
body.research-graph-demo .fp-sequence-side .fp-object-chip {
display: inline-flex !important;
width: fit-content !important;
margin-top: 8px !important;
padding: 3px 8px !important;
border-radius: 999px !important;
border: 1px solid rgba(125, 211, 252, 0.28) !important;
background: rgba(14, 165, 233, 0.10) !important;
color: rgba(186, 230, 253, 0.94) !important;
font-size: 9.5px !important;
font-weight: 800 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
body.research-graph-demo .fp-sequence-side .fp-debug-meta {
margin-top: 8px !important;
padding-top: 8px !important;
border-top: 1px solid rgba(125, 211, 252, 0.12) !important;
}
body.research-graph-demo .fp-sequence-side .fp-debug-meta b {
color: rgba(226, 232, 240, 0.96) !important;
}
body.research-graph-demo .fp-sequence-side .fp-seq-controls {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 6px !important;
margin-top: 10px !important;
}
body.research-graph-demo .fp-sequence-side .fp-seq-controls .fp-btn {
min-height: 25px !important;
padding: 5px 8px !important;
border-radius: 999px !important;
border: 1px solid rgba(125, 211, 252, 0.26) !important;
background: rgba(15, 23, 42, 0.92) !important;
color: rgba(226, 232, 240, 0.94) !important;
font-size: 10px !important;
font-weight: 750 !important;
}
body.research-graph-demo .fp-sequence-side #seqResumeBtn,
body.research-graph-demo .fp-sequence-side #seqResumeHereBtn {
grid-column: 1 / -1 !important;
color: rgba(254, 243, 199, 0.96) !important;
border-color: rgba(250, 204, 21, 0.36) !important;
background: rgba(113, 63, 18, 0.22) !important;
}
body.research-graph-demo .fp-sequence-side .fp-seq-tabs {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
background: rgba(2, 6, 23, 0.82) !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.16) !important;
}
body.research-graph-demo .fp-sequence-side .fp-seq-tab {
padding: 8px 4px !important;
color: rgba(148, 163, 184, 0.95) !important;
font-size: 9px !important;
font-weight: 750 !important;
letter-spacing: 0.045em !important;
text-align: center !important;
border-bottom: 2px solid transparent !important;
background: transparent !important;
}
body.research-graph-demo .fp-sequence-side .fp-seq-tab.active {
color: rgba(103, 232, 249, 0.98) !important;
border-bottom-color: rgba(34, 211, 238, 0.95) !important;
background: rgba(8, 47, 73, 0.30) !important;
}
body.research-graph-demo .fp-sequence-side .fp-panel-body {
padding: 12px 14px 16px !important;
}
body.research-graph-demo .fp-sequence-side .fp-section-label {
margin: 12px 0 7px !important;
color: rgba(103, 232, 249, 0.98) !important;
font-size: 10px !important;
font-weight: 850 !important;
letter-spacing: 0.09em !important;
text-transform: uppercase !important;
}
body.research-graph-demo .fp-sequence-side .fp-narrative {
margin: 0 0 12px !important;
padding: 10px 11px !important;
border-radius: 10px !important;
border: 1px solid rgba(125, 211, 252, 0.20) !important;
border-left: 3px solid rgba(34, 211, 238, 0.82) !important;
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(10, 16, 32, 0.94)) !important;
color: rgba(226, 232, 240, 0.96) !important;
font-size: 11px !important;
line-height: 1.52 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.025) !important;
}
body.research-graph-demo .fp-sequence-side #seqNotes,
body.research-graph-demo .fp-sequence-side #seqGovernanceMeta,
body.research-graph-demo .fp-sequence-side #seqLeadershipMeta,
body.research-graph-demo .fp-sequence-side #seqAnalysisMeta {
padding: 9px 10px !important;
border-radius: 9px !important;
border: 1px solid rgba(125, 211, 252, 0.12) !important;
background: rgba(2, 6, 23, 0.28) !important;
color: rgba(148, 163, 184, 0.94) !important;
}
body.research-graph-demo .fp-sequence-side .fp-warning {
margin-bottom: 10px !important;
padding: 9px 10px !important;
border-radius: 10px !important;
border: 1px solid rgba(250, 204, 21, 0.30) !important;
background: rgba(113, 63, 18, 0.20) !important;
color: rgba(254, 243, 199, 0.96) !important;
font-size: 10.5px !important;
line-height: 1.45 !important;
}
body.research-graph-demo .fp-sequence-side .fp-badge {
display: inline-flex !important;
margin: 2px 4px 4px 0 !important;
padding: 3px 7px !important;
border-radius: 999px !important;
border: 1px solid rgba(125, 211, 252, 0.20) !important;
background: rgba(8, 47, 73, 0.26) !important;
color: rgba(186, 230, 253, 0.95) !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: 0.055em !important;
}
/* ------------------------------------------------------------
DUAL MODE SEQUENCE PANEL CONTENT POLISH V2
Fixes the remaining bright cyan active-tab content blocks.
------------------------------------------------------------ */
body.research-graph-demo .fp-sequence-side .fp-seq-section,
body.research-graph-demo .fp-sequence-side .fp-seq-section.active {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
body.research-graph-demo .fp-sequence-side .fp-seq-section > div {
background: transparent !important;
}
body.research-graph-demo .fp-sequence-side .fp-narrative,
body.research-graph-demo .fp-sequence-side #seqNotes,
body.research-graph-demo .fp-sequence-side #seqGovernanceBadges,
body.research-graph-demo .fp-sequence-side #seqGovernanceMeta,
body.research-graph-demo .fp-sequence-side #seqLeadershipMeta,
body.research-graph-demo .fp-sequence-side #seqAnalysisMeta {
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(8, 13, 28, 0.94)) !important;
border: 1px solid rgba(125, 211, 252, 0.16) !important;
border-left: 3px solid rgba(34, 211, 238, 0.72) !important;
border-radius: 10px !important;
color: rgba(226, 232, 240, 0.95) !important;
padding: 10px 11px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.025) !important;
}
body.research-graph-demo .fp-sequence-side #seqGovernanceBadges {
margin-bottom: 8px !important;
}
body.research-graph-demo .fp-sequence-side .fp-narrative *,
body.research-graph-demo .fp-sequence-side #seqNotes *,
body.research-graph-demo .fp-sequence-side #seqGovernanceBadges *,
body.research-graph-demo .fp-sequence-side #seqGovernanceMeta *,
body.research-graph-demo .fp-sequence-side #seqLeadershipMeta *,
body.research-graph-demo .fp-sequence-side #seqAnalysisMeta * {
background: transparent !important;
color: inherit !important;
}
body.research-graph-demo .fp-sequence-side #seqGovernanceMeta b,
body.research-graph-demo .fp-sequence-side #seqLeadershipMeta b,
body.research-graph-demo .fp-sequence-side #seqAnalysisMeta b,
body.research-graph-demo .fp-sequence-side #seqNotes b {
color: rgba(248, 250, 252, 0.98) !important;
font-weight: 850 !important;
}
body.research-graph-demo .fp-sequence-side .fp-narrative,
body.research-graph-demo .fp-sequence-side #seqGovernanceMeta,
body.research-graph-demo .fp-sequence-side #seqLeadershipMeta,
body.research-graph-demo .fp-sequence-side #seqAnalysisMeta {
font-size: 10.75px !important;
line-height: 1.52 !important;
}
body.research-graph-demo .fp-sequence-side #seqNotes {
color: rgba(148, 163, 184, 0.94) !important;
font-size: 10.25px !important;
line-height: 1.45 !important;
border-left-color: rgba(125, 211, 252, 0.34) !important;
}
body.research-graph-demo .fp-sequence-side .fp-section-label + .fp-muted,
body.research-graph-demo .fp-sequence-side .fp-section-label + div {
margin-top: 0 !important;
}
body.research-graph-demo .fp-sequence-side .fp-badge,
body.research-graph-demo .fp-sequence-side #seqGovernanceBadges .fp-badge {
background: rgba(8, 47, 73, 0.34) !important;
border: 1px solid rgba(125, 211, 252, 0.24) !important;
color: rgba(186, 230, 253, 0.96) !important;
}
/* ------------------------------------------------------------
DUAL MODE PLAYBACK CUES V1
------------------------------------------------------------ */
body.research-graph-demo .fp-sequence-side .fp-sequence-cues {
padding: 9px 10px !important;
border-radius: 9px !important;
border: 1px solid rgba(125, 211, 252, 0.12) !important;
border-left: 3px solid rgba(250, 204, 21, 0.58) !important;
background: rgba(2, 6, 23, 0.28) !important;
color: rgba(148, 163, 184, 0.94) !important;
font-size: 10.25px !important;
line-height: 1.5 !important;
}
/* ------------------------------------------------------------
GRAPH TOPBAR BRAND ALIGNMENT V1
------------------------------------------------------------ */
body.research-graph-demo .fp-brand {
color: rgba(103, 232, 249, 0.98) !important;
text-shadow: 0 0 14px rgba(34, 211, 238, 0.18) !important;
font-weight: 900 !important;
letter-spacing: 0.08em !important;
}
/* ------------------------------------------------------------
GRAPH CONTROL BAR TITLE V1
------------------------------------------------------------ */
body.research-graph-demo .fp-brand {
color: rgba(103, 232, 249, 0.98) !important;
text-shadow: 0 0 14px rgba(34, 211, 238, 0.22) !important;
font-weight: 900 !important;
letter-spacing: 0.08em !important;
}
/* ------------------------------------------------------------
GRAPH SITE HEADER ALIGNMENT V2
Aligns the interactive graph chrome with the public site nav.
------------------------------------------------------------ */
body.research-graph-demo .graph-site-chrome {
height: 44px !important;
padding: 0 clamp(16px, 3vw, 48px) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: clamp(28px, 8vw, 140px) !important;
background:
radial-gradient(circle at 20% 0%, rgba(14, 165, 233, 0.10), transparent 34%),
rgba(3, 7, 18, 0.96) !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.14) !important;
box-shadow: none !important;
}
body.research-graph-demo .graph-site-logo {
color: rgba(248, 250, 252, 0.98) !important;
text-decoration: none !important;
font-size: 12px !important;
font-weight: 900 !important;
letter-spacing: 0.08em !important;
white-space: nowrap !important;
}
body.research-graph-demo .graph-site-brand {
display: none !important;
}
body.research-graph-demo .graph-site-nav {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 18px !important;
}
body.research-graph-demo .graph-site-nav a,
body.research-graph-demo .graph-site-nav a.primary {
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: rgba(203, 213, 225, 0.92) !important;
text-decoration: none !important;
font-size: 11px !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
box-shadow: none !important;
}
body.research-graph-demo .graph-site-nav a:hover,
body.research-graph-demo .graph-site-nav a.primary:hover {
color: rgba(103, 232, 249, 0.98) !important;
}
body.research-graph-demo .fp-brand {
color: rgba(103, 232, 249, 0.98) !important;
text-shadow: 0 0 14px rgba(34, 211, 238, 0.22) !important;
}
/* ------------------------------------------------------------
GRAPH SITE HEADER ALIGNMENT V3
Full-width app header: brand left, global nav right.
------------------------------------------------------------ */
body.research-graph-demo .graph-site-chrome {
height: 40px !important;
padding: 0 18px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px !important;
background:
radial-gradient(circle at 8% 0%, rgba(14, 165, 233, 0.10), transparent 30%),
rgba(3, 7, 18, 0.97) !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.14) !important;
}
body.research-graph-demo .graph-site-logo {
margin: 0 !important;
color: rgba(248, 250, 252, 0.98) !important;
font-size: 11px !important;
font-weight: 900 !important;
letter-spacing: 0.08em !important;
text-decoration: none !important;
white-space: nowrap !important;
}
body.research-graph-demo .graph-site-nav {
margin-left: auto !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 16px !important;
}
body.research-graph-demo .graph-site-nav a,
body.research-graph-demo .graph-site-nav a.primary {
color: rgba(203, 213, 225, 0.90) !important;
font-size: 10.5px !important;
font-weight: 500 !important;
letter-spacing: 0.01em !important;
}
/* ------------------------------------------------------------
VIS TOOLTIP POLISH V1
Purpose: replace the default vis-network tooltip with a
BLACKBONE-styled readable hover card.
------------------------------------------------------------ */
body.research-graph-demo div.vis-tooltip {
position: absolute !important;
max-width: 360px !important;
min-width: 190px !important;
padding: 10px 12px !important;
border-radius: 12px !important;
border: 1px solid rgba(125, 211, 252, 0.32) !important;
background:
radial-gradient(circle at top left, rgba(125, 211, 252, 0.10), transparent 42%),
rgba(5, 12, 28, 0.96) !important;
color: rgba(226, 232, 240, 0.96) !important;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
font-size: 11px !important;
line-height: 1.42 !important;
letter-spacing: 0.01em !important;
box-shadow:
0 18px 48px rgba(0, 0, 0, 0.42),
0 0 0 1px rgba(15, 23, 42, 0.85),
inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
backdrop-filter: blur(10px) !important;
pointer-events: none !important;
z-index: 99999 !important;
white-space: normal !important;
}
body.research-graph-demo div.vis-tooltip b,
body.research-graph-demo div.vis-tooltip strong {
display: block !important;
margin-bottom: 4px !important;
color: rgba(250, 204, 21, 0.96) !important;
font-size: 11px !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
body.research-graph-demo div.vis-tooltip br {
display: block !important;
content: "" !important;
margin: 2px 0 !important;
}
body.research-graph-demo div.vis-tooltip::before {
content: "GRAPH NODE";
display: block;
margin-bottom: 5px;
color: rgba(125, 211, 252, 0.92);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* ------------------------------------------------------------
VIS TOOLTIP DOM CONTENT V2
Purpose: style DOM-built tooltip content and prevent raw tags
like
, , from appearing visually.
------------------------------------------------------------ */
body.research-graph-demo .bb-vis-tooltip-content {
display: grid !important;
gap: 4px !important;
}
body.research-graph-demo .bb-vis-tooltip-title {
color: rgba(250, 204, 21, 0.98) !important;
font-size: 11px !important;
font-weight: 850 !important;
line-height: 1.25 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
}
body.research-graph-demo .bb-vis-tooltip-kicker {
width: fit-content !important;
margin: 1px 0 3px !important;
padding: 2px 6px !important;
border-radius: 999px !important;
border: 1px solid rgba(125, 211, 252, 0.24) !important;
background: rgba(14, 165, 233, 0.10) !important;
color: rgba(125, 211, 252, 0.94) !important;
font-size: 9px !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
body.research-graph-demo .bb-vis-tooltip-line {
color: rgba(226, 232, 240, 0.92) !important;
font-size: 10.5px !important;
line-height: 1.35 !important;
}
body.research-graph-demo .bb-vis-tooltip-note {
margin-top: 4px !important;
padding-top: 5px !important;
border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
color: rgba(203, 213, 225, 0.72) !important;
font-size: 10px !important;
font-style: italic !important;
}
/* ------------------------------------------------------------
MOBILE TEMPORAL DISCOURSE READER V1
Purpose: phone-first event reader layered over the existing graph.
Desktop graph behavior remains unchanged.
------------------------------------------------------------ */
.bb-mobile-reader {
display: none;
}
@media (max-width: 760px) {
body.bb-mobile-reader-active {
overflow-x: hidden;
}
body.bb-mobile-reader-active .bb-mobile-reader {
display: block;
width: calc(100vw - 20px);
margin: 10px auto 12px;
position: relative;
z-index: 50;
}
body.bb-mobile-reader-active .bb-mobile-reader-inner {
border: 1px solid rgba(125, 211, 252, 0.22);
border-radius: 18px;
background:
radial-gradient(circle at top left, rgba(250, 204, 21, 0.09), transparent 34%),
linear-gradient(145deg, rgba(5, 12, 28, 0.96), rgba(15, 23, 42, 0.94));
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.38),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
padding: 14px;
}
body.bb-mobile-reader-active .bb-mobile-reader-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 7px;
}
body.bb-mobile-reader-active .bb-mobile-reader-kicker,
body.bb-mobile-reader-active .bb-mobile-reader-progress {
color: rgba(125, 211, 252, 0.9);
font-size: 10px;
font-weight: 850;
letter-spacing: 0.13em;
text-transform: uppercase;
}
body.bb-mobile-reader-active .bb-mobile-reader-progress {
color: rgba(250, 204, 21, 0.95);
}
body.bb-mobile-reader-active .bb-mobile-reader h2 {
margin: 0;
color: rgba(248, 250, 252, 0.98);
font-size: 18px;
line-height: 1.15;
letter-spacing: -0.02em;
}
body.bb-mobile-reader-active .bb-mobile-reader-subtitle {
margin-top: 5px;
color: rgba(203, 213, 225, 0.78);
font-size: 12px;
line-height: 1.35;
}
body.bb-mobile-reader-active .bb-mobile-reader-controls {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
margin-top: 12px;
}
body.bb-mobile-reader-active .bb-mobile-reader-controls button {
min-height: 44px;
border-radius: 999px;
border: 1px solid rgba(125, 211, 252, 0.22);
background: rgba(15, 23, 42, 0.82);
color: rgba(226, 232, 240, 0.96);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
body.bb-mobile-reader-active .bb-mobile-reader-controls button:active {
transform: translateY(1px);
}
body.bb-mobile-reader-active .bb-mobile-reader-summary {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
margin-top: 12px;
}
body.bb-mobile-reader-active .bb-mobile-reader-row {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 7px 9px;
border-radius: 10px;
background: rgba(15, 23, 42, 0.62);
border: 1px solid rgba(148, 163, 184, 0.12);
}
body.bb-mobile-reader-active .bb-mobile-reader-row span {
color: rgba(148, 163, 184, 0.88);
font-size: 11px;
}
body.bb-mobile-reader-active .bb-mobile-reader-row strong {
color: rgba(226, 232, 240, 0.96);
font-size: 11px;
text-align: right;
}
body.bb-mobile-reader-active .bb-mobile-reader-cards {
display: grid;
gap: 10px;
margin-top: 12px;
}
body.bb-mobile-reader-active .bb-mobile-reader-card {
padding: 11px 12px;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.15);
background: rgba(2, 6, 23, 0.42);
}
body.bb-mobile-reader-active .bb-mobile-reader-card h4 {
margin: 0 0 6px;
color: rgba(250, 204, 21, 0.96);
font-size: 11px;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.bb-mobile-reader-active .bb-mobile-reader-card p {
margin: 0;
color: rgba(226, 232, 240, 0.86);
font-size: 12px;
line-height: 1.45;
}
body.bb-mobile-reader-active .bb-mobile-reader-footer {
margin-top: 11px;
padding-top: 9px;
border-top: 1px solid rgba(148, 163, 184, 0.14);
color: rgba(148, 163, 184, 0.75);
font-size: 10px;
line-height: 1.35;
}
body.bb-mobile-reader-active #mynetwork {
min-height: 360px !important;
height: 48vh !important;
max-height: 520px !important;
border-radius: 16px !important;
overflow: hidden !important;
}
}
/* ------------------------------------------------------------
MOBILE TEMPORAL READER LAYOUT V3
Purpose:
- stop the phone view from behaving like squeezed desktop
- hide desktop control/sidebar chrome
- keep a real graph preview visible
- make mobile reader the primary surface
------------------------------------------------------------ */
@media (max-width: 760px) {
html,
body.research-graph-demo,
body.bb-mobile-reader-active {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
min-height: 100% !important;
height: auto !important;
overflow-x: hidden !important;
overflow-y: auto !important;
background:
radial-gradient(circle at 20% 0%, rgba(56, 189, 248, 0.14), transparent 22rem),
radial-gradient(circle at 90% 10%, rgba(250, 204, 21, 0.08), transparent 18rem),
#020617 !important;
}
body.bb-mobile-reader-active {
display: block !important;
}
/* Site chrome: keep, but make it compact and readable. */
body.bb-mobile-reader-active .graph-site-chrome {
position: relative !important;
top: auto !important;
width: 100% !important;
min-height: 0 !important;
display: grid !important;
gap: 0.55rem !important;
padding: 0.8rem 0.85rem !important;
background: rgba(2, 6, 23, 0.96) !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.22) !important;
z-index: 20 !important;
}
body.bb-mobile-reader-active .graph-site-logo,
body.bb-mobile-reader-active .graph-site-brand,
body.bb-mobile-reader-active .graph-site-brand strong {
text-align: center !important;
color: rgba(248, 250, 252, 0.98) !important;
font-size: 0.78rem !important;
letter-spacing: 0.16em !important;
}
body.bb-mobile-reader-active .graph-site-nav {
display: flex !important;
justify-content: center !important;
gap: 0.35rem !important;
flex-wrap: wrap !important;
}
body.bb-mobile-reader-active .graph-site-nav a {
padding: 0.35rem 0.48rem !important;
font-size: 0.58rem !important;
line-height: 1 !important;
color: rgba(203, 213, 225, 0.88) !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Hide desktop graph controls. Mobile reader owns navigation now. */
body.bb-mobile-reader-active .fp-shell,
body.bb-mobile-reader-active .graph-control-bar-exact,
body.bb-mobile-reader-active .graph-control-bar-exact-v3,
body.bb-mobile-reader-active .graph-control-bar-detected {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Hide desktop side panels. Their content will be rebuilt as mobile cards. */
body.bb-mobile-reader-active .fp-side,
body.bb-mobile-reader-active #sequenceSide,
body.bb-mobile-reader-active .graph-detail-panel-exact,
body.bb-mobile-reader-active .graph-detail-panel-exact-v3,
body.bb-mobile-reader-active .graph-sequence-panel-exact,
body.bb-mobile-reader-active .graph-sequence-panel-exact-v3 {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Mobile reader surface: primary object. */
body.bb-mobile-reader-active .bb-mobile-reader {
display: block !important;
width: min(100% - 1rem, 430px) !important;
margin: 0.85rem auto 0.75rem !important;
position: relative !important;
z-index: 30 !important;
color: rgba(248, 250, 252, 0.96) !important;
background: transparent !important;
}
body.bb-mobile-reader-active .bb-mobile-reader,
body.bb-mobile-reader-active .bb-mobile-reader * {
box-sizing: border-box !important;
}
body.bb-mobile-reader-active .bb-mobile-reader-inner {
display: block !important;
padding: 1rem !important;
border-radius: 22px !important;
border: 1px solid rgba(125, 211, 252, 0.28) !important;
background:
radial-gradient(circle at 18% 8%, rgba(56, 189, 248, 0.14), transparent 15rem),
linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.96)) !important;
box-shadow:
0 24px 70px rgba(0, 0, 0, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
color: rgba(248, 250, 252, 0.96) !important;
}
body.bb-mobile-reader-active .bb-mobile-reader-topline {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 0.8rem !important;
margin-bottom: 0.55rem !important;
background: transparent !important;
}
body.bb-mobile-reader-active .bb-mobile-reader-kicker,
body.bb-mobile-reader-active .bb-mobile-reader-progress {
color: rgba(125, 211, 252, 0.94) !important;
background: transparent !important;
font-size: 0.62rem !important;
font-weight: 900 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
}
body.bb-mobile-reader-active .bb-mobile-reader-progress {
color: rgba(250, 204, 21, 0.98) !important;
}
body.bb-mobile-reader-active .bb-mobile-reader h2 {
margin: 0 !important;
color: rgba(248, 250, 252, 0.99) !important;
background: transparent !important;
font-size: 1.25rem !important;
line-height: 1.05 !important;
letter-spacing: -0.04em !important;
}
body.bb-mobile-reader-active .bb-mobile-reader-subtitle {
margin-top: 0.45rem !important;
color: rgba(203, 213, 225, 0.80) !important;
background: transparent !important;
font-size: 0.78rem !important;
line-height: 1.35 !important;
}
body.bb-mobile-reader-active .bb-mobile-reader-controls {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 0.45rem !important;
margin-top: 0.85rem !important;
background: transparent !important;
}
body.bb-mobile-reader-active .bb-mobile-reader-controls button {
min-height: 42px !important;
padding: 0.45rem 0.45rem !important;
border-radius: 999px !important;
border: 1px solid rgba(125, 211, 252, 0.30) !important;
background: rgba(15, 23, 42, 0.92) !important;
color: rgba(226, 232, 240, 0.96) !important;
font-size: 0.62rem !important;
font-weight: 900 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
body.bb-mobile-reader-active .bb-mobile-reader-focus {
background:
linear-gradient(135deg, rgba(125, 211, 252, 0.98), rgba(56, 189, 248, 0.94)) !important;
color: rgba(2, 6, 23, 0.96) !important;
border-color: rgba(186, 230, 253, 0.82) !important;
}
body.bb-mobile-reader-active .bb-mobile-reader-summary {
display: grid !important;
gap: 0.42rem !important;
margin-top: 0.85rem !important;
background: transparent !important;
}
body.bb-mobile-reader-active .bb-mobile-reader-row {
display: flex !important;
justify-content: space-between !important;
gap: 0.85rem !important;
padding: 0.48rem 0.62rem !important;
border-radius: 12px !important;
border: 1px solid rgba(148, 163, 184, 0.14) !important;
background: rgba(2, 6, 23, 0.42) !important;
}
body.bb-mobile-reader-active .bb-mobile-reader-row span {
color: rgba(148, 163, 184, 0.88) !important;
font-size: 0.68rem !important;
}
body.bb-mobile-reader-active .bb-mobile-reader-row strong {
color: rgba(248, 250, 252, 0.94) !important;
font-size: 0.68rem !important;
text-align: right !important;
}
body.bb-mobile-reader-active .bb-mobile-reader-cards {
display: grid !important;
gap: 0.65rem !important;
margin-top: 0.85rem !important;
background: transparent !important;
}
body.bb-mobile-reader-active .bb-mobile-reader-card {
padding: 0.75rem !important;
border-radius: 16px !important;
border: 1px solid rgba(125, 211, 252, 0.18) !important;
background: rgba(2, 6, 23, 0.42) !important;
}
body.bb-mobile-reader-active .bb-mobile-reader-card h4 {
margin: 0 0 0.45rem !important;
color: rgba(250, 204, 21, 0.96) !important;
background: transparent !important;
font-size: 0.68rem !important;
font-weight: 900 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
body.bb-mobile-reader-active .bb-mobile-reader-card p {
margin: 0 !important;
color: rgba(226, 232, 240, 0.86) !important;
background: transparent !important;
font-size: 0.76rem !important;
line-height: 1.45 !important;
}
body.bb-mobile-reader-active .bb-mobile-reader-footer {
margin-top: 0.75rem !important;
padding-top: 0.65rem !important;
border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
color: rgba(148, 163, 184, 0.76) !important;
background: transparent !important;
font-size: 0.66rem !important;
}
/* Keep a real graph visible under the reader. */
body.bb-mobile-reader-active #mynetwork,
body.bb-mobile-reader-active #mynetwork.graph-canvas-exact-v3,
body.bb-mobile-reader-active .graph-canvas-exact-v3 {
position: relative !important;
inset: auto !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
display: block !important;
width: min(100% - 1rem, 430px) !important;
height: 42vh !important;
min-height: 300px !important;
max-height: 430px !important;
margin: 0.75rem auto 1rem !important;
overflow: hidden !important;
border-radius: 22px !important;
border: 1px solid rgba(125, 211, 252, 0.24) !important;
background:
radial-gradient(circle at 50% 38%, rgba(56, 189, 248, 0.08), transparent 15rem),
rgba(2, 6, 23, 0.86) !important;
box-shadow:
0 24px 70px rgba(0, 0, 0, 0.36),
inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
z-index: 10 !important;
}
body.bb-mobile-reader-active #mynetwork .vis-network,
body.bb-mobile-reader-active #mynetwork canvas {
width: 100% !important;
height: 100% !important;
}
body.bb-mobile-reader-active .vis-tooltip {
max-width: min(86vw, 320px) !important;
white-space: normal !important;
}
}
/* ------------------------------------------------------------
MOBILE MINI GRAPH + FRAME TABS V4
Purpose:
- add space below site nav
- show a focused event graph visual inside the reader
- convert discourse/frames into mobile tabs
------------------------------------------------------------ */
@media (max-width: 760px) {
body.bb-mobile-reader-active .graph-site-chrome {
margin-bottom: 0.85rem !important;
}
body.bb-mobile-reader-active .bb-mobile-reader {
margin-top: 1.15rem !important;
}
body.bb-mobile-reader-active .bb-mobile-mini-graph {
margin-top: 0.9rem !important;
padding: 0.85rem !important;
border-radius: 18px !important;
border: 1px solid rgba(125, 211, 252, 0.22) !important;
background:
radial-gradient(circle at 50% 38%, rgba(56, 189, 248, 0.12), transparent 12rem),
rgba(2, 6, 23, 0.46) !important;
}
body.bb-mobile-reader-active .bb-mini-graph-kicker {
margin-bottom: 0.65rem !important;
color: rgba(125, 211, 252, 0.94) !important;
font-size: 0.62rem !important;
font-weight: 900 !important;
letter-spacing: 0.11em !important;
text-transform: uppercase !important;
}
body.bb-mobile-reader-active .bb-mini-graph-stage {
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
grid-template-areas:
"source edgeMain target"
". edgeRegion region";
gap: 0.65rem 0.55rem !important;
align-items: center !important;
}
body.bb-mobile-reader-active .bb-mini-node {
min-height: 68px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
gap: 0.25rem !important;
padding: 0.55rem !important;
border-radius: 16px !important;
border: 1px solid rgba(125, 211, 252, 0.24) !important;
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.58)) !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025) !important;
}
body.bb-mobile-reader-active .bb-mini-node-source {
grid-area: source;
border-color: rgba(56, 189, 248, 0.34) !important;
}
body.bb-mobile-reader-active .bb-mini-node-target {
grid-area: target;
border-color: rgba(250, 204, 21, 0.34) !important;
}
body.bb-mobile-reader-active .bb-mini-node-region {
grid-area: region;
border-color: rgba(94, 234, 212, 0.28) !important;
}
body.bb-mobile-reader-active .bb-mini-node span {
color: rgba(148, 163, 184, 0.86) !important;
font-size: 0.58rem !important;
font-weight: 850 !important;
letter-spacing: 0.09em !important;
text-transform: uppercase !important;
}
body.bb-mobile-reader-active .bb-mini-node strong {
color: rgba(248, 250, 252, 0.96) !important;
font-size: 0.78rem !important;
line-height: 1.08 !important;
}
body.bb-mobile-reader-active .bb-mini-edge {
display: grid !important;
place-items: center !important;
min-width: 58px !important;
min-height: 34px !important;
border-radius: 999px !important;
border: 1px solid rgba(125, 211, 252, 0.20) !important;
background: rgba(14, 165, 233, 0.10) !important;
color: rgba(186, 230, 253, 0.96) !important;
position: relative !important;
}
body.bb-mobile-reader-active .bb-mini-edge::before,
body.bb-mobile-reader-active .bb-mini-edge::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
width: 18px !important;
height: 1px !important;
background: rgba(125, 211, 252, 0.42) !important;
}
body.bb-mobile-reader-active .bb-mini-edge::before {
right: 100% !important;
}
body.bb-mobile-reader-active .bb-mini-edge::after {
left: 100% !important;
}
body.bb-mobile-reader-active .bb-mini-edge-main {
grid-area: edgeMain;
}
body.bb-mobile-reader-active .bb-mini-edge-region {
grid-area: edgeRegion;
background: rgba(250, 204, 21, 0.08) !important;
color: rgba(254, 249, 195, 0.94) !important;
}
body.bb-mobile-reader-active .bb-mini-edge span {
max-width: 70px !important;
text-align: center !important;
color: inherit !important;
font-size: 0.54rem !important;
font-weight: 900 !important;
line-height: 1.1 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
body.bb-mobile-reader-active .bb-mobile-frame-system {
margin-top: 0.9rem !important;
}
body.bb-mobile-reader-active .bb-mobile-frame-tabs {
display: flex !important;
gap: 0.4rem !important;
overflow-x: auto !important;
padding: 0.1rem 0 0.55rem !important;
scrollbar-width: thin !important;
}
body.bb-mobile-reader-active .bb-mobile-frame-tab {
flex: 0 0 auto !important;
min-height: 34px !important;
padding: 0.4rem 0.62rem !important;
border-radius: 999px !important;
border: 1px solid rgba(125, 211, 252, 0.22) !important;
background: rgba(15, 23, 42, 0.76) !important;
color: rgba(203, 213, 225, 0.84) !important;
font-size: 0.58rem !important;
font-weight: 900 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
body.bb-mobile-reader-active .bb-mobile-frame-tab.is-active {
background:
linear-gradient(135deg, rgba(125, 211, 252, 0.98), rgba(56, 189, 248, 0.94)) !important;
color: rgba(2, 6, 23, 0.96) !important;
border-color: rgba(186, 230, 253, 0.82) !important;
}
body.bb-mobile-reader-active .bb-mobile-active-frame {
margin-top: 0 !important;
}
/* The real vis canvas can remain below, but this pass makes the mini graph primary. */
body.bb-mobile-reader-active #mynetwork {
margin-top: 0.85rem !important;
}
}
/* ------------------------------------------------------------
MOBILE FRAME EVIDENCE STACK V5
Correct model:
Narrative / Governance / Leadership / Analysis are the tabs.
Discourse, sentence spans, and sources live under the active frame.
------------------------------------------------------------ */
@media (max-width: 760px) {
body.bb-mobile-reader-active .graph-site-chrome {
margin-bottom: 1.25rem !important;
}
body.bb-mobile-reader-active .bb-mobile-reader {
margin-top: 1.65rem !important;
}
body.bb-mobile-reader-active .bb-mobile-frame-tabs {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 0.38rem !important;
overflow: visible !important;
padding: 0.1rem 0 0.6rem !important;
}
body.bb-mobile-reader-active .bb-mobile-frame-tab {
min-width: 0 !important;
width: 100% !important;
padding: 0.42rem 0.28rem !important;
font-size: 0.52rem !important;
letter-spacing: 0.04em !important;
text-align: center !important;
}
body.bb-mobile-reader-active .bb-mobile-frame-evidence {
margin-top: 0.78rem !important;
display: grid !important;
gap: 0.55rem !important;
}
body.bb-mobile-reader-active .bb-mobile-evidence-block {
border-top: 1px solid rgba(125, 211, 252, 0.14) !important;
padding-top: 0.55rem !important;
}
body.bb-mobile-reader-active .bb-mobile-evidence-block summary {
cursor: pointer !important;
color: rgba(125, 211, 252, 0.94) !important;
font-size: 0.58rem !important;
font-weight: 900 !important;
letter-spacing: 0.09em !important;
text-transform: uppercase !important;
}
body.bb-mobile-reader-active .bb-mobile-discourse-evidence summary {
color: rgba(250, 204, 21, 0.94) !important;
}
body.bb-mobile-reader-active .bb-mobile-source-evidence summary {
color: rgba(94, 234, 212, 0.94) !important;
}
body.bb-mobile-reader-active .bb-mobile-evidence-body {
margin-top: 0.5rem !important;
padding: 0.62rem !important;
border-radius: 12px !important;
border: 1px solid rgba(125, 211, 252, 0.14) !important;
background: rgba(2, 6, 23, 0.44) !important;
}
body.bb-mobile-reader-active .bb-mobile-evidence-body p {
margin: 0 !important;
color: rgba(203, 213, 225, 0.88) !important;
font-size: 0.69rem !important;
line-height: 1.44 !important;
}
body.bb-mobile-reader-active .bb-mobile-active-frame > p {
color: rgba(226, 232, 240, 0.88) !important;
font-size: 0.76rem !important;
line-height: 1.48 !important;
}
/* The intentional mini graph is the mobile graph.
Do not show the empty full vis canvas below it. */
body.bb-mobile-reader-active #mynetwork,
body.bb-mobile-reader-active #mynetwork.graph-canvas-exact-v3 {
display: none !important;
}
}
/* ------------------------------------------------------------
MOBILE SOURCE-GROUP EVIDENCE CARDS V6 SAFE
Reads source_groups/cards. Keeps fallback graph visible unless reader renders.
------------------------------------------------------------ */
@media (max-width: 760px) {
body.bb-mobile-reader-active:not(.bb-mobile-reader-rendered) #mynetwork,
body.bb-mobile-reader-active:not(.bb-mobile-reader-rendered) #mynetwork.graph-canvas-exact-v3 {
display: block !important;
width: min(100% - 1rem, 430px) !important;
min-height: 320px !important;
margin: 1rem auto !important;
}
body.bb-mobile-reader-active.bb-mobile-reader-rendered #mynetwork,
body.bb-mobile-reader-active.bb-mobile-reader-rendered #mynetwork.graph-canvas-exact-v3 {
display: none !important;
}
body.bb-mobile-reader-active .graph-site-chrome {
margin-bottom: 1.75rem !important;
}
body.bb-mobile-reader-active .bb-mobile-reader {
margin-top: 2rem !important;
}
body.bb-mobile-reader-active .bb-mobile-frame-evidence {
margin-top: 0.85rem !important;
display: grid !important;
gap: 0.75rem !important;
}
body.bb-mobile-reader-active .bb-mobile-frame-evidence-head {
padding-top: 0.72rem !important;
border-top: 1px solid rgba(125, 211, 252, 0.16) !important;
}
body.bb-mobile-reader-active .bb-mobile-frame-evidence-head span,
body.bb-mobile-reader-active .bb-mobile-source-group-head span,
body.bb-mobile-reader-active .bb-mobile-disc-card-head span,
body.bb-mobile-reader-active .bb-mobile-source-body span,
body.bb-mobile-reader-active .bb-mobile-nlp-grid span,
body.bb-mobile-reader-active .bb-mobile-span-row span {
display: block !important;
color: rgba(125, 211, 252, 0.92) !important;
font-size: 0.54rem !important;
font-weight: 900 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
body.bb-mobile-reader-active .bb-mobile-frame-evidence-head strong {
display: block !important;
margin-top: 0.18rem !important;
color: rgba(203, 213, 225, 0.82) !important;
font-size: 0.66rem !important;
}
body.bb-mobile-reader-active .bb-mobile-source-group {
padding: 0.68rem !important;
border-radius: 16px !important;
border: 1px solid rgba(125, 211, 252, 0.18) !important;
background: rgba(2, 6, 23, 0.38) !important;
}
body.bb-mobile-reader-active .bb-mobile-source-group-head,
body.bb-mobile-reader-active .bb-mobile-disc-card-head {
display: flex !important;
justify-content: space-between !important;
gap: 0.75rem !important;
align-items: flex-start !important;
margin-bottom: 0.55rem !important;
}
body.bb-mobile-reader-active .bb-mobile-source-group-head strong,
body.bb-mobile-reader-active .bb-mobile-disc-card-head strong {
display: block !important;
margin-top: 0.16rem !important;
color: rgba(248, 250, 252, 0.95) !important;
font-size: 0.72rem !important;
line-height: 1.18 !important;
}
body.bb-mobile-reader-active .bb-mobile-source-group-head em,
body.bb-mobile-reader-active .bb-mobile-disc-card-head em {
color: rgba(250, 204, 21, 0.9) !important;
font-size: 0.54rem !important;
font-style: normal !important;
font-weight: 900 !important;
text-transform: uppercase !important;
white-space: nowrap !important;
}
body.bb-mobile-reader-active .bb-mobile-disc-card {
margin-top: 0.62rem !important;
padding: 0.72rem !important;
border-radius: 14px !important;
border: 1px solid rgba(125, 211, 252, 0.16) !important;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.52)) !important;
}
body.bb-mobile-reader-active .bb-mobile-disc-card.is-clean {
border-left: 3px solid rgba(94, 234, 212, 0.76) !important;
}
body.bb-mobile-reader-active .bb-mobile-disc-card.is-review {
border-left: 3px solid rgba(250, 204, 21, 0.76) !important;
}
body.bb-mobile-reader-active .bb-mobile-disc-card p {
color: rgba(203, 213, 225, 0.88) !important;
font-size: 0.70rem !important;
line-height: 1.42 !important;
}
body.bb-mobile-reader-active .bb-mobile-highlighted-sentence,
body.bb-mobile-reader-active .bb-mobile-source-body,
body.bb-mobile-reader-active .bb-mobile-nlp-grid {
margin-top: 0.6rem !important;
padding: 0.62rem !important;
border-radius: 12px !important;
border: 1px solid rgba(125, 211, 252, 0.14) !important;
background: rgba(2, 6, 23, 0.44) !important;
color: rgba(226, 232, 240, 0.9) !important;
font-size: 0.69rem !important;
line-height: 1.45 !important;
}
body.bb-mobile-reader-active .bb-mobile-span {
padding: 0.03rem 0.14rem !important;
border-radius: 0.22rem !important;
color: rgba(248, 250, 252, 0.98) !important;
font-weight: 850 !important;
}
body.bb-mobile-reader-active .bb-mobile-span-agent {
background: rgba(45, 212, 191, 0.18) !important;
border-bottom: 2px solid rgba(45, 212, 191, 0.72) !important;
}
body.bb-mobile-reader-active .bb-mobile-span-action {
background: rgba(250, 204, 21, 0.16) !important;
border-bottom: 2px solid rgba(250, 204, 21, 0.74) !important;
}
body.bb-mobile-reader-active .bb-mobile-span-target {
background: rgba(167, 139, 250, 0.18) !important;
border-bottom: 2px solid rgba(167, 139, 250, 0.72) !important;
}
body.bb-mobile-reader-active .bb-mobile-span-details,
body.bb-mobile-reader-active .bb-mobile-source-trail {
margin-top: 0.65rem !important;
padding-top: 0.55rem !important;
border-top: 1px solid rgba(148, 163, 184, 0.14) !important;
}
body.bb-mobile-reader-active .bb-mobile-span-details summary,
body.bb-mobile-reader-active .bb-mobile-source-trail summary {
cursor: pointer !important;
color: rgba(250, 204, 21, 0.92) !important;
font-size: 0.58rem !important;
font-weight: 900 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
body.bb-mobile-reader-active .bb-mobile-source-trail summary {
color: rgba(94, 234, 212, 0.92) !important;
}
body.bb-mobile-reader-active .bb-mobile-span-table {
display: grid !important;
gap: 0.45rem !important;
margin-top: 0.55rem !important;
}
body.bb-mobile-reader-active .bb-mobile-span-row {
padding: 0.55rem !important;
border-radius: 12px !important;
border: 1px solid rgba(125, 211, 252, 0.12) !important;
background: rgba(2, 6, 23, 0.38) !important;
}
body.bb-mobile-reader-active .bb-mobile-span-row strong,
body.bb-mobile-reader-active .bb-mobile-source-body strong,
body.bb-mobile-reader-active .bb-mobile-nlp-grid strong {
display: block !important;
margin-top: 0.12rem !important;
color: rgba(248, 250, 252, 0.92) !important;
font-size: 0.64rem !important;
line-height: 1.34 !important;
overflow-wrap: anywhere !important;
}
body.bb-mobile-reader-active .bb-mobile-span-row p,
body.bb-mobile-reader-active .bb-mobile-span-row small,
body.bb-mobile-reader-active .bb-mobile-source-body p {
display: block !important;
margin: 0.22rem 0 0 !important;
color: rgba(203, 213, 225, 0.78) !important;
font-size: 0.62rem !important;
line-height: 1.36 !important;
}
body.bb-mobile-reader-active .bb-mobile-source-body a {
color: rgba(125, 211, 252, 0.96) !important;
font-size: 0.64rem !important;
font-weight: 900 !important;
text-decoration: none !important;
}
body.bb-mobile-reader-active .bb-mobile-muted,
body.bb-mobile-reader-active .bb-mobile-no-evidence {
color: rgba(148, 163, 184, 0.84) !important;
font-size: 0.68rem !important;
line-height: 1.4 !important;
}
body.bb-mobile-reader-active .bb-mobile-no-evidence {
padding: 0.65rem !important;
border: 1px dashed rgba(125, 211, 252, 0.18) !important;
border-radius: 12px !important;
background: rgba(2, 6, 23, 0.30) !important;
}
}
/* ------------------------------------------------------------
MOBILE STICKY SITE NAV V9
Keeps BLACKBONE brand and portfolio nav frozen together.
Gives the nav the same dark background as the brand row.
Mobile-only; desktop graph chrome untouched.
------------------------------------------------------------ */
@media (max-width: 760px) {
body.research-graph-demo .graph-site-chrome {
position: sticky !important;
top: 0 !important;
z-index: 10000000 !important;
display: grid !important;
grid-template-columns: 1fr !important;
justify-items: center !important;
align-items: center !important;
gap: 0.42rem !important;
width: 100% !important;
min-height: auto !important;
padding: 0.7rem 0.7rem 0.62rem !important;
background:
radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.08), transparent 18rem),
rgba(2, 6, 23, 0.98) !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.22) !important;
box-shadow:
0 16px 34px rgba(0, 0, 0, 0.42),
0 1px 0 rgba(255, 255, 255, 0.03) inset !important;
backdrop-filter: blur(18px) !important;
}
body.research-graph-demo .graph-site-logo,
body.research-graph-demo .graph-site-brand,
body.research-graph-demo .graph-site-brand strong {
display: block !important;
text-align: center !important;
color: rgba(248, 250, 252, 0.98) !important;
font-size: 0.78rem !important;
font-weight: 950 !important;
letter-spacing: 0.18em !important;
line-height: 1 !important;
text-transform: uppercase !important;
}
body.research-graph-demo .graph-site-nav {
width: 100% !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 0.42rem 0.72rem !important;
padding: 0.18rem 0 0 !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
}
body.research-graph-demo .graph-site-nav a {
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: rgba(203, 213, 225, 0.82) !important;
font-size: 0.58rem !important;
font-weight: 700 !important;
line-height: 1.25 !important;
letter-spacing: 0.01em !important;
text-decoration: none !important;
white-space: nowrap !important;
}
body.research-graph-demo .graph-site-nav a:hover {
color: rgba(125, 211, 252, 0.98) !important;
background: transparent !important;
}
body.bb-mobile-reader-active .bb-mobile-reader {
margin-top: 1.25rem !important;
}
}
/* ------------------------------------------------------------
MOBILE FIXED SITE HEADER V10
Brand + nav become one frozen dark slab.
Reader is pushed below header so labels do not collide.
------------------------------------------------------------ */
@media (max-width: 760px) {
body.research-graph-demo .graph-site-chrome {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 2147483000 !important;
width: 100% !important;
min-height: 76px !important;
height: auto !important;
display: grid !important;
grid-template-columns: 1fr !important;
justify-items: center !important;
align-items: center !important;
gap: 0.34rem !important;
padding: 0.62rem 0.7rem 0.58rem !important;
margin: 0 !important;
background:
radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.08), transparent 16rem),
rgba(2, 6, 23, 0.995) !important;
border-bottom: 1px solid rgba(125, 211, 252, 0.26) !important;
box-shadow:
0 18px 42px rgba(0, 0, 0, 0.54),
inset 0 -1px 0 rgba(125, 211, 252, 0.08) !important;
backdrop-filter: blur(18px) !important;
}
body.research-graph-demo .graph-site-logo {
display: block !important;
width: 100% !important;
text-align: center !important;
color: rgba(248, 250, 252, 0.99) !important;
background: transparent !important;
font-size: 0.78rem !important;
line-height: 1 !important;
font-weight: 950 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
text-decoration: none !important;
}
body.research-graph-demo .graph-site-nav {
width: 100% !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: center !important;
gap: 0.34rem 0.66rem !important;
padding: 0.08rem 0 0 !important;
margin: 0 !important;
background: rgba(2, 6, 23, 0.995) !important;
border: 0 !important;
box-shadow: none !important;
}
body.research-graph-demo .graph-site-nav a,
body.research-graph-demo .graph-site-nav a.primary {
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: rgba(203, 213, 225, 0.84) !important;
font-size: 0.58rem !important;
line-height: 1.18 !important;
font-weight: 750 !important;
letter-spacing: 0.01em !important;
text-decoration: none !important;
white-space: nowrap !important;
}
body.research-graph-demo .graph-site-nav a:hover,
body.research-graph-demo .graph-site-nav a.primary:hover {
color: rgba(125, 211, 252, 0.98) !important;
background: transparent !important;
}
body.bb-mobile-reader-active {
padding-top: 84px !important;
}
body.bb-mobile-reader-active .bb-mobile-reader {
margin-top: 0.55rem !important;
}
body.bb-mobile-reader-active .bb-mobile-reader-kicker,
body.bb-mobile-reader-active .bb-mobile-reader-topline {
position: relative !important;
z-index: 1 !important;
}
}