/*
 * org-chart.v6.css  (plugin v1.2.4 / ZIP v8)
 * Additive layer on top of org-chart.v4.css + org-chart.v5.css.
 * Do NOT modify v1–v5 CSS files.
 *
 * Core structural fix introduced here:
 *   v5: side columns sat beside the card AND all its descendants → they appeared
 *       detached from the parent node, floating far from the card.
 *   v6: side columns sit beside the CARD ONLY; main children flow below the card
 *       row in the normal vertical hierarchy → side branches are visually
 *       connected to the correct parent. ✓
 *
 * New in v8:
 *   1. org-card-row        — flex row wrapping ONLY the card + adjacent side columns
 *   2. org-card-anchor     — positional reference for bridge connector lines
 *   3. bridge lines        — ::before / ::after on org-card-anchor span the
 *                            flex gap and meet the spine, connecting card to items
 *   4. branch_side         — explicit left / right / auto distribution
 *   5. side_compact        — optional staggered overlap (desktop + PDF only)
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * 1.  Outer wrapper
 * ─────────────────────────────────────────────────────────────────────────── */

/*
 * org-branch-with-sides wraps the card row and any main children.
 * flex-column + align-items:center keeps them stacked and centred so that
 * the standard org-branch::before connector (left:50%) still approximately
 * meets the card when the branch is a child of another node.
 */
