/* Portal UI kit (pp-). Scoped helpers for Accept/Pass, Pass chips, popup, toast, yellow hash.
   Linked as /assets/ui.css. Safe to reuse from funnel-template portal builds. */

.pp-offer-acts,.offer-acts{display:flex;gap:8px;align-items:stretch;margin-top:12px}
.pp-offer-acts > .btn.primary,.offer-acts > .btn.primary{flex:3 1 0;min-width:0;width:auto}
.pp-offer-acts > form.inline,.offer-acts > form.inline{display:flex;min-width:0}
.pp-offer-acts > [data-pp-accept-form],.offer-acts > [data-pp-accept-form]{flex:3 1 0;min-width:0}
.pp-offer-acts > [data-pp-pass-form],.offer-acts > [data-pp-pass-form]{flex:1 1 0;min-width:0}
.pp-offer-acts > form > .btn,.offer-acts > form > .btn{width:100%}
.pp-offer-acts > .btn.pass,.offer-acts > .btn.pass{flex:1 1 0;min-width:0;width:auto;padding-left:10px;padding-right:10px;background:var(--danger);border-color:var(--danger);color:var(--paper);font-weight:800}
.pp-offer-acts > .btn.pass:hover,.offer-acts > .btn.pass:hover,.btn.pass:hover{filter:brightness(1.08);border-color:var(--danger)}
.btn.pass{background:var(--danger);border-color:var(--danger);color:var(--paper);font-weight:800}

.pp-yhash,.yhash{display:inline-block;width:30px;height:12px;margin-left:6px;border-radius:3px;vertical-align:middle;background:repeating-linear-gradient(-45deg,var(--flag) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px var(--flag)}
.pp-yhash[title],.yhash[title]{cursor:help}

.pp-offer-pop,.offer-pop{position:fixed;inset:0;z-index:40;display:none;align-items:flex-end;justify-content:center;padding:12px 12px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(0,0,0,.55);overscroll-behavior:contain}
.pp-offer-pop.is-open,.offer-pop.is-open{display:flex}
.pp-offer-pop .lead.offer,.offer-pop .lead.offer{width:min(440px,100%);max-height:min(calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)),720px);overflow-y:auto;overscroll-behavior:contain;margin:0;box-shadow:0 18px 50px var(--shadow)}
@media (min-width:720px){.pp-offer-pop,.offer-pop{align-items:center}}

.pp-pass-chips,.pass-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pp-chipbtn,.pass-chips .chipbtn{min-height:44px;padding:0 12px;border-radius:22px;border:1.5px solid var(--edge);background:var(--surface);color:var(--ink);font:700 var(--fs-sm) var(--font-body);cursor:pointer}
.pp-chipbtn[aria-pressed=true],.pass-chips .chipbtn[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--cta-ink)}

.pp-toast,.toast{position:fixed;left:50%;bottom:calc(var(--tabs) + 16px);transform:translateX(-50%);z-index:50;max-width:min(420px,92vw);padding:12px 16px;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--edge-2);box-shadow:0 10px 30px var(--shadow);font:700 var(--fs-sm) var(--font-body);color:var(--ink-head);display:none}
.pp-toast.show,.toast.show{display:block}
.pp-toast.ok,.toast.ok{border-color:color-mix(in srgb,var(--ok) 50%,transparent)}
.pp-toast.err,.toast.err{border-color:color-mix(in srgb,var(--bad) 55%,transparent);color:var(--bad)}

@media (prefers-reduced-motion:reduce){.pp-offer-pop,.pp-toast,.offer-pop,.toast,.pill,.btn,.pp-chipbtn{transition:none!important}}
html.pp-pop-lock,html.pp-pop-lock body{overflow:hidden}

/* Offer countdown (timerHtml + client tick). Red under 5 minutes, muted once expired. */
.pp-timer{font-variant-numeric:tabular-nums;white-space:nowrap}
.pp-timer.is-hot{background:var(--bad);color:var(--page)}
.pp-timer.is-expired{background:var(--deep);color:var(--ink-3)}
.lead.offer.is-expired .pp-offer-acts > .btn.primary,.lead.offer.is-expired [data-pp-accept-form] .btn{opacity:.45;pointer-events:none}

/* Lead price (price.js). Always shown; a credit slashes it and covers it with Free. */
.pp-price{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pp-was{text-decoration:line-through;text-decoration-thickness:2px;opacity:.7;font-weight:700}
.pp-free{display:inline-block;padding:2px 7px;border-radius:999px;background:var(--cta-ink);color:var(--accent);font:900 12px/1.3 var(--font-body);letter-spacing:.04em;text-transform:uppercase}
.pp-free-why{margin-top:10px;border-radius:var(--r-sm);background:var(--deep)}
.pp-free-why > summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;cursor:pointer;list-style:none;font-weight:700;font-size:var(--fs-sm);color:var(--ink-head);-webkit-tap-highlight-color:transparent}
.pp-free-why > summary::-webkit-details-marker{display:none}
.pp-free-why > summary::after{content:"+";margin-left:auto;font-weight:900;opacity:.6}
.pp-free-why[open] > summary::after{content:"-"}
.pp-free-why > p{margin:0;padding:0 12px 12px 36px;color:var(--ink)}

.pp-pass-acts{display:flex;gap:8px;align-items:stretch;margin-top:4px}
.pp-pass-acts > .btn{flex:1 1 0;min-width:0}