/* Field lineage (Pages/LineagePage, the inspectors' Lineage links). Built on the rd-* panels and buttons. */

/* ---------------------------------------------------------------- the inspectors' link row */

.xi-lineage {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 9px 12px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 10px;
    background: var(--xm-surface);
    font-size: 12.5px;
}

.xi-lineage-icon {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: var(--xm-accent);
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.xi-lineage-label {
    font-weight: 600;
    color: var(--xm-text);
}

/* ---------------------------------------------------------------- the page */

.ln-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ln-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ln-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--xm-accent);
}

.ln-head h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    color: var(--xm-text);
}

.ln-where {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--xm-text-muted);
}

    .ln-where code {
        font-size: 12.5px;
        word-break: break-all;
    }

.ln-lede {
    margin: 0;
    max-width: 70ch;
    color: var(--xm-text-muted);
}

.ln-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 18px;
    align-items: start;
}

@media (max-width: 520px) {
    .ln-panels {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ln-panel-head h2 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--xm-text);
}

.ln-panel-head p {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--xm-text-muted);
}

.ln-none {
    margin: 0;
    font-size: 13px;
    color: var(--xm-text-muted);
}

.ln-building,
.ln-empty {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.ln-building {
    flex-direction: row;
    align-items: center;
}

    .ln-building p,
    .ln-empty p {
        margin: 0;
        max-width: 70ch;
        font-size: 13px;
        color: var(--xm-text-muted);
    }

.ln-empty h2 {
    margin: 0;
    font-size: 16px;
}

/* ---------------------------------------------------------------- the tree */

.ln-tree {
    margin: 0;
    padding: 0 0 0 18px;
    list-style: none;
    border-left: 1px dashed var(--xm-border-soft);
}

.ln-panel-head + .ln-tree,
.ln-panels > .rd-panel > .ln-tree {
    padding-left: 0;
    border-left: 0;
}

.ln-step {
    padding: 8px 0 4px;
}

.ln-map-row,
.ln-field-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}

.ln-map-icon {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: var(--xm-text-muted);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ln-map {
    font-weight: 600;
    color: var(--xm-text);
}

.ln-muted {
    font-size: 12px;
    color: var(--xm-text-muted);
}

.ln-kind {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
}

    .ln-kind.is-link {
        background: color-mix(in srgb, var(--xm-accent) 12%, var(--xm-surface));
        color: var(--xm-accent-text);
    }

    .ln-kind.is-transform {
        background: color-mix(in srgb, var(--xm-warning-text) 16%, var(--xm-surface));
        color: var(--xm-text);
    }

    .ln-kind.is-control {
        border: 1px dashed var(--xm-control-border);
        color: var(--xm-text-muted);
    }

.ln-chip {
    padding: 1px 8px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 999px;
    font-size: 11.5px;
    color: var(--xm-text-muted);
}

    .ln-chip.is-copy {
        border-style: dashed;
    }

.ln-open {
    margin-left: auto;
    font-size: 12px;
}

.ln-field-row {
    margin: 4px 0 0 24px;
}

    .ln-field-row code {
        font-size: 12px;
        color: var(--xm-text-muted);
        word-break: break-all;
    }

.ln-arrow {
    color: var(--xm-accent);
    font-weight: 600;
}

.ln-field-row + .ln-tree {
    margin: 4px 0 0 30px;
}

.ln-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--xm-text-muted);
}

    .ln-chip.is-suggest {
        border-color: color-mix(in srgb, var(--xm-accent) 45%, transparent);
        color: var(--xm-accent-text);
    }

    .ln-chip.is-confirmed {
        border-color: color-mix(in srgb, var(--xm-accent) 45%, transparent);
        background: color-mix(in srgb, var(--xm-accent) 10%, var(--xm-surface));
        color: var(--xm-accent-text);
    }

    .ln-chip.is-declared {
        border-style: dotted;
        border-color: var(--xm-accent);
        color: var(--xm-accent-text);
    }

    .ln-chip.is-warn {
        border-color: color-mix(in srgb, var(--xm-warning-text) 45%, transparent);
        background: var(--xm-warning-bg);
        color: var(--xm-warning-text);
    }

/* ---------------------------------------------------------------- the schemas, and one schema */

.ln-crumb {
    margin-left: 12px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.ln-panel-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ln-filter {
    width: 220px;
    max-width: 100%;
}

.ln-chips {
    margin-bottom: 12px;
}

.ln-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
}

.ln-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 10px;
    background: var(--xm-surface);
}

    .ln-kpi b {
        font-size: 20px;
        font-weight: 600;
        color: var(--xm-text);
    }

    .ln-kpi span {
        font-size: 12px;
        color: var(--xm-text-muted);
    }

    .ln-kpi.is-warn {
        border-color: color-mix(in srgb, var(--xm-warning-text) 45%, transparent);
        background: var(--xm-warning-bg);
    }

        .ln-kpi.is-warn b,
        .ln-kpi.is-warn span {
            color: var(--xm-warning-text);
        }

.ln-link-row {
    display: flex;
    align-items: center;
    gap: 8px 10px;
    flex-wrap: wrap;
    padding: 9px 0;
    border-top: 1px solid var(--xm-border-soft);
    font-size: 13px;
}

    .ln-link-row:first-of-type {
        border-top: 0;
    }

    .ln-link-row.is-suggestion {
        margin: 0 -10px;
        padding: 9px 10px;
        border-radius: 8px;
        background: color-mix(in srgb, var(--xm-accent) 5%, transparent);
    }

.ln-actions {
    display: inline-flex;
    gap: 8px;
    margin-left: auto;
}

.ln-note {
    flex-basis: 100%;
    font-size: 12px;
    font-style: italic;
    color: var(--xm-text-muted);
}

