/* ==========================================================================
   PremiBox install explainer (partials/premibox-install-modal.php)
   The dialog scaffold (.modal-overlay/.modal-panel/.modal-head/.modal-body)
   comes from site/core.css and .modal-sub from site/app-detail.css. The
   numbered steps and the promise chips live here.
   ========================================================================== */

.pb-steps {
    counter-reset: pb-step;
    list-style: none;
    display: grid;
    gap: 13px;
    margin-bottom: 16px;
}

/* Heading + one line of detail, so the list can be read by its bold words
   alone. The detail is what stops the two questions people actually get stuck
   on ("why is Android warning me", "where did the game go"). */
.pb-steps li {
    position: relative;
    padding-left: 30px;
    line-height: 1.45;
}

/* Direct child only. The detail line below also contains a <strong> — the
   game's name — and a descendant selector made THAT display:block too, which
   broke one short sentence across three lines with the name stranded on its
   own. The step heading is the only <strong> that is a block. */
.pb-steps > li > strong {
    display: block;
    font-size: 13.5px;
    font-weight: 650;
    color: var(--text);
}

.pb-steps span {
    display: block;
    margin-top: 1px;
    font-size: 12.5px;
    color: var(--text-muted);
}

.pb-steps li::before {
    counter-increment: pb-step;
    content: counter(pb-step);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-soft-border);
    border-radius: 50%;
}

/* One row, not three sentences. The commitments are a reassurance glanced at
   on the way to the button — three full lines of prose read as terms nobody
   finishes, while three chips are taken in at once. */
.pb-promises {
    list-style: none;
    /* Grid, not flex-wrap: three equal columns keep the row balanced at any
       width, where wrapping put two chips on one line and one orphan under
       them — which reads as a layout mistake rather than a list of three. */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-bottom: 16px;
}

.pb-promises li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 5px 6px;
    font-size: 12px;
    font-weight: 550;
    white-space: nowrap;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.pb-promises svg {
    width: 12px;
    height: 12px;
    flex: none;
    color: var(--green);
}

/* The call to action carries the game's NAME, and catalogue names run long
   ("Abyssal Soul - Card Roguelike", "Ultimate Traffic Bike Driving"). .btn is
   nowrap by default, which would push a long label straight out of the panel,
   so this one wraps: the icon stays vertically centred beside a label that may
   take two lines, and text-wrap:balance keeps the break near the middle instead
   of leaving one orphaned word underneath. */
.pb-cta {
    align-items: center;
    padding-top: 13px;
    padding-bottom: 13px;
    white-space: normal;
    text-align: center;
}

.pb-cta span {
    line-height: 1.35;
    text-wrap: balance;
}

@media (max-width: 420px) {
    /* Measured: at a 360px viewport the panel gives the row ~300px and the
       three labels need ~330px, so the pills cannot share a line. Stacking
       three full-width pills works but eats a third of the dialog, so drop
       the pill entirely here and let them be what they always were — a short
       checklist. Same three facts, a quarter of the height. */
    .pb-promises {
        grid-template-columns: 1fr;
        gap: 3px;
        margin-bottom: 14px;
    }

    .pb-promises li {
        justify-content: flex-start;
        padding: 0;
        background: none;
        border: 0;
    }
}