/* =============================================================================
   AIToolsay — Tool-page "Buy me a Coffee" pill  (.pg-coffee-btn.pg-bmc)
   -----------------------------------------------------------------------------
   The support CTA in the output card's meta row on every tool page. Loaded once
   by ai-tool-shell and ai-writers-shell.

   ── WHY YELLOW ────────────────────────────────────────────────────────────
   Same call the article action cards already ship: COFFEE is Buy-Me-a-Coffee
   yellow, everything else stays brand blue. The yellow is the category signal —
   people recognise the button before they read it — and the sibling control in
   this very row (.pg-tg-btn, "Join Our Community") stays blue precisely so the
   two do not compete. Token values here are lifted verbatim from
   `.pa-act[data-tone="amber"]` in premium-article.css so the two coffee CTAs on
   this site are one system, not two yellows.

   ── YELLOW CANNOT CARRY WHITE INK ─────────────────────────────────────────
   White on this fill is 1.3-1.9:1. The label is espresso (#241A02 rest,
   #1A1200 hover) = 12.7:1, which is what Buy Me a Coffee's own brand does.
   Do NOT "fix" the label to white — that is the failure, not the fix. The old
   button in the shells was blue and DID carry white; converting the fill
   without converting the ink is how this breaks.

   Consequence: hover BRIGHTENS this pill. Dark ink and light ink fail in
   opposite directions, so a yellow control must move away from "too dark" while
   a blue one moves away from "too light".

   Three things yellow needs that blue does not:
     · --bmc-rim   a warm dark hairline. Yellow on a white card is 1.54:1 and
                   the pill dissolves into the surface without a drawn edge.
     · --bmc-chip  a CREAM disc behind the mug, lighter than the fill, because
                   the glyph on it is espresso.
     · --bmc-steam espresso wisps. White steam is invisible on yellow.
   And --bmc-ring is separate from --bmc-bglow: the yellow bloom is far too
   light to serve as a focus ring against a white card.

   ── SPECIFICITY ───────────────────────────────────────────────────────────
   `.pg-bmc` is a second class added to the anchor in both shells purely to win
   the cascade. What has to be cleared:

     ai-tool-shell     .pg-coffee-btn                              (0,1,0)
                       .pg-coffee-btn:hover                        (0,1,1)
                       .pg-coffee-btn > i + span                   (0,1,2)
     ai-writers-shell  .pg-root .pg-coffee-btn                     (0,2,0)
                       .pg-root .pg-coffee-btn:hover               (0,2,1)
     floating-widgets  .card a:hover { color:#2060C0 }             (0,2,1)  ←
     (inline <style>   body.theme-dark .card a:hover {#60A4F5}     (0,3,1)  ←
      before </body>)
     custom.ltr.css    body:not(.admin-shell):not(.theme-dark)
                         a:focus-visible                           (0,3,2)  ←

   The two marked ← are the reason the hover rules carry a `body` prefix. The
   button is an <a> inside `#tool-box .card`, so floating-widgets repaints its
   label on hover — and it is injected before </body>, after every stylesheet,
   so an equal-specificity rule loses. `.pg-root .pg-coffee-btn.pg-bmc:hover` is
   only (0,3,1) and would TIE the dark one. With the prefix:
       base (0,3,0) · hover (0,5,1) · dark base (0,4,1) · dark hover (0,6,1)
   That same live hijack is what turned the article button's label blue — see
   the note in premium-article.css.

   NOTE ON COMMENTS IN THIS FILE: never let an asterisk sit directly before a
   slash inside a comment. It closes the block early and the parser then eats
   the next whole rule as error recovery, which silently deletes a token block.
   A brace-balance check cannot catch it.
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   1. THE PILL
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-coffee-btn.pg-bmc {
  /* Warm at the light end, gold at the deep end so the pill has body — a flat
     #FFDD00 reads as a highlighter swipe, not a control. */
  --bmc-b1: #FFDD3D;  --bmc-b2: #FFC91A;  --bmc-b3: #F0AE00;
  --bmc-b1h: #FFEA85; --bmc-b2h: #FFD84D; --bmc-b3h: #FFC61A;

  --bmc-ink: #241A02;
  --bmc-ink-h: #1A1200;

  --bmc-bglow: 240, 174, 0;
  --bmc-ring: 154, 104, 0;
  --bmc-rim: rgba(122, 82, 0, .40);

  --bmc-chip: rgba(255, 255, 255, .58);
  --bmc-chip-line: rgba(255, 255, 255, .80);
  --bmc-chip-h: rgba(255, 255, 255, .88);

  /* Restrained on purpose: this drives BOTH the top-left radial highlight and
     the 1px top lip, and yellow already sits near the top of the value scale —
     at the .55 that suits a dark fill the corner blows out to near-white. */
  --bmc-gloss: rgba(255, 255, 255, .34);
  --bmc-sheen: rgba(255, 255, 255, .55);
  --bmc-steam: rgba(36, 26, 2, .55);

  /* the surface the focus ring's inner gap is drawn against */
  --bmc-surface: #fff;

  position: relative;
  isolation: isolate;
  /* VISIBLE, not hidden — the steam has to rise out of the pill. The shells set
     `overflow:hidden` for their old shine sweep; the sweep here clips itself
     with `border-radius: inherit` instead. */
  overflow: visible;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  max-inline-size: 100%;
  /* clears a comfortable target at every breakpoint and keeps the pill shape */
  min-block-size: 38px;
  margin-inline-start: auto;
  padding-block: 4px;
  /* Asymmetric: the disc already carries weight on the leading edge, so the
     trailing side needs more air or the label looks shunted. */
  padding-inline: 5px 16px;

  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(125% 165% at 18% -35%, var(--bmc-gloss), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, var(--bmc-b1), var(--bmc-b2) 52%, var(--bmc-b3));
  color: var(--bmc-ink);

  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  /* the shells add `filter: brightness(1.04)` on hover; the ramp swap does that
     job properly here, so the filter is neutralised rather than inherited */
  filter: none;

  box-shadow:
    inset 0 1px 0 var(--bmc-gloss),
    inset 0 0 0 1px var(--bmc-rim),
    0 10px 22px -12px rgba(var(--bmc-bglow), .85),
    0 2px 6px -3px rgba(60, 40, 0, .28);

  transition: transform .22s cubic-bezier(.34, 1.4, .64, 1),
              box-shadow .24s ease,
              background-image .24s ease,
              color .22s ease;
}