.ln-form {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

    .ln-form select {
        flex: 1;
        min-width: 0;
    }

.ln-rejected {
    margin: 12px 0 0;
}

.ln-rejected-item {
    margin-left: 8px;
}

.ln-link-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 12px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 10px;
}

    .ln-link-form label {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

.ln-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--xm-text-muted);
}

.ln-form-actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.ln-coverage td {
    vertical-align: top;
}

.ln-coverage tr.is-unused td {
    color: var(--xm-text-muted);
}

.ln-path {
    margin-top: 2px;
    font-family: var(--xm-font-mono, ui-monospace, monospace);
    font-size: 11.5px;
    color: var(--xm-text-muted);
    word-break: break-all;
}

.ln-row-actions {
    white-space: nowrap;
    text-align: right;
}

    .ln-row-actions > * + * {
        margin-left: 10px;
    }

@media (max-width: 640px) {
    .ln-filter {
        width: 100%;
    }

    .ln-actions {
        margin-left: 0;
    }
}

/* ---------------------------------------------------------------- runs on the trace */

.ln-live {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ln-runs {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--xm-surface-hover);
    font-size: 11.5px;
    color: var(--xm-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

    a.ln-runs:hover {
        color: var(--xm-text);
    }

    .ln-runs.is-failing {
        background: color-mix(in srgb, var(--xm-danger) 12%, var(--xm-surface));
        color: var(--xm-danger);
    }

    .ln-runs.is-idle {
        background: none;
        border: 1px dashed var(--xm-border-soft);
    }

.ln-failure {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 4px 0 0 24px;
    font-size: 12px;
    color: var(--xm-danger);
    text-decoration: none;
}

    .ln-failure:hover {
        text-decoration: underline;
    }

    .ln-failure svg {
        width: 14px;
        height: 14px;
        flex: none;
        margin-top: 1px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ---------------------------------------------------------------- the schemas of a space, as cards */

.ln-index-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .ln-index-bar .ln-search {
        flex: 1 1 260px;
        max-width: 420px;
    }

    .ln-index-bar .xm-count {
        margin-left: auto;
    }

.ln-index-note {
    margin: 8px 2px 0;
    font-size: 12px;
    color: var(--xm-text-muted);
}

.ln-card {
    animation: ln-card-in .25s ease-out;
}

    .ln-card a.xm-card-main {
        text-decoration: none;
    }

    .ln-card.is-reading {
        cursor: default;
    }

        .ln-card.is-reading:hover {
            border-color: var(--xm-border-soft);
            box-shadow: none;
        }

@keyframes ln-card-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ln-card {
        animation: none;
    }
}

.ln-card-go {
    flex: none;
    color: var(--xm-text-muted);
}

.ln-card:hover .ln-card-go {
    color: var(--xm-accent);
}

.ln-format {
    flex: none;
    padding: 1px 7px;
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    letter-spacing: .02em;
}

    .ln-format.is-xml,
    .ln-format-dot.is-xml {
        background: var(--xm-conv-xmltoxml);
    }

    .ln-format.is-json,
    .ln-format-dot.is-json {
        background: var(--xm-conv-jsontojson);
    }

    .ln-format.is-flatfile,
    .ln-format-dot.is-flatfile {
        background: var(--xm-conv-flatfile);
    }

.ln-card-stats {
    gap: 12px;
    font-size: 12px;
    color: var(--xm-text-muted);
}

.ln-stat::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    vertical-align: 1px;
}

.ln-stat.is-read::before {
    background: var(--xm-kind-source);
}

.ln-stat.is-write::before {
    background: var(--xm-kind-link);
}

.ln-building-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ln-progress {
    height: 6px;
    max-width: 520px;
    border-radius: 999px;
    background: var(--xm-surface-hover);
    overflow: hidden;
}

    .ln-progress span {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--xm-accent);
        transition: width .4s ease;
    }

/* ---------------------------------------------------------------- schemas as tiles, several to a row */

.ln-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
    padding-top: 12px;
}

.ln-tile {
    min-width: 0;
    border: 1px solid var(--xm-border-soft);
    border-radius: 8px;
    background: var(--xm-surface);
    transition: border-color .12s, box-shadow .12s;
    animation: ln-card-in .25s ease-out;
}

    .ln-tile:hover {
        border-color: var(--xm-accent);
        box-shadow: 0 1px 6px var(--xm-shadow);
    }

    .ln-tile.is-reading:hover {
        border-color: var(--xm-border-soft);
        box-shadow: none;
    }

    .ln-tile.is-skeleton {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 9px 10px;
        min-height: 54px;
    }

@media (prefers-reduced-motion: reduce) {
    .ln-tile {
        animation: none;
    }
}

.ln-tile-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    color: inherit;
    text-decoration: none;
}

.ln-tile.is-reading .ln-tile-main {
    cursor: default;
}

.ln-tile-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ln-tile-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--xm-text);
}

.ln-tile-same {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--xm-warning-text);
    cursor: help;
}

.ln-tile-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    color: var(--xm-text-muted);
    white-space: nowrap;
}

.ln-tile-fields {
    margin-right: auto;
}

.ln-stat.is-zero {
    opacity: .45;
}

/* ---------------------------------------------------------------- versions of a schema on one tile, unfolding */

.ln-group-toggle svg {
    width: 13px;
    height: 13px;
    margin-right: 5px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    vertical-align: -2px;
}

button.ln-tile-main {
    width: 100%;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ln-tile.is-family {
    position: relative;
    overflow: hidden;
    /* a stack: the versions behind it */
    box-shadow: 3px 3px 0 -1px var(--xm-surface), 3px 3px 0 0 var(--xm-border-soft);
}

    .ln-tile.is-family:hover {
        box-shadow: 3px 3px 0 -1px var(--xm-surface), 3px 3px 0 0 var(--xm-accent), 0 1px 6px var(--xm-shadow);
    }

    /* unfolded: the whole row, its versions beneath the name */
    .ln-tile.is-family.is-open {
        grid-column: 1 / -1;
        border-color: var(--xm-accent);
        box-shadow: 0 1px 8px var(--xm-shadow);
    }

.ln-versions {
    flex: none;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--xm-accent) 12%, transparent);
    color: var(--xm-accent);
    font-size: 11px;
    font-weight: 600;
}

