/*
 * aw-likes.css — styles for the anonymous "Support" heart button (see lib/js/aw-likes.js).
 * Shared by the main hub and every journey hub so the button can't drift between pages.
 * Expects the markup:
 *   <div class="aw-like-top">
 *     <button class="aw-like" data-aw-like …>…</button>
 *     <div class="aw-like-pop" role="tooltip">…</div>
 *   </div>
 */
.aw-like-top { position:relative; display:inline-flex; }
.aw-like { display:inline-flex; align-items:center; gap:0.4rem; padding:0.34rem 0.72rem; font-size:0.9rem; font-weight:700; line-height:1; cursor:pointer; color:var(--theme-text); background:var(--theme-body-background); border:1.5px solid var(--theme-border, rgba(128,128,128,0.4)); border-radius:999px; transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease; }
.aw-like .aw-like-heart { font-size:1.05rem; filter:grayscale(1); opacity:0.75; transition:filter .2s ease, opacity .2s ease, transform .2s ease; }
.aw-like .aw-like-label { font-weight:700; }
.aw-like .aw-like-count { font-variant-numeric:tabular-nums; min-width:1.1ch; text-align:center; padding:0.06rem 0.42rem; border-radius:999px; font-size:0.82rem; background:color-mix(in srgb, var(--theme-text) 10%, transparent); }
.aw-like.is-liked .aw-like-count { background:color-mix(in srgb, #e0245e 20%, transparent); }
.aw-like:hover { border-color:#e0245e; transform:translateY(-1px); box-shadow:0 6px 16px rgba(224,36,94,0.2); }
.aw-like:hover .aw-like-heart, .aw-like.is-liked .aw-like-heart { filter:none; opacity:1; }
.aw-like.is-liked { border-color:#e0245e; background:color-mix(in srgb,#e0245e 12%, transparent); color:#e0245e; }
.aw-like:disabled { opacity:0.65; cursor:default; }
.aw-like:focus-visible { outline:2px solid #e0245e; outline-offset:3px; }
@keyframes awLikePop { 0%{transform:scale(1);} 40%{transform:scale(1.4);} 100%{transform:scale(1);} }
.aw-like.just-liked .aw-like-heart { animation:awLikePop 0.4s ease; }
@keyframes awLikeInvite { 0%,100%{box-shadow:0 0 0 0 rgba(224,36,94,0);} 50%{box-shadow:0 0 0 6px rgba(224,36,94,0.12);} }
.aw-like:not(.is-liked):not(:hover) { animation:awLikeInvite 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .aw-like { animation:none !important; } }

.aw-like-pop { position:absolute; top:calc(100% + 10px); left:0; z-index:60; width:272px; padding:0.85rem 0.95rem; border-radius:12px; text-align:left; pointer-events:none;
	background:var(--theme-card-background, #fff); color:var(--theme-text); border:1px solid var(--theme-border, rgba(128,128,128,0.25)); box-shadow:0 16px 36px rgba(0,0,0,0.22);
	opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .18s ease, transform .18s ease, visibility .18s; }
body.theme-dark .aw-like-pop { background:#20202a; }
.aw-like-pop strong { display:block; font-size:0.9rem; margin-bottom:0.35rem; }
.aw-like-pop span { display:block; font-size:0.82rem; line-height:1.5; color:var(--theme-text-subtle); }
.aw-like-pop .aw-like-geo { margin-top:0.6rem; padding-top:0.55rem; border-top:1px solid var(--theme-border, rgba(128,128,128,0.2)); font-size:0.8rem; font-weight:700; color:var(--theme-text); }
.aw-like-pop .aw-like-geo[hidden] { display:none; }
.aw-like-pop::before { content:""; position:absolute; bottom:100%; left:22px; border:7px solid transparent; border-bottom-color:var(--theme-border, rgba(128,128,128,0.25)); }
.aw-like-pop::after { content:""; position:absolute; bottom:100%; left:23px; border:6px solid transparent; border-bottom-color:var(--theme-card-background, #fff); }
body.theme-dark .aw-like-pop::after { border-bottom-color:#20202a; }
.aw-like-top:hover .aw-like-pop, .aw-like-top:focus-within .aw-like-pop { opacity:1; visibility:visible; transform:translateY(0); }

/* the popover is anchored left; near the right edge of a header, flip it so it stays on screen */
.aw-like-top.pop-right .aw-like-pop { left:auto; right:0; }
.aw-like-top.pop-right .aw-like-pop::before { left:auto; right:22px; }
.aw-like-top.pop-right .aw-like-pop::after { left:auto; right:23px; }

/* Discovery cue: a caption that bobs under the heart until it is tapped.
   Injected by aw-likes.js, so hubs need no extra markup. Recolour per hub with --nudge-a/--nudge-b. */
.like-nudge { position:absolute; left:50%; top:calc(100% + 10px); transform:translate(-50%,0);
	display:inline-flex; align-items:center; white-space:nowrap; pointer-events:none; z-index:5;
	padding:0.22rem 0.65rem; border-radius:999px; font-size:0.82rem; font-weight:700; color:#fff;
	background:linear-gradient(120deg, var(--nudge-a,#7c5cff), var(--nudge-b,#e0245e));
	box-shadow:0 6px 18px color-mix(in srgb, var(--nudge-b,#e0245e) 38%, transparent);
	animation:awNudgeBob 1.5s ease-in-out infinite; transition:opacity .18s ease; }
.like-nudge::before { content:''; position:absolute; left:50%; bottom:100%; margin-left:-6px;
	border:6px solid transparent; border-bottom-color:var(--nudge-a,#7c5cff); }
@keyframes awNudgeBob { 0%,100%{ transform:translate(-50%,2px); } 50%{ transform:translate(-50%,-4px); } }
/* step aside for the tooltip on hover, and retire once they have actually tapped */
.aw-like-top:hover .like-nudge, .aw-like-top:focus-within .like-nudge { opacity:0; }
.aw-like.is-liked ~ .like-nudge { display:none; }
@media (prefers-reduced-motion: reduce) { .like-nudge { animation:none; } }