/* Go to…: the finder dialog built by js/goto.js. Without JS the search form in GoToButton is used instead. */

.goto-scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-dialog);
    background-color: var(--ink-0);
    opacity: 0.6;
}

.goto[role="dialog"] {
    position: fixed;
    top: 15vh;
    left: 50%;
    z-index: var(--z-dialog);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(var(--col-max), calc(100vw - var(--s-4) * 2));
    max-height: 70vh;
    transform: translateX(-50%);
    background-color: var(--ink-2);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-2);
    box-shadow: var(--e-overlay);
}

.goto[role="dialog"] .goto__head {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2);
    border-bottom: 1px solid var(--rule);
}

/* js/goto.js draws its icons as <svg class="ico">; without a size they fill the row. */
.goto .ico {
    flex: none;
    width: var(--icon);
    height: var(--icon);
}

.goto[role="dialog"] .goto__head > .ico {
    position: absolute;
    left: var(--s-4);
    color: var(--paper-lo);
    pointer-events: none;
}

.goto[role="dialog"] .goto__head .input {
    padding-left: calc(var(--s-6) + var(--s-2));
    background-color: var(--ink-1);
}

.goto[role="dialog"] .goto__busy {
    position: absolute;
    right: var(--s-4);
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-mono);
    color: var(--paper-lo);
    white-space: nowrap;
}

.goto[role="dialog"] .goto__close {
    display: none;
}

.goto[role="dialog"] .goto__results {
    flex: 1;
    min-height: 0;
    padding: var(--s-1) 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-strong) transparent;
}

.goto[role="dialog"] .goto__group {
    padding: var(--s-3) var(--s-4) var(--s-1);
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--paper-lo);
}

.goto[role="dialog"] .goto__row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: 100%;
    min-height: calc(var(--s-6) + var(--s-1));
    padding: 0 var(--s-4);
    border-left: var(--focus-w) solid transparent;
    font: 400 var(--t-sm) / var(--lh-sm) var(--font-mono);
    color: var(--paper);
    cursor: pointer;
}

.goto[role="dialog"] .goto__row .ico,
.goto[role="dialog"] .goto__glyph {
    flex: none;
    width: var(--icon);
    color: var(--paper-lo);
    text-align: center;
}

.goto[role="dialog"] .goto__row.is-selected {
    background-color: var(--ink-3);
    border-left-color: var(--accent);
    color: var(--paper-hi);
}

.goto[role="dialog"] .goto__row mark {
    background-color: var(--accent-wash);
    color: var(--paper-hi);
}

.goto[role="dialog"] .goto__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.goto[role="dialog"] .goto__meta {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: auto;
    padding-left: var(--s-3);
    font-size: var(--t-xs);
    color: var(--paper-lo);
    white-space: nowrap;
}

/* The selected row sits on ink-3, where paper-lo drops below 4.5:1. */
.goto[role="dialog"] .goto__row.is-selected .goto__meta {
    color: var(--paper);
}

.goto[role="dialog"] .goto__none {
    padding: var(--s-4);
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-mono);
    color: var(--paper-lo);
}

.goto[role="dialog"] .goto__foot {
    flex: none;
    padding: var(--s-2) var(--s-4);
    border-top: 1px solid var(--rule);
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-mono);
    color: var(--paper-lo);
}

@media (max-width: 599.98px) {
    .goto[role="dialog"] {
        inset: 0;
        width: auto;
        max-height: none;
        transform: none;
        border: 0;
        border-radius: 0;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .goto[role="dialog"] .goto__close {
        display: inline-flex;
    }

    .goto[role="dialog"] .goto__busy {
        right: calc(var(--tap) + var(--s-2) + var(--s-3));
    }

    /* Name on the first line, path and position under it, so a long path never pushes the name off. */
    .goto[role="dialog"] .goto__row {
        flex-wrap: wrap;
        align-content: center;
        gap: 0 var(--s-3);
        min-height: var(--tap);
        padding-block: var(--s-2);
    }

    .goto[role="dialog"] .goto__name {
        flex: 1 1 0;
    }

    .goto[role="dialog"] .goto__meta {
        flex: 1 0 100%;
        max-width: none;
        padding-left: calc(var(--icon) + var(--s-3));
        margin-left: 0;
        text-align: left;
    }

    .goto[role="dialog"] .goto__foot {
        display: none;
    }
}

/* Touch: no keyboard, so the T hint goes and the controls reach the minimum target. */
@media (max-width: 899.98px), (pointer: coarse) {
    .goto__submit .kbd {
        display: none;
    }

    .goto__input,
    .goto[role="dialog"] .goto__head .input {
        min-height: var(--tap);
    }

    .goto[role="dialog"] .goto__row {
        min-height: var(--tap);
    }
}