/* how many versions are confirmed one message: a thin bar along the tile's foot */
.ln-family-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: color-mix(in srgb, var(--xm-text-muted) 18%, transparent);
}

    .ln-family-bar span {
        display: block;
        height: 100%;
        background: var(--xm-status-ok);
    }

.ln-family-versions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 6px;
    padding: 0 10px 12px;
    animation: lg-drawer-in .18s ease-out;
}

.ln-card .ln-family-versions {
    flex-basis: 100%;
    padding: 6px 0 2px;
}

.ln-card.is-family {
    flex-wrap: wrap;
}

    .ln-card.is-family.is-open .ln-family-caret {
        transform: rotate(180deg);
    }

.ln-version {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 6px;
    background: var(--xm-page-bg);
    color: inherit;
    text-decoration: none;
    transition: border-color .12s;
}

    .ln-version:hover,
    .ln-version:focus-visible {
        border-color: var(--xm-accent);
    }

    .ln-version.is-same {
        border-left: 3px solid var(--xm-status-ok);
    }

.ln-version-head {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.ln-version-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--xm-text);
}

.ln-version-same {
    flex: none;
    width: 12px;
    height: 12px;
    fill: none;
    stroke: var(--xm-status-ok);
    stroke-width: 3;
}

.xm-badge.is-ok {
    border-color: color-mix(in srgb, var(--xm-status-ok) 50%, transparent);
    color: var(--xm-status-ok);
}

.ln-legend {
    display: inline-flex;
    gap: 12px;
    margin-left: 10px;
}

/* ---------------------------------------------------------------- the page frame: the Runs page's sticky top and full-width body */

.rd-page.ln-page {
    display: block;
}

.ln-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ln-crumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--xm-text-muted);
    min-width: 0;
}

    .ln-crumbs > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.ln-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--xm-text-muted);
    white-space: nowrap;
}

.ln-problems {
    height: 28px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--xm-warning-text) 45%, transparent);
    border-radius: 999px;
    background: var(--xm-warning-bg);
    color: var(--xm-warning-text);
    font-size: 12px;
    cursor: pointer;
}

    .ln-problems:hover,
    .ln-problems.is-on {
        border-color: var(--xm-warning-text);
    }

.ln-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .ln-toolbar .ln-search {
        flex: 1 1 240px;
        max-width: 380px;
        height: 34px;
    }

    /* The question box in the toolbar, after the format chips: it takes the room the row has left. */
    .ln-toolbar .ln-ask-inline {
        flex: 1 1 360px;
        min-width: 280px;
        max-width: 720px;
    }

        /* As tall as the search box next to it. */
        .ln-ask-inline .ln-ask-box {
            box-sizing: border-box;
            max-width: none;
            height: 34px;
            padding: 2px 2px 2px 5px;
        }

            .ln-ask-inline .ln-ask-input {
                height: 28px;
            }

            .ln-ask-inline .ln-ask-go {
                height: 28px;
            }

            .ln-ask-inline .ln-xpilot-logo {
                width: 22px;
                height: 22px;
            }

.ln-toolbar-end {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

    .ln-toolbar-end .ln-legend {
        margin: 0;
        font-size: 12px;
        color: var(--xm-text-muted);
    }

.ln-skel-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ln-body > .ln-index > .ln-grid,
.ln-body > .ln-index > .xm-cards,
.ln-body > .ln-grid,
.ln-body > .xm-cards {
    padding-top: 0;
}

/* ---------------------------------------------------------------- a field row's actions: small outlined buttons */

.ln-row-actions > * + * {
    margin-left: 6px;
}

.ln-act {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--xm-control-border);
    border-radius: 6px;
    background: transparent;
    color: var(--xm-text-muted);
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color .12s, border-color .12s, background .12s;
}

    .ln-act svg {
        width: 14px;
        height: 14px;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    tr:hover .ln-act {
        color: var(--xm-text);
    }

    .ln-act:hover,
    .ln-act:focus-visible {
        border-color: var(--xm-accent);
        background: color-mix(in srgb, var(--xm-accent) 12%, transparent);
        color: var(--xm-accent);
        text-decoration: none;
    }

    .ln-act:focus-visible {
        outline: 2px solid color-mix(in srgb, var(--xm-accent) 45%, transparent);
        outline-offset: 1px;
    }

    .ln-act:disabled {
        opacity: .5;
        cursor: default;
    }

    .ln-act.is-danger:hover:not(:disabled),
    .ln-act.is-danger:focus-visible {
        border-color: var(--xm-danger);
        background: color-mix(in srgb, var(--xm-danger) 12%, transparent);
        color: var(--xm-danger);
    }

    .ln-act .xm-spin {
        width: 12px;
        height: 12px;
    }

/* a button that already is one (rd-btn), given an icon */
.ln-btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

    .ln-btn-icon svg {
        width: 13px;
        height: 13px;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* ---------------------------------------------------------------- one schema: fields first, how it connects beside */

.ln-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    font-size: 13px;
    color: var(--xm-text-muted);
}

    .ln-summary b {
        color: var(--xm-text);
        font-weight: 600;
    }

.ln-summary-warn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--xm-warning-text);
}

    .ln-summary-warn svg,
    .ln-map-why svg {
        width: 13px;
        height: 13px;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .ln-summary-warn b {
        color: inherit;
    }

.ln-schema-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 16px;
    align-items: start;
}

@media (max-width: 1100px) {
    .ln-schema-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .ln-side {
        order: -1;
    }
}

