/* --------------------------------------------------------------------------
   Location hierarchy chart (LocationHierarchyChart.razor + location-chart.js)

   Boxes are filled with their location type's colour (white text on every
   palette colour is >= 6.3:1). Storage spots are white boxes carrying the type
   colour as a bar on their left edge, so the structure reads at a glance:
   coloured boxes are places, white boxes are where stock sits.
   Connector lines use a grey that holds 3:1 against the canvas in both themes.
   -------------------------------------------------------------------------- */

.lhc-dialog .mud-dialog-title {
    padding: 14px 24px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* MudBlazor wraps the content in a focus-trap div; it has to stretch too,
   or the chart's height collapses to nothing. */
.lhc-dialog > .mud-focus-trap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.lhc-dialog .mud-dialog-content.lhc-dialog__content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.lhc-dialog__title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 40px; /* the dialog's close button */
}

.lhc-dialog__heading {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.lhc-dialog__sub {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--mud-palette-text-secondary);
}

.lhc {
    --lhc-line: color-mix(in srgb, var(--mud-palette-text-secondary) 70%, var(--mud-palette-surface));
    --lhc-hit: var(--mud-palette-warning);
    --lhc-gap: 28px;   /* box to sibling bar, and bar to box */
    --lhc-sib: 8px;    /* half the space between siblings */
    --lhc-w: 11rem;
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    background: var(--mud-palette-surface);
}

/* ── Toolbar and legend ─────────────────────────────────────────────── */

.lhc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 24px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.lhc-search {
    flex: 1 1 260px;
    min-width: 200px;
    max-width: 380px;
}

.lhc-search .mud-input-control {
    margin: 0;
}

.lhc-search__status {
    min-width: 4.5em;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.lhc-toolbar__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.lhc-toolbar__spacer {
    flex: 1 1 auto;
}

.lhc-zoom__level {
    min-width: 3.5em;
    height: 30px;
    padding: 0 4px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.lhc-zoom__level:hover {
    background: var(--mud-palette-action-default-hover);
}

.lhc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    margin: 0;
    padding: 8px 24px 10px;
    list-style: none;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.8125rem;
    color: var(--mud-palette-text-primary);
}

.lhc-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.lhc-legend__count {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.lhc-legend__note {
    color: var(--mud-palette-text-secondary);
}

.lhc-legend__swatch {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--lhc-type);
}

.lhc-legend__swatch--storage {
    background: var(--mud-palette-surface);
    box-shadow: inset 4px 0 0 var(--lhc-type, var(--lhc-line)), inset 0 0 0 1px var(--lhc-line);
}

/* ── Canvas ─────────────────────────────────────────────────────────── */

/* clip, not hidden: focus moving into the off-canvas panel must not be able
   to scroll this box sideways. */
.lhc-body {
    position: relative;
    min-height: 0;
    overflow: clip;
}

/* A dotted ground that scrolls with the chart, so a pan visibly moves. */
.lhc-viewport {
    position: absolute;
    inset: 0;
    overflow: auto;
    overscroll-behavior: contain;
    cursor: grab;
    background-color: var(--mud-palette-background);
    background-image: radial-gradient(color-mix(in srgb, var(--mud-palette-text-secondary) 20%, transparent) 1px, transparent 1.6px);
    background-size: 22px 22px;
    background-attachment: local;
}

.lhc-viewport.is-panning {
    cursor: grabbing;
    user-select: none;
}

.lhc-viewport:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* location-chart.js sizes the stage to the scaled chart; margin centres a
   chart narrower than the screen. */
.lhc-stage {
    position: relative;
    margin: 0 auto;
}

.lhc-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: max-content;
    padding: 40px 48px 72px;
    transform-origin: 0 0;
}

.lhc-empty {
    margin: 48px;
    color: var(--mud-palette-text-secondary);
}

/* ── Connectors ─────────────────────────────────────────────────────────
   Each box hangs from a bar across its siblings: the left and right halves
   of the bar are ::before / ::after on each item, and ::after also drops the
   line into the box. A stem runs down from the parent to the bar. */

.lhc-tree,
.lhc-tree ul {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lhc-tree ul {
    padding-top: var(--lhc-gap);
}

.lhc-tree ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: var(--lhc-gap);
    margin-left: -1px;
    border-left: 2px solid var(--lhc-line);
}

