/* MORE regulator-target network — PA_Step3RegTargetNetworkView.
 *
 * Its own stylesheet rather than a block in main.css for two reasons. The view
 * is the only consumer, so nothing here can be reached by accident from the
 * rest of the app; and main.css is 4,000 lines that several people edit at
 * once, which is how a component's styles end up interleaved with everything
 * else and unreviewable.
 *
 * Everything is expressed in the design-system tokens declared on `:root` in
 * main.css and restated for `[data-theme="dark"]` in dark.css, so the view
 * follows the theme without this file knowing the theme exists. The exceptions
 * are the graph's own semantic colours -- omic palette, positive/negative edge
 * -- which live in the view's JS: they are data encodings rather than surfaces,
 * they have to be handed to Cytoscape as literal values anyway, and swapping
 * them per theme would mean the same edge meant different things in a
 * screenshot depending on who took it.
 *
 * The toolbar, the status line under it and the canvas fill are NOT here any
 * more: they are the chrome this view shares with the pathways network in
 * PA_Step3Views, and they live in network-views.css so the two graph surfaces
 * on the same page cannot drift apart again. What remains below is what is
 * genuinely particular to this view -- its legend, its hub list, its tooltip.
 */

.more-net-panel .x-panel-body {
	background: var(--pa-surface, #fff);
}

/* ---- The panel's own title --------------------------------------------- */

/* This is an Ext panel, so its title arrives as `.x-panel-header` rather than
   as the `<h2>` every card on this page uses. Untouched, Neptune drew it at
   13px/700 on #F6F5F0 with 9px of padding — and because the toolbar underneath
   is the same ivory band, the title and the toolbar fused into one 127px block
   of beige with no edge between them. Nine hundred pixels up the page, the
   pathways network's title is 19px/600 near-black on white, inset 26px. Two
   titles for two panels of the same kind, agreeing on nothing.

   Restated here as the card heading `div.contentbox h2` describes, declaration
   for declaration, so the two network panels are titled the same way. Written
   out rather than shared with that rule because this is a framework element:
   the selector has to be specific enough to outscore Neptune's own
   `.x-panel-header-default`, which a joint selector in main.css would not be. */
.more-net-panel > .x-panel-header {
	padding: 15px var(--pa-card-inset, 26px);
	background: var(--pa-surface, #FFFFFF);
	background-image: none;
	border: 0;
	border-bottom: 1px solid var(--pa-border);
	border-radius: var(--pa-radius, 8px) var(--pa-radius, 8px) 0 0;
}

.more-net-panel > .x-panel-header .x-panel-header-text {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.012em;
	color: var(--pa-ink-title, #1A1A18);
	line-height: 1.3;
}

/* The collapse control. Neptune draws it as a sprite `<img>`, which is the one
   piece of framework chrome left on a surface that is otherwise the
   application's own. The image keeps its box — ExtJS binds the click to the
   tool and measures the image — but goes invisible, and a Font Awesome chevron
   is centred over it, so the affordance matches the icons in the toolbar
   directly below. `:has()` reads the state off the class ExtJS swaps on the
   image, so the chevron turns over with the panel. */
.more-net-panel > .x-panel-header .x-tool {
	position: relative;
	color: var(--pa-ink-label, #52525B);
	border-radius: var(--pa-radius-sm, 6px);
	transition: background-color var(--pa-transition, 150ms ease),
	            color var(--pa-transition, 150ms ease);
}

.more-net-panel > .x-panel-header .x-tool:hover {
	color: var(--pa-ink, #18181B);
	background-color: var(--pa-control-hover-bg, #FFFFFF);
}

.more-net-panel > .x-panel-header .x-tool-img {
	visibility: hidden;
}

.more-net-panel > .x-panel-header .x-tool::before {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font: normal normal normal 13px/1 FontAwesome;
	content: "\f077";              /* chevron-up — click to collapse */
}

.more-net-panel > .x-panel-header .x-tool:has(.x-tool-expand-bottom)::before {
	content: "\f078";              /* chevron-down — click to expand */
}

/* ---- Canvas and side panel -------------------------------------------- */

/* Height comes from --pa-net-canvas-height in network-views.css, which the
   pathways canvas reads too. */
.more-net-body {
	display: flex;
	width: 100%;
}

/* The fill is in network-views.css; the flex behaviour is this layout's. */
.more-net-canvas {
	flex: 1;
	height: 100%;
	min-width: 0;             /* or the flex item refuses to shrink below its content */
}

.more-net-sidepanel {
	width: 216px;
	flex: 0 0 216px;
	height: 100%;
	overflow-y: auto;
	background: var(--pa-surface-subtle, #f8f8f8);
	border-left: 1px solid var(--pa-border, #e0e0e0);
	box-sizing: border-box;
}

.more-net-side {
	padding: 12px;
	font-size: 12px;
	color: var(--pa-ink-body, #444);
}

/* The group labels (`h6`) and the filter labels (`.more-net-field-label`) are
   NOT styled here. They are the same two roles the pathways network's Tools
   column already has — a tracked uppercase group divider and a near-black
   control label — and they are drawn by that column's rules, which name these
   selectors alongside their own. See "The settings-column type scale" in
   main.css. A second description here is how the two rails drift apart. */

.more-net-omic {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0;
	font-weight: 400;
	cursor: pointer;
}

.more-net-swatch {
	display: inline-block;
	width: 11px;
	height: 11px;
	flex: 0 0 11px;
	border-radius: 3px;
	border: 1px solid rgba(0, 0, 0, 0.25);
}

.more-net-note {
	margin: 8px 0 0;
	font-size: 11px;
	line-height: 1.45;
	color: var(--pa-ink-muted, #595959);
}

/* ---- Top hubs --------------------------------------------------------- */

.more-net-hub {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
	color: var(--pa-link, #006acc);
	text-decoration: none;
}

.more-net-hub:hover {
	text-decoration: underline;
}

.more-net-hub-count {
	flex: 0 0 auto;
	padding: 0 6px;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	color: var(--pa-ink-muted, #595959);
	background: var(--pa-surface-quiet, #ececf0);
	border-radius: 8px;
}

/* ---- Tooltip ---------------------------------------------------------- */

/* Positioned against the canvas in rendered coordinates by _showTooltip, so
   the container must establish a positioning context -- .more-net-canvas does,
   above. pointer-events:none matters: without it the tooltip sits under the
   cursor, triggers mouseout on the node, and the whole thing flickers. */
.more-net-tip {
	position: absolute;
	display: none;
	z-index: 20;
	max-width: 240px;
	padding: 6px 9px;
	font-size: 11px;
	line-height: 1.45;
	color: var(--pa-ink, #222);
	background: var(--pa-surface, #fff);
	border: 1px solid var(--pa-border, #ddd);
	border-radius: var(--pa-radius-sm, 4px);
	box-shadow: var(--pa-shadow, 0 1px 3px rgba(0, 0, 0, 0.12));
	pointer-events: none;
}

/* ---- Failure ---------------------------------------------------------- */

.more-net-error {
	padding: 30px;
	text-align: center;
	color: var(--pa-accent-orange, #a33);
}

/* ---- Narrow viewports ------------------------------------------------- */

/* Below this the side panel takes more width than the graph it annotates, so
   it goes under the canvas and the canvas keeps the full width. */
@media (max-width: 900px) {
	.more-net-body {
		flex-direction: column;
		height: auto;
	}

	.more-net-canvas {
		height: 420px;
	}

	.more-net-sidepanel {
		width: 100%;
		flex: 0 0 auto;
		height: auto;
		max-height: 240px;
		border-left: none;
		border-top: 1px solid var(--pa-border, #e0e0e0);
	}
}