.ln-fields-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 12px;
}

    .ln-fields-bar h2 {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        font-size: 16px;
        cursor: help;
    }

    .ln-fields-bar .ln-chips {
        margin: 0;
    }

    .ln-fields-bar .ln-field-search {
        margin-left: auto;
        flex: 0 1 260px;
        height: 32px;
    }

.ln-info {
    width: 14px;
    height: 14px;
    flex: none;
    fill: none;
    stroke: var(--xm-text-muted);
    stroke-width: 1.8;
    stroke-linecap: round;
}

.ln-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ln-side-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 10px;
    background: var(--xm-surface);
    font-size: 12.5px;
}

    .ln-side-card h3 {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        color: var(--xm-text);
        cursor: help;
    }

    .ln-side-card p {
        margin: 0;
        color: var(--xm-text-muted);
    }

    .ln-side-card.is-callout {
        border-color: color-mix(in srgb, var(--xm-accent) 55%, transparent);
        background: color-mix(in srgb, var(--xm-accent) 8%, var(--xm-surface));
    }

        .ln-side-card.is-callout h3 {
            color: var(--xm-accent);
            cursor: default;
        }

.ln-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ln-count {
    padding: 0 7px;
    border-radius: 999px;
    background: var(--xm-surface-hover);
    color: var(--xm-text-muted);
    font-size: 11px;
    font-weight: 500;
}

.ln-side-none {
    font-size: 12px;
}

.ln-side-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 8px;
    border-top: 1px solid var(--xm-border-soft);
    min-width: 0;
}

    .ln-side-item.is-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

/* the history: a timeline, a dot per change coloured by what it did */
.ln-history {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ln-history-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0 6px 16px;
    font-size: 12.5px;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

    .ln-history-item::before {
        content: "";
        position: absolute;
        left: 3px;
        top: 12px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--xm-text-muted);
    }

    .ln-history-item:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 6px;
        top: 21px;
        bottom: -6px;
        width: 1px;
        background: var(--xm-border-soft);
    }

    .ln-history-item.is-samemessage::before,
    .ln-history-item.is-fieldslinked::before {
        background: var(--xm-status-ok);
    }

    /* what undoes or turns down a join: taken back, not the same, unlinked */
    .ln-history-item.is-notthesame::before,
    .ln-history-item.is-takenback::before,
    .ln-history-item.is-fieldsunlinked::before {
        background: var(--xm-warning-text);
    }

    .ln-history-item .ln-muted {
        font-size: 11.5px;
    }

.ln-side-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.ln-side-link {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

    .ln-side-link .ln-act {
        margin-left: auto;
    }

.ln-side-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .ln-side-group > .ln-stat {
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--xm-text-muted);
    }

    .ln-side-group + .ln-side-group {
        margin-top: 6px;
    }

.ln-map-use {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.ln-map-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0;
    border: none;
    background: none;
    color: var(--xm-link);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .ln-map-name:hover {
        text-decoration: underline;
    }

.ln-map-use > .ln-muted,
.ln-map-why {
    flex: none;
    font-size: 11.5px;
}

.ln-map-why {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--xm-warning-text);
    cursor: help;
}

.ln-side-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .ln-side-form label {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .ln-side-form .rd-input {
        width: 100%;
    }

.ln-side-rejected {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--xm-border-soft);
}

.ln-act.is-icon {
    width: 26px;
    padding: 0;
    justify-content: center;
}

/* the build card: one row of title, count and bar; the hint on one line under it */
.ln-building {
    padding-top: 12px;
    padding-bottom: 12px;
}

.ln-building-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
}

    .ln-building-row .ln-progress {
        flex: 1 1 200px;
        max-width: none;
    }

.ln-progress-pct {
    min-width: 3.5ch;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--xm-text-muted);
    text-align: right;
}

.ln-building p.ln-building-hint {
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

/* ---------------------------------------------------------------- a view loading: its own shape, shimmering */

.ln-loading {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ln-skel-kpi {
    gap: 8px;
    min-height: 66px;
}

.ln-skel-bar,
.ln-skel-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ln-skel-bar {
    margin-bottom: 6px;
}

.ln-skel-row {
    padding: 10px 0;
    border-top: 1px solid var(--xm-border-soft);
}

    .ln-skel-row .rd-skel:first-child {
        flex: none;
        margin-right: auto;
    }

    .ln-skel-row .rd-skel {
        flex: none;
    }

.ln-skel-step {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 0 4px 14px;
    border-left: 2px solid var(--xm-border-soft);
}

/* the inspectors' Lineage section: the same buttons as the lineage pages */
.xi-lineage {
    gap: 8px;
}

    .xi-lineage .ln-act {
        max-width: 100%;
    }

.xi-lineage-field {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--xm-doc-font);
    color: var(--xm-text);
}

/* a branch already traced higher up in the panel, folded to one line */
.ln-repeat-branch {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 6px 0 2px 22px;
    padding: 6px 10px;
    border: 1px dashed var(--xm-border-soft);
    border-radius: 8px;
    font-size: 12px;
}

.ln-kind {
    cursor: help;
}

/* ================================================================ the trace as a picture */

.ln-trace-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.ln-trace-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

    .ln-trace-controls .ln-live {
        gap: 8px;
    }

.ln-trace-summary {
    margin: 0;
    max-width: 90ch;
    font-size: 14px;
    line-height: 1.5;
    color: var(--xm-text);
}

.ln-summary-sep {
    margin: 0 6px;
    color: var(--xm-text-muted);
}

.ln-summary-ok {
    color: var(--xm-status-ok-text);
}

.ln-summary-changed {
    color: var(--xm-kind-function);
}

.ln-summary-bad {
    color: var(--xm-danger);
    font-weight: 600;
}

.ln-trace-note {
    font-size: 12px;
}

.lg-host {
    position: relative;
    height: clamp(440px, 70vh, 920px);
    border: 1px solid var(--xm-border-soft);
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--xm-page-bg);
    background-image: radial-gradient(circle, color-mix(in srgb, var(--xm-text-muted) 22%, transparent) 1px, transparent 1.2px);
    background-size: 22px 22px;
    cursor: grab;
    user-select: none;
}

    .lg-host.is-panning {
        cursor: grabbing;
    }