.org-branch-with-sides {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* When the root node itself has side branches it is placed directly inside
   .org-chart--desktop, which targets > .org-node for centering.  Mirror that
   rule so the root card row is also centred. */
.org-chart--desktop > .org-branch-with-sides {
	margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 2.  Card row
 * ─────────────────────────────────────────────────────────────────────────── */

/*
 * direction:ltr ensures side-left = physical screen-left and side-right =
 * physical screen-right regardless of the document's dir="rtl" attribute.
 * This was an explicit requirement: side positions are VISUAL, not logical.
 *
 * align-items:flex-start  — card anchor and side columns all start at the
 * same top edge, giving the cleanest connector alignment.
 *
 * gap:32px — every unit of spacing (bridge width, stub length calculation)
 * is derived from this single value.
 */
.org-card-row {
	display: flex;
	flex-direction: row;
	direction: ltr;
	align-items: flex-start;
	gap: 32px;
	position: relative;
}

/* Card anchor: holds only the card div (no children). */
.org-card-anchor {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 3.  Bridge lines  —  card edge → spine
 * ─────────────────────────────────────────────────────────────────────────── */

/*
 * The bridge is a horizontal line that spans the 32px flex gap between the
 * spine (border of side column) and the card anchor.
 *
 * LEFT bridge (::before):
 *   right:100%  → right edge of ::before sits at the left edge of card-anchor
 *   width:32px  → left edge therefore sits exactly at the spine (gap = 32px) ✓
 *
 * RIGHT bridge (::after):
 *   left:100%   → left edge sits at the right edge of card-anchor
 *   width:32px  → right edge reaches the spine ✓
 *
 * top:50% places the bridge at the card's vertical centre.  The spine is a
 * full-height border on the side column; the bridge intersects it at this
 * height forming a clean T-junction with the item stubs above and below.
 */
.org-card-row.has-side-left .org-card-anchor::before {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 100%;
	width: 32px;
	height: var(--org-line-weight, 1.5px);
	background: var(--org-line-color, rgba(100,116,139,0.55));
	pointer-events: none;
}

.org-card-row.has-side-right .org-card-anchor::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 100%;
	width: 32px;
	height: var(--org-line-weight, 1.5px);
	background: var(--org-line-color, rgba(100,116,139,0.55));
	pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 4.  Side columns  (v6 overrides v5 for elements inside org-card-row)
 * ─────────────────────────────────────────────────────────────────────────── */

/*
 * Specificity comparison:
 *   v5  .org-side-column--left                              = 0,1,0
 *   v6  .org-card-row .org-side-column--left                = 0,2,0  ← wins ✓
 *
 * padding-right/left creates the 12px gap between items and the spine border.
 * The spine (border-right / border-left) is drawn on the column itself.
 */
.org-card-row .org-side-column {
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
}

.org-card-row .org-side-column--left {
	align-items: flex-end;
	border-right: var(--org-line-weight, 1.5px) var(--org-line-style, solid) var(--org-line-color, rgba(100,116,139,0.55));
	padding-right: 12px;
}

.org-card-row .org-side-column--right {
	align-items: flex-start;
	border-left: var(--org-line-weight, 1.5px) var(--org-line-style, solid) var(--org-line-color, rgba(100,116,139,0.55));
	padding-left: 12px;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 5.  Side-item stubs  —  item → spine  (12px, short)
 * ─────────────────────────────────────────────────────────────────────────── */

/*
 * Specificity:
 *   v5  .org-side-column--left .org-side-item::after        = 0,2,0
 *   v6  .org-card-row .org-side-column--left .org-side-item::after = 0,3,0  ← wins ✓
 *
 * v5 stubs spanned 32px (item → card edge) — every item pointed to a
 * different height on the card, producing a visually disconnected fan.
 *
 * v6 stubs span only 12px (item → spine).  The spine connects all items
 * vertically; the bridge (above) connects the spine to the card.
 *
 * right:-12px  for left column: stub right edge is 12px past item right edge
 *              = spine position (padding-right:12px on column). ✓
 * left:-12px   for right column: mirror. ✓
 */
.org-card-row .org-side-item {
	position: relative;
}

.org-card-row .org-side-column--left .org-side-item::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: -12px;
	width: 12px;
	height: var(--org-line-weight, 1.5px);
	background: var(--org-line-color, rgba(100,116,139,0.55));
}

.org-card-row .org-side-column--right .org-side-item::after {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: -12px;
	width: 12px;
	height: var(--org-line-weight, 1.5px);
	background: var(--org-line-color, rgba(100,116,139,0.55));
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 6.  Compact stacking
 * ─────────────────────────────────────────────────────────────────────────── */

/*
 * side_compact:true on a node adds --compact to its side columns.
 * Even items are shifted up (~30% overlap) and staggered inward.
 * Hover / focus raises the card to full visibility.
 * Mobile resets all offsets — compact is desktop + PDF only.
 */
.org-side-column--compact .org-side-item {
	position: relative;
	z-index: 0;
}

.org-side-column--compact .org-side-item:nth-child(even) {
	margin-top: -35px;
	margin-inline-start: 18px;
	z-index: 1;
}

.org-side-column--compact .org-side-item:hover,
.org-side-column--compact .org-side-item:focus-within {
	z-index: 10;
	position: relative;
}

@media (max-width: 768px) {
	.org-side-column--compact .org-side-item:nth-child(even) {
		margin-top: 0;
		margin-inline-start: 0;
		z-index: 0;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 7.  Gap-filler: card-bottom → row-bottom connector
 * ─────────────────────────────────────────────────────────────────────────── */

/*
 * Problem solved here:
 *   org-card-row has align-items:flex-start.
 *   Row height = tallest side column (may be 200px+).
 *   org-card-anchor (card only) may be only 60px.
 *   org-children-wrap starts at row-bottom = 200px → 140px gap with no line.
 *
 * Fix: wrap card-anchor in org-card-anchor-outer (align-self:stretch).
 *   outer stretches to the full row height.
 *   org-card-row-connector (flex:1) fills the remaining space below the card
 *   with the connector colour, bridging the gap perfectly.
 *
 * When side cols are SHORTER than the card: flex:1 on the connector = 0 height.
 * Nothing is drawn, nothing breaks. ✓
 */

.org-card-anchor-outer {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch; /* fills full org-card-row cross-axis height */
}

/*
 * Fills the variable gap between card bottom and row bottom.
 * flex:1 grows to consume exactly (row_height − card_height) pixels.
 * min-height:0 prevents any implicit minimum from inflating the gap.
 */
.org-card-row-connector {
	flex: 1;
	min-height: 0;
	width: var(--org-line-weight, 1.5px);
	background: var(--org-line-color, rgba(100,116,139,0.55));
}

/* ─────────────────────────────────────────────────────────────────────────────
 * 8.  Children area below the card row
 * ─────────────────────────────────────────────────────────────────────────── */

/*
 * When a side-branch node also has main children they are rendered below the
 * card row inside org-branch-with-sides.  No new CSS is needed because the
 * existing v4 rules for org-children-wrap / org-connector-vert / org-children
 * / org-branch remain in effect.
 *
 * org-branch-with-sides is flex-column + align-items:center so the card row
 * and children-wrap stack vertically and stay centred automatically. ✓
 */