/* A page locked behind a plan (partials.locked-preview, .lp) and the grey placeholders (.sk) drawn in place of numbers and names. */

/* A page whose feature needs a plan (partials.locked-preview): a slim bar with the lock, then the page itself with placeholders, faded out towards the bottom and not usable. */
.fi-panel-app .lp {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.fi-panel-app .lp-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: var(--ambex-tint);
    border: 1px solid color-mix(in oklab, var(--ambex-blue) 25%, white);
}

.fi-panel-app .lp-icon {
    flex: none;
    box-sizing: content-box;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0.5rem;
    border-radius: 999px;
    background: #fff;
    color: var(--ambex-blue);
}

.fi-panel-app .lp-text {
    flex: 1 1 14rem;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--ambex-navy);
}

.fi-panel-app .lp-page {
    user-select: none;
    filter: grayscale(0.5);
    opacity: 0.65;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

/* A grey placeholder in place of a number or a name. */
.fi-panel-app .sk {
    display: inline-block;
    width: var(--sk-w, 4rem);
    height: var(--sk-h, 0.75rem);
    max-width: 100%;
    border-radius: 999px;
    background: color-mix(in oklab, var(--ambex-navy) 12%, white);
    vertical-align: middle;
}

.dark .fi-panel-app .lp-bar {
    background: rgba(90, 165, 255, 0.08);
    border-color: rgba(90, 165, 255, 0.3);
}

.dark .fi-panel-app .lp-icon {
    background: rgba(90, 165, 255, 0.14);
    color: var(--ambex-sky);
}

.dark .fi-panel-app .lp-text {
    color: #ffffff;
}

.dark .fi-panel-app .sk {
    background: rgba(255, 255, 255, 0.14);
}