.lg-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.lg-tools {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 9px;
    background: var(--xm-surface);
    box-shadow: 0 1px 4px var(--xm-shadow);
}

    .lg-tools .ln-act {
        background: var(--xm-surface);
    }

.lg-zoom-level {
    min-width: 42px;
    text-align: center;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--xm-text-muted);
}

.lg-legend {
    position: absolute;
    left: 12px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    padding: 5px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--xm-surface) 88%, transparent);
    font-size: 11.5px;
    color: var(--xm-text-muted);
}

    .lg-legend > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

.lg-key {
    display: inline-block;
    width: 20px;
    border-top: 2px solid var(--xm-kind-link);
}

    .lg-key.is-transform {
        border-top-color: var(--xm-kind-function);
    }

    .lg-key.is-control {
        border-top: 2px dashed var(--xm-text-muted);
    }

.lg-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

    .lg-dot.is-origin {
        background: var(--xm-status-ok);
    }

    .lg-dot.is-end {
        background: var(--xm-accent);
    }

/* ---------------------------------------------------------------- lines: the maps */

.lg-link {
    cursor: pointer;
    transition: opacity .15s;
}

.lg-link-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 16px;
    pointer-events: stroke;
}

.lg-link-line {
    fill: none;
    stroke: var(--xm-kind-link);
    stroke-linecap: round;
    opacity: .85;
    pointer-events: none;
    transition: stroke .15s, opacity .15s;
}

.lg-link.is-transform .lg-link-line {
    stroke: var(--xm-kind-function);
}

.lg-link.is-control .lg-link-line {
    stroke: var(--xm-text-muted);
    stroke-dasharray: 6 5;
}

.lg-link.is-failing .lg-link-line {
    stroke: var(--xm-danger);
}

.lg-link-label rect {
    fill: var(--xm-surface);
    stroke: var(--xm-border-soft);
}

.lg-link-label text {
    font-size: 11.5px;
    fill: var(--xm-text-muted);
}

.lg-link:hover .lg-link-line,
.lg-link.is-selected .lg-link-line {
    opacity: 1;
}

.lg-link:hover .lg-link-label rect,
.lg-link.is-selected .lg-link-label rect {
    stroke: var(--xm-accent);
}

.lg-link:hover .lg-link-label text,
.lg-link.is-selected .lg-link-label text {
    fill: var(--xm-accent);
}

.lg-link.is-failing .lg-link-label rect {
    stroke: var(--xm-danger);
}

.lg-link.is-failing .lg-link-label text {
    fill: var(--xm-danger);
}

/* ---------------------------------------------------------------- boxes: the fields */

.lg-node {
    cursor: pointer;
    outline: none;
    transition: opacity .15s;
}

.lg-node-box {
    fill: var(--xm-surface);
    stroke: var(--xm-border);
    stroke-width: 1.2px;
    filter: drop-shadow(0 1px 2px var(--xm-shadow));
    transition: stroke .15s, fill .15s;
}

.lg-node:hover .lg-node-box,
.lg-node:focus-visible .lg-node-box {
    stroke: var(--xm-accent);
    stroke-width: 1.8px;
}

.lg-node.is-center {
    cursor: default;
}

    .lg-node.is-center .lg-node-box {
        fill: color-mix(in srgb, var(--xm-accent) 14%, var(--xm-surface));
        stroke: var(--xm-accent);
        stroke-width: 2.2px;
    }

    .lg-node.is-center .lg-node-name {
        fill: var(--xm-accent);
    }

.lg-node-name {
    font-size: 13px;
    font-weight: 600;
    fill: var(--xm-text);
}

.lg-node-schema {
    font-size: 11px;
    fill: var(--xm-text-muted);
}

.lg-node-dot {
    stroke: var(--xm-surface);
    stroke-width: 2px;
}

.lg-node-dot.is-origin {
    fill: var(--xm-status-ok);
}

.lg-node-dot.is-end {
    fill: var(--xm-accent);
}

.lg-node-badge rect {
    fill: var(--xm-surface-hover);
    stroke: var(--xm-border-soft);
}

.lg-node-badge text {
    font-size: 10.5px;
    font-weight: 600;
    fill: var(--xm-text-muted);
}

/* hovering a field: every path through it stays, the rest steps back */
.lg-svg.is-hovering .lg-node:not(.is-lit),
.lg-svg.is-hovering .lg-link:not(.is-lit) {
    opacity: .16;
}

.lg-svg.is-hovering .lg-link.is-lit .lg-link-line {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .lg-node, .lg-link, .lg-link-line, .lg-node-box {
        transition: none;
    }
}

/* ---------------------------------------------------------------- the drawer: the maps behind a line */

.lg-drawer {
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    width: min(380px, calc(100% - 20px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    overflow-y: auto;
    border: 1px solid var(--xm-border-soft);
    border-radius: 12px;
    background: var(--xm-surface);
    box-shadow: 0 8px 28px var(--xm-shadow);
    cursor: default;
    user-select: text;
    font-size: 12.5px;
    animation: lg-drawer-in .18s ease-out;
}

@keyframes lg-drawer-in {
    from {
        opacity: 0;
        transform: translateX(12px);
    }
}

.lg-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.lg-drawer-route {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 6px;
    font-size: 13px;
}

.lg-drawer-arrow {
    color: var(--xm-accent);
}

.lg-drawer-map {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--xm-border-soft);
}

.lg-drawer-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
}

.lg-drawer-how {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--xm-text-muted);
}

    .lg-drawer-how .ln-kind {
        flex: none;
    }

.lg-drawer-chips,
.lg-drawer-actions,
.lg-drawer-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lg-drawer-foot {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--xm-border-soft);
}

