/* ===========================================================================
   The Blink helper: a launcher in the bottom-right corner (the Blink logo's
   lashes in a lavender haze, after the app's Breathe Out icon) that opens a
   small panel routing visitors to the right next step.

   Loaded by index.html and support.html after their own stylesheet. No
   JavaScript: a visually hidden checkbox (#hp-open) opens and closes the
   panel, and a second one (#hp-nudge-off, homepage only) dismisses the note.
   Every class is prefixed hp- so nothing here collides with home.css or
   site.css.

   The lashes blink slowly a few times and then rest. Like the homepage demo,
   this plays even when the viewer prefers reduced motion (home.css and
   site.css switch animation off with !important there; the rules below are
   !important and more specific). The note waits ~19s, until the homepage
   demo has pulled its trial balance.
   =========================================================================== */

.hp{
  --hp-ink:#302058; --hp-ink-2:#4C3D71; --hp-muted:#6F6487; --hp-lav:#D0B9F1;
  --hp-page:#F7F3FC; --hp-line:#E4DCEF; --hp-on-ink:#EDE2FD;
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
}
.hp-ck{position:fixed; opacity:0; width:1px; height:1px; pointer-events:none; bottom:0; right:0}
.hp-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

.hp-dock{position:fixed; z-index:30; display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  right:max(18px, env(safe-area-inset-right, 0px)); bottom:max(18px, env(safe-area-inset-bottom, 0px))}

/* ---- the launcher ---- */
.hp-launch{position:relative; width:68px; height:68px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:radial-gradient(circle at 50% 54%, #D4BEF4 0%, #E3D4F9 36%, #F3ECFC 60%, #FFFFFF 76%);
  box-shadow:0 0 0 1px rgba(190,165,232,.55), 0 14px 28px -12px rgba(60,36,120,.45);
  transition:transform .2s cubic-bezier(.22,.94,.24,1.02)}
.hp-launch:hover{transform:translateY(-2px)}
.hp-launch::after{content:''; position:absolute; inset:14%; border-radius:50%; pointer-events:none; opacity:.8;
  background:radial-gradient(circle, rgba(196,168,240,.55), rgba(196,168,240,0) 70%)}
.hp-launch svg{position:relative; z-index:1; width:46px; height:auto; overflow:visible}
.hp-launch .hp-close{display:none; position:relative; z-index:1; color:var(--hp-ink); font-size:30px; line-height:1}
#hp-open:checked ~ .hp-dock .hp-launch svg{display:none}
#hp-open:checked ~ .hp-dock .hp-launch .hp-close{display:block}
#hp-open:focus-visible ~ .hp-dock .hp-launch{outline:3px solid var(--hp-ink); outline-offset:3px}

/* one slow blink every 9s, six times: the lid lifts (lashes curve up), holds, settles closed */
.hp .hp-lash{transform-origin:32px 16px; animation:hp-lift 9s cubic-bezier(.45,0,.25,1) 4s 6 !important}
.hp .hp-launch::after{animation:hp-haze 9s cubic-bezier(.45,0,.25,1) 4s 6 !important}
@keyframes hp-lift{0%,6%,40%,100%{transform:scaleY(1)} 18%,26%{transform:scaleY(-.85)}}
@keyframes hp-haze{0%,6%,40%,100%{transform:scale(1); opacity:.8} 18%,26%{transform:scale(1.18); opacity:1}}

/* ---- the panel ---- */
.hp-panel{display:none; width:min(340px, calc(100vw - 32px)); background:#fff; border-radius:22px; padding:22px 20px 16px; position:relative;
  box-shadow:0 0 0 1px var(--hp-line), 0 24px 50px -18px rgba(28,16,54,.45); color:var(--hp-ink); transform-origin:bottom right}
.hp-panel::before{content:''; position:absolute; inset:0 0 auto 0; height:6px; border-radius:22px 22px 0 0; background:var(--hp-lav)}
#hp-open:checked ~ .hp-dock .hp-panel{display:block}
.hp #hp-open:checked ~ .hp-dock .hp-panel{animation:hp-pop .28s cubic-bezier(.22,.94,.24,1.02) !important}
@keyframes hp-pop{from{opacity:0; transform:translateY(8px) scale(.97)} to{opacity:1; transform:none}}
.hp-top{display:flex; justify-content:space-between; align-items:flex-start}
.hp-top img{width:64px; height:auto; display:block}
.hp-x{font-size:22px; line-height:1; color:var(--hp-muted); cursor:pointer; padding:2px 6px; border-radius:8px}
.hp-x:hover{background:var(--hp-page); color:var(--hp-ink)}
.hp-panel h2{font-family:'Poiret One','Century Gothic',Futura,sans-serif; font-weight:400; font-size:26px; line-height:1.1; margin:10px 0 0; color:var(--hp-ink); text-wrap:balance}
.hp-sub{margin:6px 0 14px; font-size:13.5px; line-height:1.5; color:var(--hp-ink-2)}
.hp-opts{display:grid; gap:8px}
.hp .hp-opt{display:grid; gap:1px; padding:11px 14px; border-radius:14px; text-decoration:none;
  background:var(--hp-page); box-shadow:inset 0 0 0 1px var(--hp-line)}
.hp .hp-opt b{font-weight:500; font-size:14px; color:var(--hp-ink)}
.hp .hp-opt span{font-size:12.5px; line-height:1.4; color:var(--hp-muted)}
.hp .hp-opt:hover{box-shadow:inset 0 0 0 1px var(--hp-ink-2)}
.hp .hp-opt:focus-visible{outline:2px solid var(--hp-ink); outline-offset:2px}
.hp .hp-opt.hp-prime{background:var(--hp-ink); box-shadow:none}
.hp .hp-opt.hp-prime b{color:#fff} .hp .hp-opt.hp-prime span{color:var(--hp-on-ink)}
.hp-foot{margin:12px 0 0; font-size:12px; color:var(--hp-muted); text-align:center}
.hp .hp-foot a{color:var(--hp-ink-2)}

/* ---- the note (homepage): slides out once, after the demo has pulled its trial balance ---- */
.hp-nudge{display:flex; align-items:center; gap:10px; max-width:280px; background:var(--hp-ink); color:#fff; font-size:13.5px; line-height:1.4;
  padding:10px 12px 10px 16px; border-radius:16px 16px 4px 16px; box-shadow:0 14px 28px -14px rgba(28,16,54,.6);
  opacity:0; visibility:hidden; transform:translateY(6px)}
.hp .hp-nudge{animation:hp-nudge .4s cubic-bezier(.22,.94,.24,1.02) 19s forwards !important}
@keyframes hp-nudge{to{opacity:1; visibility:visible; transform:none}}
.hp-nudge label{cursor:pointer}
.hp-nudge .hp-go{font-weight:500}
.hp-nudge .hp-no{color:var(--hp-on-ink); font-size:18px; line-height:1; padding:0 4px; border-radius:6px}
.hp-nudge .hp-no:hover{background:rgba(255,255,255,.12)}
#hp-nudge-off:checked ~ .hp-dock .hp-nudge,#hp-open:checked ~ .hp-dock .hp-nudge{display:none}
#hp-nudge-off:focus-visible ~ .hp-dock .hp-nudge .hp-no{outline:2px solid #fff}

@media print{.hp{display:none}}