/* ---------- "Add to home screen" card ----------
   Two copies of the same component: a dismissible one at the top of Home,
   and a permanent one on Profile that is the way back after "Not now". */

#install-home-slot[hidden] { display: none; }
#install-home-slot { margin: 0 0 20px; }

.install-card {
    position: relative;
    padding: 16px 18px;
    background: #1e1e1e;
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    border-radius: 16px;
}

/* Nothing to do here, so it shouldn't pull the eye. */
.install-card.install-done {
    border-color: #2a2a2a;
}

.install-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    /* Clear of the close button in the corner. */
    padding-right: 30px;
}

.install-badge {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(var(--accent-rgb), 0.14);
    color: var(--accent);
}
.install-card.install-done .install-badge {
    background: rgba(var(--accent-rgb), 0.14);
}

.install-head-text { min-width: 0; }

.install-card h3 {
    margin: 2px 0 4px;
    font-size: 1rem;
}

.install-lead {
    margin: 0;
    color: #9d9d9d;
    font-size: 0.86rem;
    line-height: 1.45;
}

.install-dismiss {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 50%;
    color: #8a8a8a;
    cursor: pointer;
}
.install-dismiss:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

/* The one-tap path. Only rendered when the browser actually handed us a
   prompt, so it never appears as a button that can't do anything. */
.install-now {
    margin-top: 14px;
    width: auto;
    padding: 11px 22px;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    border-radius: 22px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
}
.install-now:hover { background: var(--accent-hover); }
.install-now:disabled { opacity: 0.5; cursor: default; }

.install-steps {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}
.install-steps li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    font-size: 0.88rem;
    line-height: 1.45;
}
.install-steps .icon {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--accent);
}
.install-step-text { min-width: 0; }

.install-note {
    margin: 14px 0 0;
    color: #8a8a8a;
    font-size: 0.78rem;
    line-height: 1.45;
}
.install-note-quiet { color: #6f6f6f; }

.install-later { margin-top: 12px; padding-left: 0; }

@media (max-width: 768px) {
    .install-card { padding: 14px 15px; }
    .install-badge { width: 34px; height: 34px; }
}