.lg-drawer .ln-failure {
    margin-left: 0;
}

/* ---------------------------------------------------------------- motion: glide on buttons, build up from the middle */

.lg-viewport {
    transform-origin: 0 0;
}

    .lg-viewport.is-gliding {
        transition: transform .3s cubic-bezier(.2, .7, .2, 1);
    }

/* A new trace's boxes and lines appear column by column, out from the traced field. Opacity only: the boxes are
   placed by their transform attribute, which an animated transform would override. */
.lg-node,
.lg-link,
.lg-link-more {
    animation: lg-in .38s ease-out backwards;
    animation-delay: calc(var(--d, 0) * 80ms);
}

@keyframes lg-in {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lg-node, .lg-link, .lg-link-more {
        animation: none;
    }

    .lg-viewport.is-gliding {
        transition: none;
    }
}

/* ---------------------------------------------------------------- "+N more": a crowded column, closed */

.lg-node.is-more .lg-node-box {
    fill: color-mix(in srgb, var(--xm-surface) 70%, transparent);
    stroke: var(--xm-text-muted);
    stroke-dasharray: 5 4;
    filter: none;
}

.lg-node.is-more .lg-node-name {
    fill: var(--xm-accent);
}

.lg-node.is-more:hover .lg-node-box,
.lg-node.is-more:focus-visible .lg-node-box {
    stroke: var(--xm-accent);
    stroke-dasharray: none;
}

.lg-link-more {
    fill: none;
    stroke: var(--xm-text-muted);
    stroke-width: 1.4px;
    stroke-dasharray: 3 4;
    opacity: .5;
    pointer-events: none;
}

.lg-svg.is-hovering .lg-link-more {
    opacity: .12;
}

/* ---------------------------------------------------------------- the minimap: shown when the picture does not fit */

.lg-minimap {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 6px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 9px;
    background: color-mix(in srgb, var(--xm-surface) 92%, transparent);
    box-shadow: 0 2px 10px var(--xm-shadow);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, right .2s;
}

    .lg-minimap.is-shown {
        opacity: 1;
        pointer-events: auto;
    }

    .lg-minimap svg {
        display: block;
    }

.lg-host:has(.lg-drawer) .lg-minimap {
    right: 404px;
}

.lg-mini-link {
    fill: none;
    stroke: var(--xm-text-muted);
    stroke-width: 6px;
    opacity: .35;
}

.lg-mini-node {
    fill: var(--xm-border);
}

    .lg-mini-node.is-center {
        fill: var(--xm-accent);
    }

.lg-mini-view {
    fill: color-mix(in srgb, var(--xm-accent) 12%, transparent);
    stroke: var(--xm-accent);
    stroke-width: 1.5px;
    vector-effect: non-scaling-stroke;
}

/* ---------------------------------------------------------------- dragging boxes */

.lg-host.is-dragging-node,
.lg-host.is-dragging-node .lg-node {
    cursor: grabbing;
}

.lg-node.is-dragged .lg-node-box {
    stroke: var(--xm-accent);
    stroke-width: 2px;
    filter: drop-shadow(0 6px 14px var(--xm-shadow));
}

/* While a box is dragged its lines are redrawn at every move: no fade-in replaying, no transitions lagging behind. */
.lg-host.is-dragging-node .lg-link-line,
.lg-host.is-dragging-node .lg-node-box {
    transition: none;
}

/* Reset layout: only once something was moved */
.lg-tools .lg-reset {
    display: none;
}

.lg-host.has-moved .lg-tools .lg-reset {
    display: inline-flex;
}

/* ================================================================ one schema: connections and the usage tree */

/* how much of a branch the maps use: one scale for the tree's bars and the map's blocks */
.h0 { --heat: color-mix(in srgb, var(--xm-text-muted) 14%, var(--xm-surface)); }
.h1 { --heat: color-mix(in srgb, var(--xm-accent) 22%, var(--xm-surface)); }
.h2 { --heat: color-mix(in srgb, var(--xm-accent) 38%, var(--xm-surface)); }
.h3 { --heat: color-mix(in srgb, var(--xm-accent) 55%, var(--xm-surface)); }
.h4 { --heat: color-mix(in srgb, var(--xm-accent) 72%, var(--xm-surface)); }
.h5 { --heat: color-mix(in srgb, var(--xm-accent) 90%, var(--xm-surface)); }

/* ---------------------------------------------------------------- connections: the schema hub */

.ln-connections {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ln-connections-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 14px;
}

    .ln-connections-head h2 {
        margin: 0;
        font-size: 16px;
    }

    .ln-connections-head p {
        margin: 0;
        font-size: 12.5px;
        color: var(--xm-text-muted);
    }

.lg-host.is-compact {
    height: clamp(280px, 38vh, 440px);
}

.lg-node.is-schema .lg-node-name {
    font-size: 13.5px;
}

/* ---------------------------------------------------------------- the fields bar: Tree | List */

.ln-fields-view {
    flex: none;
}

/* ---------------------------------------------------------------- the usage tree */

.lt-tree {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--xm-border-soft);
}

.lt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 3px 8px 3px calc(8px + var(--depth, 0) * 18px);
    border-bottom: 1px solid var(--xm-border-soft);
    font-size: 13px;
}

    .lt-row:hover {
        background: var(--xm-surface-hover);
    }

    .lt-row.is-unused .lt-name {
        color: var(--xm-text-muted);
        font-weight: 400;
    }

.lt-toggle,
.lt-toggle-space {
    flex: none;
    width: 22px;
    height: 22px;
}

.lt-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: none;
    color: var(--xm-text-muted);
    cursor: pointer;
}

    .lt-toggle:hover:not(:disabled) {
        background: var(--xm-surface-hover);
        color: var(--xm-text);
    }

    .lt-toggle:disabled {
        cursor: default;
    }

    .lt-toggle svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: transform .15s;
    }

    .lt-toggle.is-open svg {
        transform: rotate(90deg);
    }