.lhc-li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--lhc-gap) var(--lhc-sib) 0;
}

.lhc-li::before,
.lhc-li::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: var(--lhc-gap);
    border-top: 2px solid var(--lhc-line);
}

.lhc-li::before {
    right: 50%;
}

.lhc-li::after {
    left: 50%;
    margin-left: -1px;
    border-left: 2px solid var(--lhc-line);
}

.lhc-li:first-child::before,
.lhc-li:last-child::after {
    border: 0 none;
}

.lhc-li:last-child::before {
    margin-right: -1px;
    border-right: 2px solid var(--lhc-line);
    border-radius: 0 10px 0 0;
}

.lhc-li:first-child::after {
    border-radius: 10px 0 0 0;
}

/* An only child hangs straight down. */
.lhc-li:only-child::before {
    display: none;
}

.lhc-li:only-child::after {
    border-top: 0 none;
    border-left: 2px solid var(--lhc-line);
    border-radius: 0;
}

/* The top box hangs from nothing. */
.lhc-tree > .lhc-li {
    padding-top: 0;
}

.lhc-tree > .lhc-li::before,
.lhc-tree > .lhc-li::after {
    display: none;
}

/* ── Boxes ──────────────────────────────────────────────────────────── */

.lhc-node-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Room under a box for the half of its toggle that hangs below it. */
.lhc-node-wrap:has(.lhc-toggle) {
    margin-bottom: 14px;
}

.lhc-node {
    --lhc-edge: color-mix(in srgb, var(--lhc-type) 60%, var(--mud-palette-text-primary));
    position: relative;
    z-index: 1;
    inline-size: var(--lhc-w);
    min-block-size: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: var(--lhc-type);
    color: #fff;
    font: inherit;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--lhc-edge), 0 1px 2px rgb(17 24 39 / 0.12), 0 8px 18px -10px rgb(17 24 39 / 0.45);
    transition: transform 100ms ease-out, filter 160ms ease;
}

.lhc-node-wrap:has(.lhc-toggle) > .lhc-node {
    padding-bottom: 18px;
}

/* Feedback on the press itself, not on release. */
.lhc-node:active {
    transform: scale(0.97);
}

