/* ============================================================================
   FAVOURITE TOGGLE (★) — shared single source of truth.
   A compact star toggle used in the library card + library cover card actions
   row (and anywhere a "save to favourites" control is needed). State lives on
   `aria-pressed` (CSS swaps the hollow ↔ filled glyph + the warning ink). The
   wiring + the "just-added" burst animation live in _favourite.js.

   Forced states: the playground stamps `.fav` with data-state / .is-focus, so
   every :hover / :active / :focus-visible rule is mirrored for [data-state] /
   .is-focus at equal specificity (same pattern as .btn). Import AFTER
   colors_and_type.css (+ bootstrap-icons for the glyphs). Rules are UNLAYERED
   so they win over the bare-button reset.
   ============================================================================ */

.fav {
  position: relative;
  flex: none;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-fg-tertiary);
  font-size: 15px;
  cursor: pointer;
  user-select: none; -webkit-user-select: none;   /* controls never text-select */
  -webkit-appearance: none; appearance: none;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}
.fav:hover,
.fav[data-state~="hover"] {
  color: var(--gov-color-warning-600);
  border-color: var(--gov-color-warning-400);
  background: var(--gov-color-warning-50);
}
.fav:focus-visible,
.fav.is-focus { outline: none; box-shadow: var(--shadow-focus); }
.fav:active,
.fav[data-state~="pressed"] { transform: scale(0.92); }
.fav[aria-pressed="true"] {
  color: var(--gov-color-warning-500);
  border-color: var(--gov-color-warning-300);
  background: var(--gov-color-warning-50);
}
/* Favourited → GOLD focus ring (matches the warning theme of the active star);
   the empty state keeps the standard blue ring above. */
.fav[aria-pressed="true"]:focus-visible,
.fav[aria-pressed="true"].is-focus {
  box-shadow: 0 0 0 2px var(--color-bg-surface), 0 0 0 5px rgba(240,178,42,0.5);
}

/* ── Active-tinted surface (.on-active) ─────────────────────────────────────
   On a primary-50 "active" container (a hovered card / selected row) the
   resting star — transparent fill, low-contrast default border — gets lost in
   the tint. Give it a solid surface rest so it reads as a control; the hover /
   favourited states keep their warning ink (legible gold on the blue surface).
   Re-declared at higher specificity so the rest fill never clobbers hover. */
.on-active .fav { background: var(--color-bg-surface); }
.on-active .fav:hover,
.on-active .fav[data-state~="hover"] {
  color: var(--gov-color-warning-600);
  border-color: var(--gov-color-warning-400);
  background: var(--gov-color-warning-50);
}
.on-active .fav[aria-pressed="true"] {
  color: var(--gov-color-warning-500);
  border-color: var(--gov-color-warning-300);
  background: var(--gov-color-warning-50);
}

/* Glyph swap — hollow when off, filled when favourited. */
.fav .bi-star,
.fav .bi-star-fill { line-height: 1; display: inline-flex; }
.fav .bi-star-fill { display: none; }
.fav[aria-pressed="true"] .bi-star { display: none; }
.fav[aria-pressed="true"] .bi-star-fill { display: inline-flex; }

/* ── Just-added burst — added by _favourite.js on the click that FAVOURITES.
   1) the filled star pops + spins into place;
   2) a gold beacon glow radiates out from the button (box-shadow spread),
      echoing the request-status active-step beacon.
   Both are removed on animationend so they re-fire on every re-favourite.
   The global reduced-motion policy zeroes these durations automatically. */
.fav__glow {
  content: ""; position: absolute; inset: -1px;
  border-radius: inherit; pointer-events: none;
  opacity: 0;
}
.fav--burst .bi-star-fill { animation: favPop 480ms cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: 50% 52%; }
.fav--burst .fav__glow { animation: favGlow 640ms ease-out; }

@keyframes favPop {
  0%   { transform: rotate(-150deg) scale(0.35); }
  55%  { transform: rotate(12deg) scale(1.28); }
  100% { transform: rotate(0deg) scale(1); }
}
@keyframes favGlow {
  0%   { opacity: 1;   box-shadow: 0 0 0 0 rgba(240,178,42,0.55), 0 0 7px 1px rgba(240,178,42,0.55); }
  70%  { opacity: 0.35; }
  100% { opacity: 0;   box-shadow: 0 0 0 13px rgba(240,178,42,0), 0 0 20px 9px rgba(240,178,42,0); }
}