/* ── the lit disc ──────────────────────────────────────────────────────────
   `place-items` plus a fixed box turns the bare glyph into a chip.
   `line-height:1` is load-bearing: Font Awesome sets its own, and without the
   reset the mug sits about a pixel low inside the circle, which is very visible
   at 28px. */
.pg-root .pg-coffee-btn.pg-bmc > i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  font-size: 12.5px;
  line-height: 1;
  color: var(--bmc-ink);
  background: var(--bmc-chip);
  box-shadow: inset 0 0 0 1px var(--bmc-chip-line);
  position: relative;
  z-index: 1;
  transition: transform .3s cubic-bezier(.34, 1.5, .64, 1),
              background .24s ease, box-shadow .24s ease, color .22s ease;
}

/* Label rides above both pseudo-elements. `> i + span` in ai-tool-shell adds a
   2px nudge that the flex `gap` already covers. */
.pg-root .pg-coffee-btn.pg-bmc > span {
  position: relative;
  z-index: 1;
  margin-inline-start: 0;
}

/* ── sheen ─────────────────────────────────────────────────────────────────
   Parked past the trailing edge. The shells park their sweep with
   `transform: translateX(-100%)` and animate the transform; this animates
   `background-position` instead, so it cannot be knocked out of place by the
   pill's own hover transform. */
.pg-root .pg-coffee-btn.pg-bmc::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transform: none;
  background: linear-gradient(100deg,
              rgba(255, 255, 255, 0) 38%,
              var(--bmc-sheen) 50%,
              rgba(255, 255, 255, 0) 62%);
  background-size: 260% 100%;
  background-position: 135% 0;
  transition: none;
}

/* ── steam ─────────────────────────────────────────────────────────────────
   Two wisps in ONE pseudo-element, drawn as two radial gradients, so no extra
   markup is needed. Sits over the disc and rises out of the pill on hover,
   which is only possible because the pill no longer clips. `inset-inline-start`
   keeps it on the mug side under RTL. Kept mostly OVER the pill: espresso steam
   only has to contrast with the yellow it sits on, and what escapes the top
   edge is already at the tail of the fade. */
.pg-root .pg-coffee-btn.pg-bmc::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset-inline-start: 9px;
  inset-block-start: -6px;
  inline-size: 28px;
  block-size: 15px;
  pointer-events: none;
  opacity: 0;
  transform: none;
  background:
    radial-gradient(closest-side, var(--bmc-steam), rgba(255, 255, 255, 0) 72%) 34% 100% / 5px 9px no-repeat,
    radial-gradient(closest-side, var(--bmc-steam), rgba(255, 255, 255, 0) 72%) 68% 100% / 4px 7px no-repeat;
  transition: none;
}

