/*
 * Word Explorer - horizontal hierarchy tree (view_flashcard.php).
 *
 * Pure CSS tree built from nested <ul>/<li> elements by tf-syllables.js.
 * The tree is wrapped in a native scroll container so it can be scrolled
 * sideways with a mouse wheel (shift + wheel), scrollbar, trackpad, or touch swipe.
 *
 * The node box styling (.wordExplorerNode) lives in customised-lightmode.css / customised-darkmode.css.
 */

.word-explorer-scroll {
	--we-line-colour: #7a7a7a;
	--we-line-width: 2px;
	--we-gap: 30px;          /* Horizontal gap on each side of the vertical trunk line. */
	--we-row-pad: 6px;       /* Half the vertical space between sibling nodes. */

	position: relative;
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 0.75rem;  /* Room for the scrollbar so it doesn't overlap nodes. */
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	touch-action: pan-x pan-y;
	scrollbar-width: thin;
	scrollbar-color: #7a7a7a transparent;
}

.word-explorer-scroll:focus-visible {
	outline: 2px solid #3e8ed0;
	outline-offset: 2px;
}

.word-explorer-tree,
.word-explorer-tree ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Let the tree take its natural width so the scroll container has something to scroll. */
.word-explorer-tree {
	width: max-content;
	min-width: 100%;
}

.word-explorer-tree li {
	position: relative;
	display: flex;
	align-items: center;       /* Parent node is vertically centred against its group of children. */
	margin: 0;
}

.word-explorer-tree .wordExplorerNode {
	flex: 0 0 auto;
	box-sizing: border-box;
	text-align: left;
}

.word-explorer-tree .wordExplorerNode p {
	margin: 0;
}

.word-explorer-tree .wordExplorerNode p + p {
	margin-top: 0.25rem;
}

/* Group of children, to the right of the parent node. */
.word-explorer-tree li > ul {
	display: flex;
	flex-direction: column;
	position: relative;
	margin-left: var(--we-gap);
}

/* Horizontal connector from the parent node to the vertical trunk. */
.word-explorer-tree li > ul::before {
	content: '';
	position: absolute;
	top: 50%;
	left: calc(-1 * var(--we-gap));
	width: var(--we-gap);
	border-top: var(--we-line-width) solid var(--we-line-colour);
	transform: translateY(-50%);
}

/* Each child gets room for its own connectors. */
.word-explorer-tree li > ul > li {
	padding: var(--we-row-pad) 0 var(--we-row-pad) var(--we-gap);
}

/* Horizontal connector from the trunk to the child node. */
.word-explorer-tree li > ul > li::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: var(--we-gap);
	border-top: var(--we-line-width) solid var(--we-line-colour);
	transform: translateY(-50%);
}

/* Vertical trunk segment for this child. */
.word-explorer-tree li > ul > li::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-left: var(--we-line-width) solid var(--we-line-colour);
	transform: translateX(calc(-1 * var(--we-line-width) / 2));
}

.word-explorer-tree li > ul > li:first-child::after { top: 50%; }
.word-explorer-tree li > ul > li:last-child::after { bottom: 50%; }
.word-explorer-tree li > ul > li:only-child::after { display: none; }

/* Hint shown only when the tree is wider than its panel. */
.word-explorer-hint {
	display: none;
	margin: 0 0 0.5rem 0;
	font-size: 0.75rem;
	text-align: right;
}

.word-explorer-hint.is-visible {
	display: block;
}