/* Synfonos — the sponsor button and its popover (owner, 24 Sep 2026). `sponsor.js` says
 * what it does; this sheet says how it looks.
 *
 * COLOUR. Product tokens for every surface and every word. The heart and its ring use only
 * the brand's own blue (#2F7FDD) and green (#1CB083), the same pair the site's goal bar is
 * drawn in. The one other hue is the popover's frame: the site's sponsor red (below).
 *
 * WHY THE HEART IS BLUE IN LIGHT AND BLUE-TO-GREEN IN DARK. The heart is the whole meaning
 * of the button, so it is held to the 3:1 a meaningful graphic needs against the caption
 * bar (`--raised`). The green is 2.77:1 on the light `--raised` and fails that; the blue is
 * 4.04:1. On the dark `--raised` both pass (blue 4.43:1, green 6.47:1), so dark gets the
 * site's two-colour sweep. `sponsor.test.mjs` computes these from this file.
 *
 * STACKING. The caption bar is a stacking context at z-index 3 and the destinations below
 * it are `position: fixed` at 4 (shell.css), so a popover inside the bar would open behind
 * the Mikser. While it is open the bar is lifted to 902: above the floating bar (900) and
 * a takeover (901), below the close and usage dialogs (950). Nothing overlaps the bar's own
 * 66 px strip, so the lift changes only where the popover itself is drawn.
 *
 * THE POPOVER'S FRAME IS THE SITE'S SPONSOR RED, AND IT MOVES LIKE THE SITE'S (owner, 25 Sep
 * 2026: "make it red like on the website, with an animation like the website's but 5 times
 * slower, on its frame"). Every value is the site's own, `Website/synfonos-site/public/css/
 * site.css`:
 *   #db61a2 = rgb(219, 97, 162)   the sponsor red: `.btn-sponsor` border/heart (:589-590),
 *                                 `.nav-sponsor` border at .75 and its glow
 *                                 `0 0 24px -4px rgba(219, 97, 162, .6)` (:600-601)
 *   rgba(255, 122, 184, .95)      the light that travels round `.nav-sponsor`'s edge — a 2 px
 *                                 conic stroke, `transparent 0 72%, … 86%, transparent 97%`
 *                                 (:603-605)
 *   line-spin 3.4s linear infinite  its motion (:605); `@property --line-a` + `@keyframes
 *                                 line-spin { to { --line-a: 360deg } }` (:232-233)
 * Here: the same stroke, the same stops, the same linear turn, at 3.4 s x 5 = 17 s.
 * `sponsor.test.mjs` reads site.css and fails if any of these stop matching it.
 *
 * LIGHT AND DARK. The site is dark only. On the dark `--raised` the site's own values hold
 * (the .75 edge is 3.51:1). On the light one a .75 edge washes out to 2.44:1, so the edge is
 * the same red at full strength (3.33:1), and the travelling light is that red too — the
 * site's pale #ff7ab8 is LIGHTER than the edge on a light ground (2.29:1) and would read as
 * a gap running round the frame instead of a light.
 *
 * REDUCED MOTION: the frame stays red and still — the travelling light is removed rather than
 * frozen at one spot, the popover appears and goes without its grow/fade, and
 * `--sponsor-pop-dur` reads 0 so `sponsor.js` hides it at once. */

:root {
  --sponsor-edge: #db61a2;
  --sponsor-glint: rgba(219, 97, 162, 0.95);
  --sponsor-glow: rgba(219, 97, 162, 0.6);
  --sponsor-line-dur: 17s; /* site.css:605 line-spin 3.4s x 5 */
  --sponsor-pop-dur: 200ms;
  --sponsor-heart-a: #2f7fdd;
  --sponsor-heart-b: #2f7fdd;
  --sponsor-ring: rgba(47, 127, 221, 0.45);
  --sponsor-wash: rgba(47, 127, 221, 0.1);
}
:root[data-theme='dark'] {
  --sponsor-edge: rgba(219, 97, 162, 0.75);
  --sponsor-glint: rgba(255, 122, 184, 0.95);
  --sponsor-heart-a: #2f7fdd;
  --sponsor-heart-b: #1cb083;
  --sponsor-ring: rgba(47, 127, 221, 0.6);
  --sponsor-wash: rgba(47, 127, 221, 0.16);
}

.titlebar:has(.sponsor-pop:not([hidden])) { z-index: 902; }

.sponsor { position: relative; display: inline-flex; align-items: center; margin-left: 6px; }