.lhc-node__name {
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* After the name in the DOM (so the name leads what a screen reader says),
   above it on screen. */
.lhc-node__type {
    order: -1;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
    color: rgb(255 255 255 / 0.88);
}

.lhc-node__code {
    margin-top: 2px;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: rgb(255 255 255 / 0.88);
    font-variant-numeric: tabular-nums;
}

.lhc-node__flag {
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.6875rem;
    font-weight: 700;
}

.lhc-node--org {
    --lhc-type: #1f2937;
    inline-size: 14rem;
    padding: 14px 20px;
    cursor: default;
}

.lhc-node--org:active {
    transform: none;
}

.lhc-node--org .lhc-node__name {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Storage spots and folded groups: white boxes, type colour on the left. */
.lhc-node--storage,
.lhc-node--group {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: inset 4px 0 0 var(--lhc-type), 0 0 0 1px var(--lhc-line), 0 1px 2px rgb(17 24 39 / 0.08);
}

.lhc-node--group {
    box-shadow: inset 4px 0 0 var(--lhc-type), 0 1px 2px rgb(17 24 39 / 0.08);
    border: 1.5px dashed var(--lhc-line);
}

.lhc-node--storage .lhc-node__type,
.lhc-node--storage .lhc-node__code,
.lhc-node--group .lhc-node__type,
.lhc-node--group .lhc-node__code {
    color: var(--mud-palette-text-secondary);
}

.lhc-node.is-inactive {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    border: 1.5px dashed var(--lhc-line);
    box-shadow: none;
}

.lhc-node.is-inactive .lhc-node__type,
.lhc-node.is-inactive .lhc-node__code {
    color: var(--mud-palette-text-secondary);
}

/* Search: matches get a ring; everything else drains to grey. Greyscale,
   not transparency, so text keeps its contrast. */
.lhc-node.is-hit,
.lhc-chip.is-hit {
    outline: 3px solid var(--lhc-hit);
    outline-offset: 3px;
}

.lhc-node.is-current,
.lhc-chip.is-current {
    outline-width: 4px;
}

.lhc-node.is-dim {
    filter: grayscale(1);
}

.lhc-node.is-selected,
.lhc-chip.is-selected {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

/* One ring that expands as the chart arrives at a location. */
.lhc-node.lhc-arrive::after,
.lhc-chip.lhc-arrive::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 3px solid var(--mud-palette-primary);
    border-radius: 16px;
    pointer-events: none;
    animation: lhc-arrive 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes lhc-arrive {
    from { opacity: 0.9; transform: scale(0.94); }
    to   { opacity: 0;   transform: scale(1.14); }
}

/* ── Toggle under a box ─────────────────────────────────────────────── */

.lhc-toggle {
    position: absolute;
    left: 50%;
    bottom: -14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 28px;
    min-width: 28px;
    padding: 0 6px 0 9px;
    border: 1.5px solid var(--lhc-line);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transform: translateX(-50%);
    box-shadow: 0 1px 3px rgb(17 24 39 / 0.18);
    transition: transform 100ms ease-out;
}

.lhc-toggle:active {
    transform: translateX(-50%) scale(0.94);
}

.lhc-toggle__chevron {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lhc-toggle[aria-expanded="true"] .lhc-toggle__chevron {
    transform: rotate(180deg);
}

/* ── A folded group, opened into chips ──────────────────────────────── */

.lhc-chips {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 18px 0 0;
    padding: 12px;
    list-style: none;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 6%, var(--mud-palette-surface));
}

.lhc-chips::before {
    content: "";
    position: absolute;
    top: -19px;
    left: 50%;
    height: 18px;
    margin-left: -1px;
    border-left: 2px solid var(--lhc-line);
}

.lhc-chips--sm { inline-size: 18rem; }
.lhc-chips--md { inline-size: 28rem; }
.lhc-chips--lg { inline-size: 42rem; }

.lhc-chip {
    position: relative;
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 100ms ease-out;
}

.lhc-chip:hover {
    border-color: var(--lhc-line);
}

.lhc-chip:active {
    transform: scale(0.96);
}

.lhc-chip.is-dim {
    background: transparent;
    color: var(--mud-palette-text-secondary);
}

/* ── Details panel ──────────────────────────────────────────────────────
   Slides in from the right edge and leaves the same way. */

.lhc-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    inline-size: min(380px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    box-shadow: -18px 0 40px -28px rgb(17 24 39 / 0.45);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 300ms;
}

.lhc-panel.is-open {
    transform: none;
    visibility: visible;
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}

.lhc-panel__head {
    position: relative;
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.lhc-panel__close {
    position: absolute !important;
    top: 10px;
    right: 10px;
}

.lhc-crumbs {
    display: flex;
    flex-wrap: wrap;
    margin: 0 40px 8px 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    line-height: 1.6;
}

.lhc-crumbs li::after {
    content: "›";
    margin: 0 6px;
    color: var(--mud-palette-text-secondary);
}

.lhc-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--mud-palette-primary);
    font: inherit;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.lhc-panel__title {
    margin: 0 40px 10px 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.lhc-panel__title:focus {
    outline: none;
}

.lhc-panel__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lhc-tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--lhc-type);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}

.lhc-tag--plain {
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 10%, var(--mud-palette-surface));
    color: var(--mud-palette-text-primary);
}

.lhc-panel__body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px 20px;
}