.lt-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--xm-text);
}

    .lt-name.is-attr {
        font-family: var(--xm-doc-font);
        font-weight: 500;
    }

.lt-heat {
    flex: none;
    width: 110px;
    height: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--xm-text-muted) 14%, transparent);
    overflow: hidden;
}

    .lt-heat > span {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: var(--xm-accent);
    }

    .lt-heat.h0 > span {
        width: 0 !important;
    }

.lt-count {
    flex: none;
    min-width: 88px;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--xm-text-muted);
}

.lt-spacer {
    flex: 1;
}

.lt-use {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--xm-text-muted);
}

.lt-row .ln-act.is-icon {
    width: 26px;
    opacity: .55;
}

.lt-row:hover .ln-act.is-icon,
.lt-row .ln-act.is-icon:focus-visible {
    opacity: 1;
}

.lt-more {
    min-height: 30px;
    font-size: 12px;
}

@media (max-width: 720px) {
    .lt-heat {
        width: 60px;
    }

    .lt-count {
        min-width: 0;
    }
}


/* ================================================================ one schema: map colours, preview, findings */

/* Map colours: eight categorical hues in a fixed order, a light and a dark step of each (both validated against this
   app's surfaces for colour-blind separation). A ninth map and on are grey "other": hues are never cycled. */
:root {
    --mc-0: #2a78d6;
    --mc-1: #eb6834;
    --mc-2: #1baf7a;
    --mc-3: #eda100;
    --mc-4: #e87ba4;
    --mc-5: #008300;
    --mc-6: #4a3aa7;
    --mc-7: #e34948;
    --mc-other: #8a8f98;
}

[data-theme="dark"] {
    --mc-0: #3987e5;
    --mc-1: #d95926;
    --mc-2: #199e70;
    --mc-3: #c98500;
    --mc-4: #d55181;
    --mc-5: #008300;
    --mc-6: #9085e9;
    --mc-7: #e66767;
    --mc-other: #6b7280;
}

/* a map's dot: filled where it reads, a ring where it writes; a thin outline keeps the lighter hues visible */
.mc-dot {
    display: inline-block;
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mc);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--xm-text) 25%, transparent);
    vertical-align: middle;
}

    .mc-dot.is-write {
        background: transparent;
        box-shadow: inset 0 0 0 2.5px var(--mc), 0 0 0 1px color-mix(in srgb, var(--xm-text) 18%, transparent);
    }

    .mc-dot.is-focus {
        box-shadow: 0 0 0 2px var(--xm-surface), 0 0 0 3.5px var(--mc);
    }

.mc-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    vertical-align: middle;
}

.mc-more {
    font-size: 11px;
    color: var(--xm-text-muted);
}

/* Maps card: the dot highlights that map's fields */
.ln-map-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px;
    height: 20px;
    margin-right: 2px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    cursor: pointer;
}

    .ln-map-dot:hover,
    .ln-map-dot.is-on {
        border-color: var(--mc);
        background: color-mix(in srgb, var(--mc) 14%, transparent);
    }

.ln-map-use {
    align-items: center;
}

    .ln-map-use.is-focus .ln-map-name {
        font-weight: 600;
    }

.ln-focus-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ---------------------------------------------------------------- a field's trace, previewed in its row */

.lt-preview {
    padding: 8px 12px 12px calc(40px + var(--depth, 0) * 18px);
    border-bottom: 1px solid var(--xm-border-soft);
    background: color-mix(in srgb, var(--xm-page-bg) 60%, var(--xm-surface));
}

.lt-preview-row td {
    background: color-mix(in srgb, var(--xm-page-bg) 60%, var(--xm-surface));
}

.lp {
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: lg-drawer-in .18s ease-out;
}

.lp-frame {
    max-height: 320px;
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 10px;
    background-color: var(--xm-page-bg);
    background-image: radial-gradient(circle, color-mix(in srgb, var(--xm-text-muted) 22%, transparent) 1px, transparent 1.2px);
    background-size: 18px 18px;
}

.lp-svg {
    display: block;
}

.lp-link {
    fill: none;
    stroke: var(--xm-kind-link);
    stroke-width: 2px;
    opacity: .85;
}

    .lp-link.is-transform {
        stroke: var(--xm-kind-function);
    }

    .lp-link.is-control,
    .lp-link.is-more {
        stroke: var(--xm-text-muted);
        stroke-dasharray: 6 5;
    }

.lp-node {
    cursor: pointer;
}

    .lp-node rect {
        fill: var(--xm-surface);
        stroke: var(--xm-border);
        stroke-width: 1.2px;
    }

    .lp-node:hover rect {
        stroke: var(--xm-accent);
    }

    .lp-node.is-center {
        cursor: default;
    }

        .lp-node.is-center rect {
            fill: color-mix(in srgb, var(--xm-accent) 14%, var(--xm-surface));
            stroke: var(--xm-accent);
            stroke-width: 2px;
        }

    .lp-node.is-more rect {
        stroke-dasharray: 5 4;
    }

.lp-name {
    font-size: 13px;
    font-weight: 600;
    fill: var(--xm-text);
}

.lp-schema {
    font-size: 11px;
    fill: var(--xm-text-muted);
}

.lp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
}

.ln-act.is-on {
    border-color: var(--xm-accent);
    color: var(--xm-accent);
    background: color-mix(in srgb, var(--xm-accent) 12%, transparent);
}

/* ---------------------------------------------------------------- findings */

.ln-findings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.ln-finding {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--xm-border-soft);
    border-left: 3px solid var(--xm-accent);
    border-radius: 10px;
    background: var(--xm-surface);
    color: var(--xm-text);
    font: inherit;
    text-align: left;
}