.sponsor-btn {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--sponsor-ring);
  background: var(--raised);
  color: var(--ink-1);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.sponsor-btn:hover { background: var(--sponsor-wash); color: var(--ink-1); }
.sponsor-btn[aria-expanded='true'] { background: var(--sponsor-wash); border-color: var(--sponsor-heart-a); }
.sponsor-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--focus-offset); }

.sponsor-heart { display: block; width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease); }
.sponsor-btn:hover .sponsor-heart { transform: scale(1.12); }
.sponsor-stop-a { stop-color: var(--sponsor-heart-a); }
.sponsor-stop-b { stop-color: var(--sponsor-heart-b); }

.sponsor-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: -8px;
  z-index: 1;
  width: 300px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  padding: 16px;
  background: var(--raised);
  border: 1px solid var(--sponsor-edge);
  border-radius: var(--r-lg);
  box-shadow: var(--elev-pop), 0 0 24px -4px var(--sponsor-glow);
  color: var(--ink-1);
  text-align: left;
  cursor: default;
  /* Grows out of the heart: the heart's centre is 8 + 16 px in from this box's left edge
   * and 10 + 16 px above its top (`left: -8px`, `top: calc(100% + 10px)`, a 32 px button). */
  transform-origin: 24px -26px;
  animation: sponsor-pop-in var(--sponsor-pop-dur) var(--ease-enter) both;
}
.sponsor-pop[hidden] { display: none; }
.sponsor-pop.is-leaving {
  animation: sponsor-pop-out var(--sponsor-pop-dur) var(--ease-exit) both;
  pointer-events: none;
}

/* The site's travelling light, on the frame. A 2 px ring over the 1 px edge (the site's
 * `inset: -2px; padding: 2px`), masked to the ring, turning once every 17 s. */
@property --sponsor-line-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes sponsor-line-spin { to { --sponsor-line-a: 360deg; } }
.sponsor-pop::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: calc(var(--r-lg) + 1px);
  padding: 2px;
  pointer-events: none;
  background: conic-gradient(from var(--sponsor-line-a), transparent 0 72%, var(--sponsor-glint) 86%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: sponsor-line-spin var(--sponsor-line-dur) linear infinite;
}

@keyframes sponsor-pop-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes sponsor-pop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.94); } }

@media (prefers-reduced-motion: reduce) {
  :root { --sponsor-pop-dur: 0ms; }
  .sponsor-pop, .sponsor-pop.is-leaving { animation: none; }
  .sponsor-pop::before { animation: none; display: none; }
}

.sponsor-title { margin: 0; font-size: var(--size-title); font-weight: 600; letter-spacing: -0.01em; color: var(--ink-1); }
.sponsor-goal { margin: 0; display: grid; gap: 4px; }
.sponsor-goal-label {
  margin: 0;
  font-size: var(--size-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sponsor-goal-text { margin: 0; font-size: var(--size-sub); line-height: 1.5; color: var(--ink-2); }

.sponsor-actions { display: grid; gap: 8px; margin-top: 2px; }
.sponsor-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--sunken);
  color: var(--ink-1);
  font: inherit;
  font-size: var(--size-body);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.sponsor-link:hover { background: var(--line); color: var(--ink-1); border-color: var(--ink-4); }
.sponsor-link:active { background: var(--line); color: var(--ink-1); }
.sponsor-link:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--focus-offset); }
.sponsor-link-icon { flex: none; width: 18px; height: 18px; color: var(--ink-2); }
.sponsor-link-label { flex: 1 1 auto; }
.sponsor-link-ext { flex: none; width: 14px; height: 14px; color: var(--ink-3); }

.sponsor-hint { margin: 0; font-size: var(--size-label); line-height: 1.4; color: var(--ink-3); }
.sponsor-status { margin: 0; font-size: var(--size-sub); line-height: 1.4; color: var(--critical); }
.sponsor-status[hidden] { display: none; }

@media (forced-colors: active) {
  .sponsor-btn { border: 1px solid ButtonText; background: ButtonFace; }
  .sponsor-btn[aria-expanded='true'] { outline: 2px solid Highlight; outline-offset: 1px; }
  .sponsor-btn:focus-visible, .sponsor-link:focus-visible { outline: 2px solid Highlight; }
  .sponsor-heart path { fill: ButtonText; }
  .sponsor-pop { border: 1px solid CanvasText; box-shadow: none; }
  .sponsor-pop::before { display: none; }
  .sponsor-link { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
}