/* install: Install-app rail item and the iOS Add-to-Home-Screen hint sheet (P7). Tokens only. */

.install {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    min-width: 0;
}

.install[hidden] {
    display: none;
}

/* The install item sits on its own line in the rail foot, above the theme and sign-out buttons. */
.install__action {
    flex: 1 1 auto;
    min-height: var(--tap);
    min-width: var(--tap);
    white-space: nowrap;
}

.install__dismiss {
    width: var(--tap);
    height: var(--tap);
    flex: none;
}

.install-sheet {
    box-sizing: border-box;
    width: min(calc(100vw - 2 * var(--s-4)), 26rem);
    max-width: 26rem;
    margin: auto;
    padding: 0;
    color: var(--paper-hi);
    background-color: var(--ink-2);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-2);
}

.install-sheet::backdrop {
    background-color: color-mix(in srgb, var(--ink-0) 72%, transparent);
}

.install-sheet__body {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding: var(--s-5);
}

.install-sheet__title {
    margin: 0;
    font: 400 var(--t-lg) / var(--lh-lg) var(--font-ui);
    color: var(--paper-hi);
}

.install-sheet__steps {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin: 0;
    padding-left: var(--s-5);
    font: 400 var(--t-sm) / var(--lh-sm) var(--font-ui);
    color: var(--paper);
}

.install-sheet__share {
    font-family: var(--font-mono);
    color: var(--accent);
}

.install-sheet__close {
    align-self: flex-end;
    min-height: var(--tap);
}

@media (prefers-reduced-motion: no-preference) {
    .install-sheet[open] {
        animation: install-sheet-in var(--d-med) var(--ease-out);
    }
}

@keyframes install-sheet-in {
    from {
        opacity: 0;
        transform: translateY(var(--s-2));
    }
}