button.ln-finding {
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s;
}

    button.ln-finding:hover,
    button.ln-finding:focus-visible {
        border-color: var(--xm-accent);
        box-shadow: 0 1px 8px var(--xm-shadow);
    }

.ln-finding.is-warn {
    border-left-color: var(--xm-warning-text);
}

.ln-finding.is-ok {
    border-left-color: var(--xm-status-ok);
}

.ln-finding-head {
    font-size: 13.5px;
    font-weight: 600;
}

.ln-finding-detail {
    font-size: 12px;
    line-height: 1.45;
    color: var(--xm-text-muted);
}

.ln-finding-action {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--xm-accent);
}

/* ================================================================ a field's trace, explained by XPilot */

/* XPilot's button, as the node inspector's "Ask XPilot" (TrgComponent .xi-xpilot): its logo and the action on a soft
   brand gradient, so it reads as XPilot wherever it appears. */
.ln-xpilot {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px 0 4px;
    border: 1px solid color-mix(in srgb, var(--xm-accent) 35%, var(--xm-border-soft));
    border-radius: 999px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--xm-accent) 14%, var(--xm-surface)) 0%,
        color-mix(in srgb, var(--xm-highlight) 22%, var(--xm-surface)) 100%);
    color: var(--xm-text);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 2px var(--xm-shadow);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .ln-xpilot:hover:not(:disabled) {
        transform: translateY(-1px);
        border-color: var(--xm-accent);
        box-shadow: 0 4px 12px color-mix(in srgb, var(--xm-accent) 25%, transparent);
    }

    .ln-xpilot:active {
        transform: none;
    }

    .ln-xpilot:focus-visible {
        outline: 2px solid var(--xm-accent);
        outline-offset: 2px;
    }

    .ln-xpilot.is-on {
        border-color: var(--xm-accent);
    }

    .ln-xpilot:disabled {
        cursor: default;
    }

.ln-xpilot-logo {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
}

    .ln-xpilot-logo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

@media (prefers-reduced-motion: reduce) {
    .ln-xpilot {
        transition: none;
    }

        .ln-xpilot:hover:not(:disabled) {
            transform: none;
        }
}

.ln-explain {
    margin: 8px 0 10px;
    padding: 10px 16px;
    border: 1px solid color-mix(in srgb, var(--xm-accent) 35%, var(--xm-border-soft));
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--xm-accent) 7%, var(--xm-surface)), var(--xm-surface) 60%);
    animation: lg-drawer-in .2s ease-out;
}

.ln-explain-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.ln-explain-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--xm-accent);
}

    .ln-explain-title .ln-xpilot-logo {
        width: 20px;
        height: 20px;
    }

.ln-explain-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* The whole width of the panel: the story is a few lines, not a column to read down. */
.ln-explain-text {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--xm-text);
}

    .ln-explain-text code,
    .ln-explain-warn code {
        padding: 0 4px;
        border-radius: 4px;
        background: color-mix(in srgb, var(--xm-text-muted) 14%, transparent);
        font-size: 12.5px;
    }

.ln-explain-warn {
    margin: 4px 0 6px;
    padding: 6px 10px;
    border-left: 3px solid var(--xm-warning-text);
    border-radius: 6px;
    background: var(--xm-warning-bg);
    font-size: 13px;
    line-height: 1.55;
    color: var(--xm-text);
}

.ln-explain-error {
    margin: 0;
    font-size: 13px;
    color: var(--xm-error-text);
}

.ln-explain-foot {
    margin: 4px 0 0;
    font-size: 11.5px;
    color: var(--xm-text-muted);
}

.ln-explain-tokens {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ln-explain-skel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0 6px;
}

@media (prefers-reduced-motion: reduce) {
    .ln-explain {
        animation: none;
    }
}

/* ================================================================ the question box: XPilot, under the page's title */

.ln-ask {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.ln-ask-box {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 880px;
    padding: 4px 4px 4px 6px;
    border: 1px solid color-mix(in srgb, var(--xm-accent) 35%, var(--xm-border-soft));
    border-radius: 999px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--xm-accent) 8%, var(--xm-surface)) 0%,
        color-mix(in srgb, var(--xm-highlight) 12%, var(--xm-surface)) 100%);
    box-shadow: 0 1px 2px var(--xm-shadow);
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .ln-ask-box:focus-within {
        border-color: var(--xm-accent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--xm-accent) 18%, transparent);
    }

.ln-ask-input {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 4px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--xm-text);
    font: inherit;
    font-size: 14px;
}

    .ln-ask-input::placeholder {
        color: var(--xm-text-muted);
    }

.ln-ask-go {
    flex: none;
    padding: 0 16px;
}

    .ln-ask-go .xm-spin {
        margin-right: 2px;
    }

.ln-ask-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    max-width: 880px;
    padding: 8px 8px 8px 14px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 12px;
    background: var(--xm-surface);
    font-size: 13px;
    animation: lg-drawer-in .18s ease-out;
}

    .ln-ask-result.is-error {
        border-color: color-mix(in srgb, var(--xm-error-text) 40%, var(--xm-border-soft));
    }

        .ln-ask-result.is-error .ln-ask-note {
            color: var(--xm-error-text);
        }

    .ln-ask-result > .ln-act {
        margin-left: auto;
    }

.ln-ask-note {
    color: var(--xm-text);
}

.ln-ask-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ln-ask-choice,
.ln-ask-example {
    padding: 4px 10px;
    border: 1px solid var(--xm-border-soft);
    border-radius: 999px;
    background: var(--xm-page-bg);
    color: var(--xm-text);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

    .ln-ask-choice:hover,
    .ln-ask-example:hover,
    .ln-ask-choice:focus-visible,
    .ln-ask-example:focus-visible {
        border-color: var(--xm-accent);
    }

.ln-ask-example {
    color: var(--xm-text-muted);
    font-style: italic;
}

.ln-explain-asked q {
    color: var(--xm-text);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .ln-ask-result {
        animation: none;
    }
}