/* ==========================================================================
   Article "Like → deliver → merge" feature (article pages only).
   Everything here is namespaced under .calbird- / #calbird- so it cannot
   collide with sitewide styles. Loaded only from _layouts/blog.html.
   Colours reuse the site's existing --accent-primary / --text-* tokens
   (styles.css) so light/dark mode are inherited automatically; the two
   fixed teal hexes below (#0F766E / #085041) match Cally's own launcher
   gradient (see _includes/cally.html) so the merge target looks identical
   to the real button.
   ========================================================================== */

.calbird-stage {
  position: relative;
  margin: 40px 0 8px;
  /* Reserves room for the bird's cruise altitude + delivered pill row so
     nothing shifts when the animation starts or the remembered state
     paints. overflow is NOT hidden: once the bird switches to fixed
     positioning for its dive toward Cally (see article-like-bird.js) it
     must be free to render outside this box. */
  min-height: 64px;
}

/* ---- Like control -------------------------------------------------- */
.calbird-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 9999px;
  border: 1.5px solid rgba(15, 118, 110, 0.35);
  background: #fff;
  color: var(--text-secondary, #4A4A4A);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.calbird-like-btn:hover {
  border-color: var(--accent-primary, #1FA5A0);
}
.calbird-like-btn:focus-visible {
  outline: 2px solid var(--accent-primary, #1FA5A0);
  outline-offset: 2px;
}
.calbird-like-btn .calbird-heart {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
.calbird-like-btn[aria-pressed="true"] {
  border-color: #0F766E;
  color: #0F766E;
  background: rgba(15, 118, 110, 0.06);
}
.calbird-like-btn[aria-pressed="true"] .calbird-heart {
  fill: #0F766E;
  stroke: #0F766E;
}
[data-theme="dark"] .calbird-like-btn {
  background: transparent;
  border-color: rgba(94, 234, 212, 0.35);
  color: var(--text-secondary, #CBD5E1);
}
[data-theme="dark"] .calbird-like-btn[aria-pressed="true"] {
  border-color: #5EEAD4;
  color: #5EEAD4;
  background: rgba(94, 234, 212, 0.1);
}
[data-theme="dark"] .calbird-like-btn[aria-pressed="true"] .calbird-heart {
  fill: #5EEAD4;
  stroke: #5EEAD4;
}

/* ---- Bird sprite (cruise phase: absolute inside .calbird-stage;
   the dive phase switches it to position:fixed via inline styles set
   from JS, so no fixed-position rule is needed here). ------------------ */
#calbird-bird {
  position: absolute;
  width: 108px;
  height: auto;
  left: -140px;
  top: 34px;
  display: none;
  pointer-events: none;
  will-change: transform, left, top, opacity;
}
@media (max-width: 480px) {
  #calbird-bird { width: 84px; }
}

/* ---- Delivered Substack pill ----------------------------------------- */
#calbird-pill {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  white-space: nowrap;
  max-width: 100%;
}
#calbird-pill .calbird-pill-in {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 118, 110, 0.08);
  border-radius: 9999px;
  padding: 8px 8px 8px 16px;
  max-width: 100%;
}
#calbird-pill .calbird-tag {
  font-size: 0.78rem;
  color: var(--text-tertiary, #717171);
  flex: none;
}
#calbird-pill .calbird-go {
  display: inline-flex;
  align-items: center;
  background: #0F766E;
  color: #fff !important;
  border-radius: 9999px;
  padding: 9px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
}
#calbird-pill .calbird-go:hover { background: #085041; }
#calbird-pill .calbird-go:focus-visible {
  outline: 2px solid #0F766E;
  outline-offset: 2px;
}
[data-theme="dark"] #calbird-pill .calbird-pill-in {
  background: rgba(94, 234, 212, 0.1);
}
[data-theme="dark"] #calbird-pill .calbird-tag {
  color: var(--text-tertiary, #94A3B8);
}

/* Below ~400px there isn't room for "Delivered:" + the button on one
   line at a comfortable tap size; drop the label and let the button
   itself communicate the state (still says "Subscribe on Substack"). */
@media (max-width: 399px) {
  #calbird-pill .calbird-tag { display: none; }
  #calbird-pill .calbird-pill-in { padding: 6px; }
}

/* ---- Merge target ring — a one-shot pulse drawn around the REAL Cally
   launcher (#cally-facade, from _includes/cally.html) when the bird
   arrives. Purely decorative and pointer-events:none, so it can never
   interfere with clicking the actual button. Positioned with the exact
   same fixed box Cally documents in its own file (bottom:20px;right:20px;
   56x56) rather than measuring the DOM, so it still lines up even in the
   (unlikely) case #cally-facade has already been replaced by the mounted
   widget by the time this fires. ------------------------------------- */
#calbird-ring {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid #1D9E75;
  opacity: 0;
  pointer-events: none;
  /* One higher than #cally-facade's z-index (also 2147483000, see
     _includes/cally.html) — cally.html is included later in the DOM
     (_layouts/blog.html), so at equal z-index the facade would stack
     on top and hide this ring behind it instead of around it. */
  z-index: 2147483001;
}

/* One-shot pulse applied to the real #cally-facade on arrival. Distinct
   name from Cally's own continuous [aria-busy] pulse — never overrides
   or removes that rule, just runs alongside it for ~700ms. */
@keyframes calbird-launcher-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}
.calbird-pulse {
  animation: calbird-launcher-pulse 0.7s ease-out;
}

/* ---- "Ask Cally" teaser popup -----------------------------------------
   Fixed near the Cally corner but high enough to clear both Cally itself
   (20–76px from the bottom) and the site's Back-to-top button, which
   occupies roughly 20–130px from the bottom at the same right edge
   (_includes/back-to-top.html) — a real collision risk here since this
   popup only ever appears after the reader has scrolled to the end of
   an article, exactly when Back-to-top is also visible. ---------------- */
#calbird-bub {
  position: fixed;
  right: 16px;
  bottom: 150px;
  max-width: 250px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  background: #fff;
  border: 1px solid #E8E2D8;
  border-radius: 14px 14px 3px 14px;
  padding: 14px 16px;
  box-shadow: 0 10px 28px rgba(16, 52, 58, 0.14);
  z-index: 2147483000;
  pointer-events: none;
}
#calbird-bub.is-visible { pointer-events: auto; }
#calbird-bub .calbird-bub-text {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary, #4A4A4A);
  margin: 0 0 10px;
}
#calbird-bub .calbird-bub-go {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #0F766E;
  color: #0F766E !important;
  border-radius: 9999px;
  padding: 7px 15px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  background: none;
  font-family: inherit;
}
#calbird-bub .calbird-bub-go:focus-visible {
  outline: 2px solid #0F766E;
  outline-offset: 2px;
}
[data-theme="dark"] #calbird-bub {
  background: #0F172A;
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] #calbird-bub .calbird-bub-text {
  color: var(--text-secondary, #CBD5E1);
}

@media (max-width: 480px) {
  #calbird-bub { right: 12px; max-width: 200px; padding: 12px 14px; }
}

/* ---- Reduced motion: no bird, no flight, no launcher/ring animation.
   The feature stays fully functional (see article-like-bird.js), only
   the motion is removed. ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #calbird-bird { display: none !important; }
  #calbird-ring { display: none !important; }
  .calbird-pulse { animation: none !important; }
  #calbird-pill, #calbird-bub {
    transition: none !important;
  }
}