/*  install-banner.css -- styles for the "install as app" hint bar shown at
 *  the top of the login page on mobile (iOS + Android). Kept small and
 *  self-contained so it can be dropped onto any page's <head>.
 *
 *  Uses safe-area-inset-top so it doesn't slide under the iPhone notch
 *  when the page is viewed in Safari's full-bleed layout. Slides in from
 *  the top on first paint and slides out on dismiss. */

.grd-install-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    background: #ffffff;
    color: #14181B;
    border-bottom: 1px solid #E4E7EA;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    animation: grdInstallIn 0.28s ease-out;
}
@keyframes grdInstallIn {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0);     }
}
.grd-install-banner.grd-install-out {
    animation: grdInstallOut 0.24s ease-in forwards;
}
@keyframes grdInstallOut {
    from { transform: translateY(0);     }
    to   { transform: translateY(-100%); }
}

.grd-install-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    background: #F3F5F7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.grd-install-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grd-install-body {
    flex: 1 1 auto;
    min-width: 0;
}
.grd-install-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: #14181B;
}
.grd-install-hint {
    font-size: 12px;
    line-height: 1.35;
    color: #4A5560;
    margin-top: 2px;
}
.grd-install-hint strong {
    color: #14181B;
    font-weight: 600;
}
.grd-install-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 22px;
    vertical-align: -6px;
    color: #007AFF;   /* iOS system blue for the share glyph */
    margin: 0 2px;
}
.grd-install-share svg {
    display: block;
}

.grd-install-cta {
    flex: 0 0 auto;
    background: #1B3A6B;
    color: #ffffff;
    border: 0;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.grd-install-cta:hover { background: #14294B; }

.grd-install-close {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: #6B757E;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.grd-install-close:hover { background: #F3F5F7; color: #14181B; }

/* iOS arrow that points UP-AND-RIGHT out of the banner toward Safari's
 * Share button in the top toolbar. Constraint: Safari's URL bar sits
 * ABOVE our page viewport, so we can't actually paint into it -- the
 * arrow has to live INSIDE the banner and rely on its direction +
 * bounce animation to say "look up above." Sits at the top-right of
 * the banner content, slightly overlapping the close button vertically
 * but offset horizontally so both stay tappable.
 *
 * Bounces on the vertical axis so the eye tracks it. Animation
 * respects prefers-reduced-motion (users with vestibular issues see
 * a static arrow instead). */
.grd-install-arrow {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 2px);
    right: 46px;              /* leaves the close X clickable to the right of it */
    width: 46px;
    height: 60px;
    pointer-events: none;
    animation: grdArrowBounce 1.1s ease-in-out infinite;
    filter: drop-shadow(0 1px 2px rgba(0, 122, 255, 0.4));
    z-index: 1;
}
@keyframes grdArrowBounce {
    0%, 100% { transform: translateY(2px); }
    50%      { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .grd-install-arrow { animation: none; }
}
/* Give the banner a bit more height on iOS so the arrow has vertical
 * room without cramping the two-line hint text alongside it. Applied
 * via a modifier class the JS adds only on iPhone. */
.grd-install-banner.grd-install-ios {
    min-height: 78px;
    align-items: flex-start;
    padding-right: 100px;    /* reserve room for arrow + close button */
}
/* Hide the arrow on wide viewports (landscape / iPad in Split View)
 * where the banner appears far from the Share button and the arrow
 * would confusingly point at empty space. */
@media (min-width: 700px) {
    .grd-install-arrow { display: none; }
    .grd-install-banner.grd-install-ios { padding-right: 14px; }
}

/* Push page content down so the banner doesn't overlap the login card on
 * short-screen phones. Applied to <body> when the banner exists. Simpler
 * than measuring the banner height at runtime and worth ~52px extra top
 * padding while it's showing. */
body:has(.grd-install-banner) {
    padding-top: 72px;
}
/* Fallback for browsers without :has() (older Chrome, older Safari) --
 * they just get 0 extra padding, and the banner may overlap the top of
 * the login card. Acceptable degradation: the banner is dismissable. */