/* ── INK LOCK, deliberately OUTSIDE any media query ────────────────────────
   `.card a:hover{color:#2060C0}` and `body.theme-dark .card-body a:hover
   {color:#60A4F5}` are NOT gated behind a pointer type, so on a phone a tap
   would repaint this label brand-blue on yellow (2.9:1) while none of the
   hover treatment below applies. This pins the espresso ink for every pointer;
   the hover block that follows deepens it to --bmc-ink-h on fine pointers, and
   wins the tie by being later. Order matters — do not move this after it. */
body:not(.admin-shell) .pg-root .pg-coffee-btn.pg-bmc:hover,
body:not(.admin-shell) .pg-root .pg-coffee-btn.pg-bmc:focus,
body:not(.admin-shell) .pg-root .pg-coffee-btn.pg-bmc:active {
  color: var(--bmc-ink);
  filter: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. HOVER — the "after" state
   ═══════════════════════════════════════════════════════════════════════════
   Gated behind a real pointer so a tap does not leave the pill stuck lifted.
   Five things move together and every one of them RAISES contrast or depth;
   nothing here dims the label. */
@media (hover: hover) and (pointer: fine) {
  body:not(.admin-shell) .pg-root .pg-coffee-btn.pg-bmc:hover {
    transform: translateY(-2px);
    /* Repaint the FILL, not just the geometry. The base rule sets the
       `background` SHORTHAND; overriding `background-image` alone swaps the
       ramp without disturbing the rest of that layer list — the top-left
       highlight is restated because it belongs to the same list and would
       otherwise be dropped. */
    background-image:
      radial-gradient(125% 165% at 18% -35%, var(--bmc-gloss), rgba(255, 255, 255, 0) 60%),
      linear-gradient(135deg, var(--bmc-b1h), var(--bmc-b2h) 52%, var(--bmc-b3h));
    color: var(--bmc-ink-h);
    filter: none;
    box-shadow:
      inset 0 1px 0 var(--bmc-gloss),
      inset 0 0 0 1px var(--bmc-rim),
      0 16px 30px -13px rgba(var(--bmc-bglow), .95),
      0 3px 9px -4px rgba(60, 40, 0, .35);
  }
  /* The disc is a child, so it does NOT pick up the hover ink from the rule
     above once the base rule has given it one — repaint it explicitly or the
     mug stays at its rest colour while the label moves. The tilt reads as a
     pour; -9deg is as far as it goes before the mug looks like it is falling
     over. */
  body:not(.admin-shell) .pg-root .pg-coffee-btn.pg-bmc:hover > i {
    color: var(--bmc-ink-h);
    background: var(--bmc-chip-h);
    box-shadow: inset 0 0 0 1px var(--bmc-chip-line),
                0 3px 8px -4px rgba(60, 40, 0, .35);
    transform: rotate(-9deg) scale(1.06);
  }
  /* Transitions are declared HERE, not on the base rules, so un-hover snaps
     both pseudo-elements back to their park instead of sweeping backwards. */
  body:not(.admin-shell) .pg-root .pg-coffee-btn.pg-bmc:hover::after {
    opacity: 1;
    background-position: -35% 0;
    transition: background-position .8s cubic-bezier(.2, .8, .3, 1), opacity .2s ease;
  }
  body:not(.admin-shell) .pg-root .pg-coffee-btn.pg-bmc:hover::before {
    animation: pg-bmc-steam 1.9s ease-out .12s infinite;
  }
}

@keyframes pg-bmc-steam {
  0%   { opacity: 0;   transform: translateY(4px)  scaleX(.9); }
  22%  { opacity: .85; }
  100% { opacity: 0;   transform: translateY(-9px) scaleX(1.25); }
}

body:not(.admin-shell) .pg-root .pg-coffee-btn.pg-bmc:active {
  transform: translateY(0) scale(.98);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. FOCUS
   ═══════════════════════════════════════════════════════════════════════════
   The site-wide `a:focus-visible` reset kills the outline AND forces
   `border-radius:6px`, so the pill radius has to be restated or a focused
   button visibly squares off. Declared OUTSIDE the hover media query, so a
   keyboard user on a touch device still gets the full lit state. */
body:not(.admin-shell) .pg-root .pg-coffee-btn.pg-bmc:focus-visible {
  outline: none;
  border-radius: 999px;
  transform: translateY(-2px);
  background-image:
    radial-gradient(125% 165% at 18% -35%, var(--bmc-gloss), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, var(--bmc-b1h), var(--bmc-b2h) 52%, var(--bmc-b3h));
  color: var(--bmc-ink-h);
  box-shadow:
    0 0 0 3px var(--bmc-surface),
    0 0 0 6px rgba(var(--bmc-ring), .70),
    0 14px 26px -14px rgba(var(--bmc-bglow), .8);
}
body:not(.admin-shell) .pg-root .pg-coffee-btn.pg-bmc:focus-visible > i {
  color: var(--bmc-ink-h);
  background: var(--bmc-chip-h);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════
   `.pg-meta-row` is a wrapping flex, so the pill drops to its own line the
   moment the metadata pills leave it too little room — the label never has to
   truncate at any width. Below 576px it goes full width and grows to a 46px
   target. */
@media (max-width: 575.98px) {
  .pg-root .pg-coffee-btn.pg-bmc {
    inline-size: 100%;
    margin-inline-start: 0;
    margin-block-start: 8px;
    min-block-size: 46px;
    font-size: 13px;
    padding-inline: 6px 18px;
  }
  .pg-root .pg-coffee-btn.pg-bmc > i {
    inline-size: 32px;
    block-size: 32px;
    font-size: 13.5px;
  }
  .pg-root .pg-coffee-btn.pg-bmc::before {
    inset-inline-start: 10px;
    inline-size: 32px;
  }
}

/* Tablet and narrow laptops: unchanged geometry, it already fits — but the
   meta row is tighter, so reclaim the auto margin when the pill has wrapped
   onto its own line and would otherwise sit stranded at the right edge. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .pg-root .pg-coffee-btn.pg-bmc { margin-inline-start: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. RTL — the disc leads, so the steam and the pour tilt both mirror
   ═══════════════════════════════════════════════════════════════════════════ */
[dir="rtl"] .pg-root .pg-coffee-btn.pg-bmc { padding-inline: 5px 16px; }
@media (hover: hover) and (pointer: fine) {
  [dir="rtl"] body:not(.admin-shell) .pg-root .pg-coffee-btn.pg-bmc:hover > i {
    transform: rotate(9deg) scale(1.06);
  }
  [dir="rtl"] body:not(.admin-shell) .pg-root .pg-coffee-btn.pg-bmc:hover::after {
    background-position: 235% 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. DARK MODE
   ═══════════════════════════════════════════════════════════════════════════
   The FILL is untouched. #FFDD3D→#F0AE00 carries espresso ink at 12.7:1
   regardless of what is behind it, and re-tinting a fill "because the card is
   dark" is the exact move ai-contrast-fix.css exists to undo. What changes is
   everything that models depth against the surface:
     · the neutral contact shadow goes darker, or the pill floats flatly;
     · the warm bloom drops in alpha — at .85 it haloes on a dark card;
     · the drawn rim goes light. On dark the yellow pill is already the
       brightest object in the card, so the dark hairline it needs against a
       WHITE surface only muddies it here;
     · the focus ring goes bright, because a deep #9A6800 is nearly invisible
       against #17171A. */
body.theme-dark .pg-root .pg-coffee-btn.pg-bmc {
  --bmc-surface: #17171A;
  --bmc-rim: rgba(255, 255, 255, .20);
  --bmc-ring: 245, 179, 1;
  box-shadow:
    inset 0 1px 0 var(--bmc-gloss),
    inset 0 0 0 1px var(--bmc-rim),
    0 10px 22px -12px rgba(var(--bmc-bglow), .55),
    0 3px 9px -4px rgba(0, 0, 0, .60);
}

@media (hover: hover) and (pointer: fine) {
  body:not(.admin-shell).theme-dark .pg-root .pg-coffee-btn.pg-bmc:hover {
    color: var(--bmc-ink-h);
    box-shadow:
      inset 0 1px 0 var(--bmc-gloss),
      inset 0 0 0 1px var(--bmc-rim),
      0 18px 34px -14px rgba(var(--bmc-bglow), .70),
      0 4px 12px -5px rgba(0, 0, 0, .65);
  }
}
body:not(.admin-shell).theme-dark .pg-root .pg-coffee-btn.pg-bmc:focus-visible {
  box-shadow:
    0 0 0 3px var(--bmc-surface),
    0 0 0 6px rgba(var(--bmc-ring), .70),
    0 14px 26px -14px rgba(0, 0, 0, .7);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pg-root .pg-coffee-btn.pg-bmc,
  .pg-root .pg-coffee-btn.pg-bmc > i { transition: none; }
  body:not(.admin-shell) .pg-root .pg-coffee-btn.pg-bmc:hover,
  body:not(.admin-shell) .pg-root .pg-coffee-btn.pg-bmc:focus-visible,
  body:not(.admin-shell) .pg-root .pg-coffee-btn.pg-bmc:active,
  body:not(.admin-shell) .pg-root .pg-coffee-btn.pg-bmc:hover > i { transform: none; }
  body:not(.admin-shell) .pg-root .pg-coffee-btn.pg-bmc:hover::after { opacity: 0; }
  body:not(.admin-shell) .pg-root .pg-coffee-btn.pg-bmc:hover::before {
    animation: none;
    opacity: 0;
  }
}