/*
 * The Branch's organisation chart ([neb_org_chart], inc/units.php), after NEB's own chart: the Chief Medical Officer,
 * the National Epidemiologist with the Office's roles either side of the line down, then the units side by side, each
 * with its roles on a bracket. In NEB's colours; on a unit's page that unit is in NEB blue and the rest is faded.
 * The line of oversight, from the Chief Medical Officer through the Principal Medical Officer and National
 * Epidemiologist down to every unit, is solid navy and never faded (Danny, 11 November 2026: "the lines connecting
 * the PMO to the units need to be active not faded"); the roles' brackets are light blue. Square corners, no shadows.
 */
.neb-orgchart { margin: 32px 0 0; --oc-line: var(--e-global-color-lightblue); --oc-chain: var(--e-global-color-primary); }
.neb-oc-chart { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.neb-orgchart ul, .neb-orgchart ol { margin: 0; padding: 0; list-style: none; }
.neb-orgchart li { margin: 0; }

/* Boxes. */
.neb-oc-node { position: relative; display: block; margin: 0; padding: 10px 14px; border: 1px solid var(--e-global-color-primary); background-color: var(--e-global-color-primary); color: #fff; font: 600 16px/1.35 Inter, sans-serif; text-align: center; text-decoration: none; transition: background-color .15s, border-color .15s; }
/* .neb-orgchart a.…: outranks the kit's link colour. */
.neb-orgchart .neb-oc-node, .neb-orgchart a.neb-oc-node { color: #fff; }
.neb-orgchart .neb-oc-cmo { color: var(--e-global-color-primary); }
.neb-orgchart a.neb-oc-node:hover, .neb-orgchart a.neb-oc-node:focus-visible { border-color: var(--e-global-color-secondary); background-color: var(--e-global-color-secondary); color: #fff; }
.neb-oc-cmo { border-color: var(--e-global-color-lightblue); background-color: #fff; color: var(--e-global-color-primary); }
.neb-oc-office { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.neb-oc-office > .neb-oc-node { max-width: 380px; }
.neb-oc-staff li, .neb-oc-roles li { position: relative; padding: 8px 12px; border: 1px solid var(--oc-line); background-color: var(--e-global-color-paleblue); color: var(--e-global-color-primary); font-size: 15px; font-weight: 500; line-height: 1.35; text-align: center; }

/* Lines: CMO down to the National Epidemiologist, on down past the Office's roles to the units. */
.neb-oc-office > .neb-oc-node::before { content: ""; position: absolute; top: -17px; left: 50%; width: 2px; height: 16px; margin-left: -1px; background-color: var(--oc-chain); }
.neb-oc-staff { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 48px; width: min(100%, 440px); }
.neb-oc-staff::before { content: ""; position: absolute; top: -17px; bottom: -17px; left: 50%; width: 2px; margin-left: -1px; background-color: var(--oc-chain); }
.neb-oc-staff li::after { content: ""; position: absolute; top: 50%; width: 24px; height: 2px; margin-top: -1px; background-color: var(--oc-line); }
.neb-oc-staff li:nth-child(odd)::after { right: -25px; }
.neb-oc-staff li:nth-child(even)::after { left: -25px; }

/* The units: across, then down to each. */
.neb-oc-units { --n: 4; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 16px; align-self: stretch; padding-top: 24px !important; }
.neb-oc-units::before { content: ""; position: absolute; top: 0; left: calc((100% - (var(--n) - 1) * 16px) / var(--n) / 2); right: calc((100% - (var(--n) - 1) * 16px) / var(--n) / 2); height: 2px; background-color: var(--oc-chain); }
.neb-oc-unit { position: relative; display: flex; flex-direction: column; }
.neb-oc-unit::before { content: ""; position: absolute; top: -24px; left: 50%; width: 2px; height: 24px; margin-left: -1px; background-color: var(--oc-chain); }
.neb-oc-unit > .neb-oc-node { display: flex; align-items: center; justify-content: center; min-height: 72px; }
/* Each unit's roles on a bracket down its left. */
.neb-oc-roles { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0 14px !important; padding-left: 14px !important; }
/* One line down: through each item and the gap above it, stopping at the last item's middle. */
.neb-oc-roles li::before { content: ""; position: absolute; top: -9px; bottom: -1px; left: -16px; width: 2px; background-color: var(--oc-line); }
.neb-oc-roles li:first-child::before { top: -11px; }
.neb-oc-roles li:last-child::before { bottom: 50%; }
.neb-oc-roles li::after { content: ""; position: absolute; top: 50%; left: -16px; width: 16px; height: 2px; margin-top: -1px; background-color: var(--oc-line); }

/* A unit's page: that unit (or the Office) in NEB blue, the other units faded; the line of oversight stays solid (the
   other units fade their boxes, not themselves, so the lines to them stay). The Office of the National
   Epidemiologist's roles never fade, and on the Office's own page only the CMO does: the National Epidemiologist
   answers for the whole Branch (Danny, 11 November 2026). */
.has-focus .neb-oc-cmo,
.has-focus:not(.focus-office) .neb-oc-unit:not(.is-here) > * { opacity: .4; }
.has-focus .is-here > .neb-oc-node, .has-focus .neb-oc-unit.is-here > .neb-oc-node { border-color: var(--e-global-color-secondary); background-color: var(--e-global-color-secondary); }
.has-focus .is-here li { border-color: var(--e-global-color-secondary); background-color: #fff; color: var(--e-global-color-primary); }
.has-focus .is-here { --oc-line: var(--e-global-color-secondary); }
.has-focus .neb-oc-unit.is-here { --oc-chain: var(--e-global-color-secondary); }

.neb-orgchart figcaption { margin: 16px 0 0; font-size: 15px; line-height: 1.5; color: var(--e-global-color-muted); text-align: left; }

/*
 * Phones: the units in one column on a spine down the left, joined to the line from the National Epidemiologist, so
 * every unit stays connected to the head. On a unit's page the other units shrink to their names.
 */
@media (max-width: 767px) {
	.neb-oc-units { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding: 24px 0 0 24px !important; }
	.neb-oc-units::before { left: 8px; right: 50%; }
	/* The spine stays navy past the unit in blue; only its branch is blue. */
	.neb-oc-unit::before { top: -17px; bottom: -1px; left: -16px; width: 2px; height: auto; margin: 0; background-color: var(--e-global-color-primary); }
	.neb-oc-unit:first-child::before { top: -25px; }
	.neb-oc-unit:last-child::before { bottom: auto; height: calc(var(--oc-mid, 22px) + 25px); }
	.neb-oc-unit::after { content: ""; position: absolute; top: var(--oc-mid, 22px); left: -16px; width: 16px; height: 2px; margin-top: -1px; background-color: var(--oc-chain); }
	/* Names left-aligned, so the branch meets the first line of a name that wraps. */
	.neb-oc-unit > .neb-oc-node { min-height: 44px; justify-content: flex-start; text-align: left; }
	.has-focus:not(.focus-office) .neb-oc-unit:not(.is-here) .neb-oc-roles { display: none; }
	.neb-oc-staff { gap: 8px 32px; }
	.neb-oc-staff li:nth-child(odd)::after { right: -17px; width: 16px; }
	.neb-oc-staff li:nth-child(even)::after { left: -17px; width: 16px; }
}