.page-discovery > .discovery-editor .query-datasets {
    margin-top: -8px;
    margin-bottom: 11px;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    display: none;
}
.page-discovery > .discovery-editor .query-datasets .dataset {
    position: relative;
    display: inline-block;
    padding: 2px 8px 2px 32px;
    border: 1px solid #2e4155;
    border-radius: 6px;
    background-color: #0a66b92e;
    font-family: var(--discovery-monospace-font-family);
    line-height: 1.3;
    box-shadow: 1px 1px 1px #0006;
}
.page-discovery > .discovery-editor .query-datasets .dataset::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 100%;
    mask-image: url('./img/dataset.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 20px;
    background-color: color-mix(in srgb, #769ec8, var(--discovery-color));
    opacity: .7;
}
.page-discovery > .discovery-editor .query-datasets .dataset__type {
    display: block;
    font-size: 9px;
    color: color-mix(in srgb, #769ec8 65%, #23303f)
}
.page-discovery > .discovery-editor .query-datasets .dataset__name {
    display: block;
    font-size: 12px;
    color: color-mix(in srgb, #769ec8, var(--discovery-color));
}
.page-discovery > .discovery-editor .query-datasets:empty::before {
    content: 'No datasets';
    color: #888;
}

.page-discovery > .discovery-editor .query-graph {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 30px;
    margin: 1px calc(-1 * var(--discovery-page-padding-right)) 1px calc(-1 * var(--discovery-page-padding-left));
    padding: 1px var(--discovery-page-padding-right) 12px calc(1px + var(--discovery-page-padding-left));
    overflow-x: auto;
}
.page-discovery > .discovery-editor .query-graph .query-graph-layer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.page-discovery > .discovery-editor .query-graph .query-graph-layer > .view-button {
    order: 1;
    margin: 0 -1px;
    padding: 3px 12px 3px 12px;
    font-family: var(--discovery-monospace-font-family);
    font-size: 10px;
    line-height: 1;
    text-align: center;
}
.page-discovery > .discovery-editor .query-graph .query-graph-node {
    --color: #8888;
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    margin-top: calc(var(--pad, 0) * 22px);
}
.page-discovery > .discovery-editor .query-graph .query-graph-node.target {
    pointer-events: none;
}
.page-discovery > .discovery-editor .query-graph .query-graph-node > .query-graph-node__dot {
    position: relative;
    display: block;
    width: 10px;
    height: 10px;
    padding: 3px;
    background-color: var(--color);
    background-clip: content-box;
    border-radius: 50%;
    transition: .2s ease-in-out;
    transition-property: box-shadow, background-color;
    outline: .75px solid var(--discovery-background-color);
    outline-offset: -3px;
}
.page-discovery > .discovery-editor .query-graph .query-graph-node > .query-graph-node__label {
    position: relative;
    z-index: -1;
    padding: 0px 6px;
    --overlap-dot: 20px;
    padding-left: calc(-1px + var(--overlap-dot));
    margin-left: calc(-1 * var(--overlap-dot));
    max-width: 180px;
    min-width: 40px;
    border-radius: 9px;
    border: 1px solid transparent;
    outline: .5px solid color-mix(in srgb, var(--color), transparent 35%);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    font-family: var(--discovery-monospace-font-family);
    font-size: 10px;
    color: color-mix(in srgb, var(--discovery-color), var(--color) 30%);
    background-color: color-mix(in srgb, var(--discovery-background-color), var(--color) 30%);
}
.page-discovery > .discovery-editor .query-graph .query-graph-node:is(:hover, .target) > .query-graph-node__label {
    outline-color: var(--color);
    outline-width: 1px;
}
.page-discovery > .discovery-editor .query-graph .query-graph-node > .query-graph-node__label:is(:empty, :not(.has-label)) {
    color: color-mix(in srgb, #888 65%, var(--color));
}
.page-discovery > .discovery-editor .query-graph .query-graph-node > .query-graph-node__label:empty::before {
    content: "<empty query>";
}
.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="computing"] {
    --color: light-dark(#b1ac1a, #f6f61cb5);
}
.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="computing"],
.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="computing"] > .query-graph-node__dot,
.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="computing"] > .query-graph-node__label {
    /* transition-delay: 50ms; */
    transition-property: background-color, outline-color, border-color, box-shadow, color;
}
.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="computing"] > .query-graph-node__dot::before {
    content: '';
    position: absolute;
    display: block;
    aspect-ratio: 1/1;
    /* box-sizing: border-box; */
    width: 12px;
    margin: -3px 0 0 -3px;
    border: 2px solid var(--color);
    /* box-shadow: 0 0 0 1px var(--discovery-background-color), 0 0 0 3px var(--color); */
    border-radius: 50%;
    clip-path: inset(0px 0px 50% 50%);
    animation: discovery-graph-computing .65s forwards infinite linear, discovery-graph-computing-appear .1s 1 forwards linear;
}
@keyframes discovery-graph-computing {
    to { rotate: 360deg }
}
@keyframes discovery-graph-computing-appear {
    from { opacity: 0 }
    99% { opacity: 0 }
    to { opacity: 1 }
}
@keyframes discovery-graph-await-computing {
    to { background-color: transparent }
}
.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="successful"] {
    --color: #4da32fcf;
}
.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="successful"],
.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="successful"] > .query-graph-node__dot,
.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="successful"] > .query-graph-node__label {
    transition: none;
}
.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="failed"] {
    --color: #d84343;
}
.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="canceled"] > .query-graph-node__dot {
    --color: #d84343;
    --color-dash: color-mix(in srgb, var(--discovery-background-color), #888 15%);
    --dash-start: 7px;
    --dash-end: 9px;
    outline: none;
    background-color: color-mix(in srgb, var(--color), #8888);
    background-image: linear-gradient(to right,
        transparent var(--dash-start),
        var(--color-dash) var(--dash-start),
        var(--color-dash) var(--dash-end),
        transparent var(--dash-end)
    );
    rotate: 45deg;
}
.page-discovery > .discovery-editor .query-graph .query-graph-node.target > .query-graph-node__dot {
    cursor: default;
}
.page-discovery > .discovery-editor .query-graph .query-graph-node.target:not([data-state="computing"]) > .query-graph-node__dot {
    box-shadow: 0 0 0 2px var(--color) inset, 0 0 0 3px var(--discovery-background-color) inset;
}
.page-discovery > .discovery-editor .query-graph .query-graph-node:not(.target):hover > .query-graph-node__dot {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color), var(--discovery-color) 35%) inset, 0 0 0 3px var(--discovery-background-color) inset;
    opacity: 1;
    transition: none;
}
.page-discovery > .discovery-editor .query-graph .query-graph-node[data-state="awaiting"] > .query-graph-node__dot {
    background-color: light-dark(#b1ac1a, #f6f61cb5);
}

.page-discovery > .discovery-editor .query-graph > svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}
.page-discovery > .discovery-editor .query-graph > svg :is(line, path) {
    stroke: light-dark(#bbb, #666);
}
.page-discovery > .discovery-editor .query-graph > svg :is(line, path).current {
    stroke-width: 1.25;
    stroke: light-dark(#666, #bbb);
}

.query-graph-actions {
    display: flex;
    gap: 1px;
}
.query-graph-actions .view-button {
    padding: 0;
    width: 23.5px;
    margin: 0 !important;
    border: none;
    border-radius: 0px;
    background-color: #c0c0c02d;
    background-repeat: no-repeat;
    background-position: center;
}
.query-graph-actions .view-button:hover {
    background-color: #a5a5a54d;
}
.query-graph-actions .view-button.clone {
    background-image: url('./img/clone.svg');
    background-size: 17.5px 17.5px;
}
.query-graph-actions.root .view-button.clone {
    background-image: url('./img/clone-root.svg');
}
.query-graph-actions .view-button.stash {
    background-image: url('./img/stash.svg');
    background-size: 17.5px 17.5px;
}
.query-graph-actions.root .view-button.stash {
    background-image: url('./img/stash-root.svg');
}
.query-graph-actions .view-button.subquery {
    background-image: url('./img/subquery.svg');
    background-size: 18.5px 18.5px;
}
.query-graph-actions .view-button.delete {
    background-image: url('./img/delete.svg');
    background-size: 12.5px 12.5px;
}
.discovery-buildin-view-tooltip.hint-tooltip {
    font-size: 12px;
    padding: 1px 6px;
}
.discovery-buildin-view-tooltip.hint-tooltip > .view-markdown {
    padding: 2px 4px;
}

.query-graph-tooltip {
    /* padding: 0 !important; */
    margin: 4px;
}
.query-graph-tooltip .view-source {
    margin: -5px -10px;
    background: none;
}
.query-graph-tooltip > .view-badge {
    vertical-align: top;
    padding: 4px 8px !important;
    margin: 0 -5px !important;
    font-size: 12px;
}

.page-discovery > .discovery-editor .query-path {
    opacity: .35;
}
.page-discovery > .discovery-editor .query-path .query {
    background: #eee;
    border: solid #888;
    border-width: 1px 1px 0 1px;
    padding: 2px 8px;
    padding-bottom: 6px;
    margin-bottom: -4px;
    border-radius: 4px 4px 0 0;
    font-family: var(--discovery-monospace-font-family);
    font-size: 10px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.discovery-root-darkmode .page-discovery > .discovery-editor .query-path .query {
    background: #333;
}
.page-discovery > .discovery-editor .query-path .query:last-child {
    padding-bottom: 7px;
}
.page-discovery > .discovery-editor .query-path .query:empty::before {
    content: '<empty query>';
}
.page-discovery > .discovery-editor .query-path .query:hover {
    background: #ccc;
}
.discovery-root-darkmode .page-discovery > .discovery-editor .query-path .query:hover {
    background: #444;
}
.page-discovery > .discovery-editor .query-editor {
    position: relative;
}

.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__input-panel {
    display: grid;
    grid-template-areas:
        'actions input engine'
        'details details details';
    grid-template-columns: auto 1fr auto;
    margin: 1px 0;
    padding: 0 1px;
    background-color: var(--discovery-background-color);
    border-radius: 1px 1px 0 0;
    gap: 0 1px;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__input-panel.details-expanded {
    gap: 1px;
    border-bottom: 1px solid var(--editor-border-color, #888);
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-engine {
    grid-area: engine;
    background-color: rgba(192, 192, 192, .175);
    padding: 1px 8px 3px;
    font-size: 12px;
    color: var(--discovery-color);
    text-decoration: none;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-engine:hover {
    background-color: rgba(165,165,165,.3);
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-engine::before {
    content: 'Syntax: ';
    color: #888;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input {
    grid-area: input;
    display: flex;
    gap: 1px;
    font-size: 12px;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-data,
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-context {
    flex: 1;
    padding: 1px 8px 3px;
    background-color: rgba(192, 192, 192, .175);
    cursor: pointer;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-data:hover,
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-context:hover {
    background-color: rgba(165,165,165,.3) !important;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input[data-details="data"] .query-input-data,
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input[data-details="context"] .query-input-context {
    /* padding-top: 2px; */
    margin-bottom: -1px;
    background-color: #cdcdcd1a;
    background-clip: padding-box;
    border-bottom: 1px solid #cdcdcd1a;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-variable {
    position: relative;
    padding-right: 14px;
    color: var(--discovery-fmt-variable-color);
    font-family: var(--discovery-monospace-font-family);
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .num-delim-wrapper .num-delim {
    padding-left: 1.25px;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-variable::before {
    content: '';
    background: url(./img/expand.svg) no-repeat center;
    background-size: 12px;
    transition: transform .15s ease-in;
    height: 100%;
    aspect-ratio: 1/1;
    position: absolute;
    right: 0;
    top: 0;
    transform: rotate(-90deg);
    margin-right: 2px;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input[data-details="data"] .query-input-data .query-input-variable::before,
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input[data-details="context"] .query-input-context .query-input-variable::before {
    transform: rotate(0deg);
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-variable::after {
    content: ' (' attr(data-name) ') ';
    color: #888;
    font-family: var(--discovery-font-family);
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-details {
    display: none;
    grid-area: details;
    max-height: max(30vh, 150px);
    overflow: auto;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .discovery-view-editor__input-panel.details-expanded .query-input-details {
    display: block;
    margin-bottom: 1px;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-details > .view-struct {
    margin: 0;
}

.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel {
    display: grid;
    grid-template-areas:
        'result buttons';
    grid-template-columns: 1fr auto;
    gap: 1px;
    margin: 1px;
    overflow: hidden;
    border-radius: 0 0 1px 1px;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel.details-expanded {
    grid-template-areas:
        'result buttons'
        'details details';
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons {
    grid-area: buttons;
    display: flex;
    gap: 1px;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-button {
    font-size: 12px;
    padding: 3px 16px 4px;
    border-radius: 0px;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox {
    padding: 2px 6px;
    align-content: center;
    background-color: rgba(192, 192, 192, .175);
    font-size: 12px;
    cursor: pointer;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox input {
    display: none;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox .view-checkbox__label {
    margin: 0;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox .view-checkbox__label {
    content: '';
    display: block;
    width: 16px;
    aspect-ratio: 1;
    overflow: hidden;
    color: transparent;
    background-color: light-dark(#c8c8c8, #6b6b6b);
    mask: no-repeat center;
    mask-size: 16px;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox.suggestions .view-checkbox__label {
    mask-image: url(./img/suggestions.svg);
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox.live-update .view-checkbox__label {
    mask-image: url(./img/perform.svg);
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox :checked + .view-checkbox__label {
    background-color: light-dark(rgba(0, 141, 255, 0.75), #b8b8b8);
}

.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel > .buttons .view-checkbox:hover {
    background-color: rgba(165, 165, 165, .3);
}

.page-discovery > .discovery-editor .data-query-result .query-result-data {
    display: flex;
    flex: 1;
    padding: 2px 8px;
    background-color: rgba(192, 192, 192, .175);
    font-size: 12px;
    cursor: pointer;
}
.page-discovery > .discovery-editor .data-query-result .query-result-data:hover {
    background-color: rgba(165, 165, 165, .3);
}
.page-discovery > .discovery-editor .data-query-result .query-result-data > .query-output-message {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-discovery > .discovery-editor .data-query-result .query-result-data > .query-output-prelude {
    color: #888;
    position: relative;
    display: inline-block;
    padding-right: 20px;
}
.page-discovery > .discovery-editor .data-query-result .query-result-data > .query-output-prelude::before {
    content: '';
    background: url(./img/expand.svg) no-repeat center;
    background-size: 12px;
    transition: transform .15s ease-in;
    height: 100%;
    aspect-ratio: 1/1;
    position: absolute;
    right: 0;
    top: 0;
    transform: rotate(-90deg);
    margin-right: 2px;
}
.page-discovery > .discovery-editor .data-query-result .query-result-data.error {
    background-color: #ff2d2836;
}
.page-discovery > .discovery-editor .discovery-view-editor__output-panel.details-expanded .data-query-result .query-result-data > .query-output-prelude::before {
    transform: rotate(0deg);
}

.page-discovery > .discovery-editor .data-query-result {
    grid-area: result;
    overflow: hidden;
}
.page-discovery > .discovery-editor .data-query-result > * {
    overflow: hidden;
}

.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel .data-query-result-details {
    grid-area: details;
    max-height: max(50vh, 200px);
    overflow: auto;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel:not(.details-expanded) .data-query-result-details {
    display: none;
}
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel .data-query-result-details > .view-struct {
    margin: 0;
}

.page-discovery > .discovery-editor .query-editor > .discovery-view-editor .query-input-details > .state-message,
.page-discovery > .discovery-editor .query-editor > .discovery-view-editor > .discovery-view-editor__output-panel .data-query-result-details .state-message {
    padding: 4px 8px;
    color: #888;
    background-color: rgba(205, 205, 205, 0.1);
    font-size: 12px;
}
