/* Shared acquisition UI: the desktop QR panel and the mobile install bar.
   Both are injected by assets/acquire.js, so nothing here is styled unless the
   script decided the visitor should see it. Tokens come from the page's own
   palette — these components appear on the marketing shell, the court pages
   and the spectator page, which do not share a stylesheet beyond site-v2. */

.qr-panel{
    position:fixed; inset:0; z-index:120;
    display:flex; align-items:center; justify-content:center; padding:24px;
    background:rgba(8,19,13,.58);
    opacity:0; transition:opacity .22s cubic-bezier(.16,1,.3,1);
}
.qr-panel.is-open{ opacity:1; }
.qr-panel[hidden]{ display:none !important; }

.qr-card{
    background:var(--card, #fff); color:var(--ink, #0B1D14);
    border:1px solid var(--line, rgba(11,29,20,.12));
    border-radius:24px; padding:32px; width:min(420px, 100%);
    text-align:center; box-shadow:0 34px 90px rgba(6,24,17,.34);
    transform:translateY(10px) scale(.98);
    transition:transform .28s cubic-bezier(.16,1,.3,1);
}
.qr-panel.is-open .qr-card{ transform:none; }

.qr-card h2{ font:700 22px/1.25 var(--f, system-ui); margin:0 0 8px; letter-spacing:-.01em; }
.qr-card p{ font:450 15px/1.55 var(--f, system-ui); color:var(--ink-mute, #5A6B62); margin:0 0 20px; }
.qr-img{
    width:296px; max-width:100%; height:auto; margin:0 auto;
    border-radius:14px; border:1px solid var(--line, rgba(11,29,20,.12)); background:#fff;
}
.qr-actions{ display:flex; gap:10px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
.qr-actions .btn{ min-height:44px; }
.qr-note{ margin:16px 0 0 !important; font-size:13.5px !important; min-height:20px; }

.qr-close{
    position:absolute; top:14px; right:16px;
    width:44px; height:44px; border:0; background:none; cursor:pointer;
    font-size:26px; line-height:1; color:var(--ink-mute, #5A6B62); border-radius:12px;
}
.qr-close:hover{ color:var(--ink, #0B1D14); }
.qr-close:focus-visible{ outline:2px solid var(--court-fg, #1F5D43); outline-offset:2px; }
.qr-card{ position:relative; }

/* ---- Mobile install bar --------------------------------------------------
   iOS only, and only where Safari is not already showing its Smart App Banner.
   See the platform block in acquire.js — one install affordance at a time. */
.install-bar{
    position:fixed; left:12px; right:12px; z-index:110;
    bottom:calc(12px + env(safe-area-inset-bottom));
    display:flex; align-items:center; gap:8px;
    background:var(--card, #fff); color:var(--ink, #0B1D14);
    border:1px solid var(--line, rgba(11,29,20,.14));
    border-radius:18px; padding:10px 10px 10px 12px;
    box-shadow:0 18px 44px rgba(6,24,17,.26);
    transform:translateY(140%);
    transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.install-bar.is-in{ transform:none; }
.install-bar[hidden]{ display:none !important; }

.install-bar-cta{
    flex:1; display:flex; align-items:center; gap:11px;
    text-decoration:none; color:inherit; min-height:44px;
}
.install-bar-cta img{ border-radius:8px; flex:0 0 auto; }
.install-bar-cta span{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.install-bar-cta b{ font:650 15px/1.25 var(--f, system-ui); }
.install-bar-cta i{ font:450 13px/1.3 var(--f, system-ui); font-style:normal; color:var(--ink-mute, #5A6B62); }
.install-bar-cta em{
    margin-left:auto; flex:0 0 auto; font-style:normal;
    font:650 14px/1 var(--f, system-ui);
    background:var(--cue, #C8F751); color:#0B1D14;
    padding:11px 18px; border-radius:999px;
}
.install-bar-close{
    flex:0 0 auto; width:44px; height:44px; border:0; background:none; cursor:pointer;
    font-size:22px; line-height:1; color:var(--ink-mute, #5A6B62); border-radius:12px;
}
.install-bar-close:focus-visible, .install-bar-cta:focus-visible{
    outline:2px solid var(--court-fg, #1F5D43); outline-offset:2px;
}

/* A QR trigger sitting beside an App Store badge. */
.qr-trigger{
    display:inline-flex; align-items:center; gap:7px;
    min-height:44px; padding:0 4px; margin-left:4px;
    background:none; border:0; cursor:pointer;
    font:600 14.5px/1 var(--f, system-ui); color:var(--court-fg, #1F5D43);
    border-bottom:1px solid transparent;
}
.qr-trigger:hover{ border-bottom-color:currentColor; }
.qr-trigger:focus-visible{ outline:2px solid var(--court-fg, #1F5D43); outline-offset:3px; border-radius:8px; }
.final-cta .qr-trigger, .page-cta .qr-trigger, .ccta .qr-trigger{ color:var(--cue, #C8F751); }
/* The QR trigger is meaningless on a phone — the badge installs directly. */
@media (max-width: 860px){ .qr-trigger{ display:none; } }

@media (prefers-reduced-motion: reduce){
    .qr-panel, .qr-card, .install-bar{ transition:none; }
}

/* The line that carries the QR trigger under a store badge. Collapses to
   nothing on a phone, where .qr-trigger is display:none anyway. */
.qr-line{ margin:8px 0 0; }
.qr-line:empty{ display:none; }
@media (max-width: 860px){ .qr-line{ display:none; } }