.lhc-reports {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

.lhc-reports__label,
.lhc-reports__type {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.lhc-reports__label {
    font-weight: 600;
}

.lhc-reports__value {
    font-size: 0.9375rem;
    font-weight: 700;
}

.lhc-facts {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    margin: 16px 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.lhc-facts dt {
    padding: 9px 12px 9px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.lhc-facts dd {
    margin: 0;
    padding: 9px 0;
    border-top: 1px solid var(--mud-palette-lines-default);
    overflow-wrap: anywhere;
}

.lhc-facts dd.is-empty {
    color: var(--mud-palette-text-secondary);
}

.lhc-from {
    display: block;
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.lhc-panel__sub {
    margin: 20px 0 8px;
    font-size: 0.8125rem;
    font-weight: 700;
}

.lhc-kids {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lhc-kid {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 4px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.lhc-kid .lhc-legend__swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
}

.lhc-more {
    margin: 8px 0 0;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.lhc-panel__foot {
    padding: 14px 20px 18px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.lhc-panel__hint {
    margin: 8px 0 0;
    font-size: 0.75rem;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

/* ── Small screens ──────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .lhc-dialog .mud-dialog-title,
    .lhc-toolbar,
    .lhc-legend {
        padding-left: 12px;
        padding-right: 12px;
    }

    .lhc-search {
        max-width: none;
    }

    .lhc-dialog__sub {
        display: none;
    }
}

/* ── Reduced motion: no slides, springs or rings; the panel cross-fades. ── */

@media (prefers-reduced-motion: reduce) {
    .lhc-node,
    .lhc-toggle,
    .lhc-chip,
    .lhc-toggle__chevron {
        transition: none;
    }

    .lhc-node:active,
    .lhc-chip:active {
        transform: none;
    }

    .lhc-toggle:active {
        transform: translateX(-50%);
    }

    .lhc-node.lhc-arrive::after,
    .lhc-chip.lhc-arrive::after {
        animation: none;
        display: none;
    }

    .lhc-panel,
    .lhc-panel.is-open {
        transform: none;
        transition: opacity 150ms ease, visibility 0s linear 150ms;
    }

    .lhc-panel {
        opacity: 0;
    }

    .lhc-panel.is-open {
        opacity: 1;
        transition: opacity 150ms ease, visibility 0s;
    }
}

/* ── Access overlay (Access Center "Show on the hierarchy chart") ─────────
   Reachable boxes carry their access as text; everything else drains to
   grey like a search miss. Greyscale, not transparency, so faded text keeps
   its contrast and the label, not the colour, carries the meaning. */
.lhc-node__mark {
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.5;
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
}

.lhc-node.is-faded,
.lhc-node--group.is-faded {
    filter: grayscale(1);
}

.lhc-chip.is-faded {
    background: transparent;
    color: var(--mud-palette-text-secondary);
}

.lhc-chip__mark {
    font-weight: 700;
}

/* ── Supply view ─────────────────────────────────────────────────────────
   When some top-level locations supply others (sharing rules), the
   suppliers sit in a frame, the connector from the organisation box lands on
   the frame, and the locations they supply hang from the caption on its
   bottom edge. Suppliers that order from each other get a dashed arrow
   (location-chart.js). Top-level locations that supply themselves get a
   second frame beside it, at the suppliers' level. The legend line says the
   same in words. */
.lhc {
    --lhc-link: color-mix(in srgb, var(--mud-palette-warning) 62%, var(--mud-palette-text-primary));
}

.lhc-supply-legend {
    margin: 0;
    padding: 6px 24px 10px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.lhc-supply-legend strong {
    color: var(--mud-palette-text-primary);
}

.lhc-supply {
    position: relative;
    padding: 0 20px 36px;
    border: 2px solid var(--lhc-line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 2%, transparent);
}

/* Suppliers sit far enough apart for an arrow and its label between them. */
.lhc-supply__tier > .lhc-li {
    padding-inline: 84px;
}

.lhc-supply__tier > .lhc-li:first-child {
    padding-left: var(--lhc-sib);
}

.lhc-supply__tier > .lhc-li:last-child {
    padding-right: var(--lhc-sib);
}

/* No arrows run between locations that supply themselves: normal spacing. */
.lhc-supply--self .lhc-supply__tier > .lhc-li {
    padding-inline: var(--lhc-sib);
}

.lhc-supply__label {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 2;
    transform: translate(-50%, 50%);
    padding: 4px 14px;
    border: 1.5px solid var(--lhc-line);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

/* The supplied locations hang from the caption, so their stem starts below it. */
.lhc-tree ul.lhc-supply__below {
    padding-top: calc(var(--lhc-gap) + 14px);
}

.lhc-tree ul.lhc-supply__below::before {
    height: calc(var(--lhc-gap) + 14px);
}

/* Who supplies this one, when suppliers cover different locations, or what a
   self-supplying location also orders from. */
.lhc-node__from {
    margin-top: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.3;
    opacity: 0.92;
}

.lhc-links {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}

.lhc-links__line {
    fill: none;
    stroke: var(--lhc-link);
    stroke-width: 2;
    stroke-dasharray: 7 5;
}

.lhc-links__head {
    fill: var(--lhc-link);
}

.lhc-link-label {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    padding: 3px 10px;
    border: 1.5px solid var(--lhc-link);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}