/* ═══════════════════════════════════════════════════════════
   MyPeptideApp: Install sheet
   The "Add to Home Screen" instruction sheet, as shared Modal
   content. Lived in the Home tab's page styles under an
   "hv2-is-" prefix until the Protocol tab's reminder prompt
   needed the same sheet: a browser that cannot receive push
   has to be walked through the install first, and a second
   copy of these steps would be the first one, slightly wrong,
   within a release.

   GLOBAL rather than a pageStyle, for the same reason
   promo-modal.css is: components/install-sheet.js is loaded on
   every page, so any page can open the sheet and none of them
   may get it unstyled. ~4 KB, on every page, guests included.

   Hero shows the REAL app icon as a home-screen preview, so the
   user sees the outcome before reading a word; numbered steps
   below carry the toolbar glyphs inline. base.css resets svg to
   display:block, so the inline step icons must explicitly opt
   back in to inline-block or every icon breaks its line
   (learned the hard way). The /install page stays one tap away
   in the help row.
   ═══════════════════════════════════════════════════════════ */

.ish-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0 var(--space-4);
}
.ish-icon {
    width: 64px; height: 64px;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}
.ish-icon-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
}
.ish-sub {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    text-align: center;
    margin: 0 auto var(--space-2);
    max-width: 300px;
}
.ish-step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px 0;
}
.ish-step + .ish-step { border-top: 1px solid var(--color-border-light); }
.ish-num {
    width: 26px; height: 26px;
    border-radius: var(--radius-full);
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ish-text {
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-primary);
}
.ish-text strong { font-weight: var(--weight-semibold); }
.ish-text svg {
    display: inline-block;
    width: 17px; height: 17px;
    vertical-align: -3px;
    margin: 0 1px;
}

/* What happens AFTER the last step, for callers that opened this
   sheet on the way to something else (the reminder prompt sends
   people here because iOS refuses push to an uninstalled site).
   Without it the steps end at "Add" and the reason they started
   is left hanging. Callers that just wanted the install pass no
   outro and this never renders. */
.ish-outro {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
}
.ish-outro svg {
    flex-shrink: 0;
    width: 16px; height: 16px;
    margin-top: 1px;
    color: var(--color-text-tertiary);
}

.ish-help {
    /* Full-bleed divider: the modal body pads with space-5, so the
       negative margins pull the border out to the sheet edges and
       the padding puts the text back on the grid. */
    margin: var(--space-4) calc(-1 * var(--space-5)) 0;
    padding: var(--space-4) var(--space-5) 0;
    border-top: 1px solid var(--color-border-light);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    text-align: center;
}
.ish-help a {
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}
@media (hover: hover) {
    .ish-help a:hover { opacity: 0.7; }
}