/* Answer Prayers · "New" badge on the Testimonies chip (v31n draft, add-only). Markup from testimonies.js:
   <span class="t-new" aria-hidden="true"><i class="tn-glow"></i><i class="tn-fx tn-a"></i><i class="tn-fx tn-b"></i><i class="tn-fx tn-c"></i><b class="tn-pill">New</b></span>
   (the chip itself carries the aria-label "Testimonies, New testimony").
   Motion (see minty-template/PRINCIPLES.md): intro = anticipation crouch → stretch up → squash on landing → follow-through;
   idle = one soft beat every 6 s; tap = squash, then lift and fade (.out). One themed accent per look (tn-a/b/c).
   Rules: transform + opacity only (gradients, shadows and shapes are static), at most 4 nodes, static under
   prefers-reduced-motion, paused while the tab is hidden (html.ap-hidden), pointer-events:none, no confetti. */
.t-chip{position:relative}
/* headroom so the badge, its overshoot and fx never clip: the phone tab bar is an overflow-x scroller (overflow-y:hidden),
   so while a badge shows it grows upward by --tn-room (chips stay put; the empty band passes taps through; app.js quickTop() subtracts it) */
@media (max-width:859px){.quick:has(.t-new){--tn-room:64px;padding-top:calc(2px + var(--tn-room));padding-bottom:6px;bottom:calc(max(6px,env(safe-area-inset-bottom)) + 12px);pointer-events:none}}
.t-new{position:absolute;top:-10px;inset-inline-end:0;z-index:1;pointer-events:none;transform-origin:50% 100%;
  --tn-bg:linear-gradient(180deg,#f7d98a,#e3a530);--tn-ink:#3a2504;--tn-ring:rgba(255,255,255,.85);--tn-glow:rgba(255,206,110,.75);
  animation:tn-in .9s cubic-bezier(.3,.7,.3,1) both}
.tn-pill{position:relative;display:block;font:800 9px/1 var(--f-body);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  padding:3.5px 6px 3px;border-radius:999px;background:var(--tn-bg);color:var(--tn-ink);
  box-shadow:0 0 0 1.5px var(--tn-ring),0 3px 10px -3px var(--tn-glow);transform-origin:50% 100%;animation:tn-beat 6s ease-in-out 1s infinite}
:root[dir="rtl"] .tn-pill,:lang(ar) .tn-pill{letter-spacing:0;font-size:10px;padding-top:3px}
.tn-glow{position:absolute;inset:-9px -10px;border-radius:999px;background:radial-gradient(closest-side,var(--tn-glow),transparent);opacity:.55;
  animation:tn-glow 6s ease-in-out 1s infinite}
.tn-fx{position:absolute;display:block;pointer-events:none}
.t-new.out{animation:tn-out .5s cubic-bezier(.5,0,.2,1) forwards}
.t-new.out .tn-glow{animation:tn-flash .5s ease-out forwards}
.t-new.out .tn-pill,.t-new.out .tn-fx,.t-new.out .tn-fx::before,.t-new.out .tn-fx::after{animation-play-state:paused}
@keyframes tn-in{0%{opacity:0;transform:translateY(3px) scale(.2)}20%{opacity:1;transform:translateY(5px) scale(.66,.48)}
  46%{transform:translateY(-6px) scale(.9,1.2)}63%{transform:translateY(0) scale(1.16,.84)}80%{transform:scale(.96,1.05)}100%{opacity:1;transform:none}}
@keyframes tn-beat{0%,82%,100%{transform:none}86%{transform:scale(1.07,.9)}90%{transform:translateY(-2.5px) scale(.95,1.07)}94%{transform:scale(1.03,.97)}97%{transform:scale(.99,1.01)}}
@keyframes tn-glow{0%,80%,100%{opacity:.5}90%{opacity:.95}}
@keyframes tn-out{0%{opacity:1;transform:none}28%{opacity:1;transform:translateY(1px) scale(1.18,.78)}100%{opacity:0;transform:translateY(-14px) scale(.7,1.3)}}
@keyframes tn-flash{0%{opacity:.6}25%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(1.6)}}

/* ---- Light (Dawn): soft sunrise rays turning slowly behind the pill ---- */
.tn-a{inset:-15px -14px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,196,90,.55) 0deg 5deg,transparent 5deg 22deg);
  -webkit-mask:radial-gradient(closest-side,#000 35%,transparent);mask:radial-gradient(closest-side,#000 35%,transparent);opacity:.5;
  animation:tn-rays 6s ease-in-out 1s infinite}
@keyframes tn-rays{0%{opacity:.45;transform:rotate(0) scale(.92)}82%{opacity:.45;transform:rotate(14deg) scale(.92)}91%{opacity:.95;transform:rotate(22deg) scale(1.12)}100%{opacity:.45;transform:rotate(30deg) scale(.92)}}

/* ---- Dark (Dawn Night) + anything dark without its own: starlight twinkle ---- */
[data-style="4"] .t-new{--tn-bg:linear-gradient(180deg,#ffe3a0,#f2b84a);--tn-ink:#1a1306;--tn-ring:rgba(10,15,34,.9);--tn-glow:rgba(246,200,104,.6)}
[data-style="4"]:not([data-month]):not([data-theme-id]) .tn-a,[data-style="4"]:not([data-month]):not([data-theme-id]) .tn-b{inset:auto;width:9px;height:9px;border-radius:0;background:#fff4d6;-webkit-mask:none;mask:none;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:.85;animation:tn-twinkle 6s ease-in-out 1.3s infinite}
[data-style="4"]:not([data-month]):not([data-theme-id]) .tn-a{top:-7px;inset-inline-start:-7px}
[data-style="4"]:not([data-month]):not([data-theme-id]) .tn-b{width:6px;height:6px;bottom:-4px;inset-inline-end:-5px;animation-delay:1.7s}
@keyframes tn-twinkle{0%,74%,100%{opacity:.35;transform:scale(.55) rotate(0)}84%{opacity:1;transform:scale(1.15) rotate(45deg)}92%{opacity:.6;transform:scale(.8) rotate(60deg)}}

/* ---- Mint: fresh mint shimmer sweeping through the pill + a leaf sparkle ---- */
:root:not(#_a)[data-month="mint"] .t-new{--tn-bg:linear-gradient(180deg,#8ff7d2,#3ef0b0);--tn-ink:#03140d;--tn-ring:#05070a;--tn-glow:rgba(62,240,176,.65)}
:root:not(#_a)[data-month="mint"] .tn-pill{font-family:var(--f-mono,var(--f-body))}
:root:not(#_a)[data-month="mint"] .tn-a{inset:0;border-radius:999px;overflow:hidden;background:none;-webkit-mask:none;mask:none;opacity:1;animation:none;z-index:1}
:root:not(#_a)[data-month="mint"] .tn-a::before{content:"";position:absolute;top:-4px;bottom:-4px;left:0;width:10px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  transform:translateX(-14px) skewX(-20deg);animation:tn-sweep 6s cubic-bezier(.45,0,.55,1) 1s infinite}
:root:not(#_a)[data-month="mint"] .tn-b{inset:auto;top:-8px;inset-inline-end:-6px;width:9px;height:9px;border-radius:0 100% 0 100%;background:#3ef0b0;
  box-shadow:0 0 6px #3ef0b0;opacity:0;animation:tn-leaf 6s ease-out 1s infinite}
@keyframes tn-sweep{0%,78%{transform:translateX(-14px) skewX(-20deg)}94%,100%{transform:translateX(64px) skewX(-20deg)}}
@keyframes tn-leaf{0%,88%{opacity:0;transform:scale(.2) rotate(-30deg)}93%{opacity:1;transform:scale(1.15) rotate(10deg)}100%{opacity:0;transform:scale(.8) rotate(25deg) translateY(-3px)}}

/* ---- v36 (draft): Itiswritten: Pink Neon: hot-pink pill with a soft neon glow (uses the default beat + glow motion) ---- */
:root:not(#_a):not(#_b)[data-theme-id="pinkneon"] .t-new{--tn-bg:linear-gradient(180deg,#ff7cc4,#ff3ea5);--tn-ink:#0a0509;--tn-ring:#0a0509;--tn-glow:rgba(255,62,165,.8)}
:root:not(#_a):not(#_b)[data-theme-id="pinkneon"] .tn-pill{font-family:var(--f-mono,var(--f-body))}


/* ---- Arcade: 8-bit pop (stepped), pixel corners that blink, a scanline ---- */
:root:not(#_a):not(#_b)[data-theme-id="arcade"] .t-new{--tn-bg:#ffd23f;--tn-ink:#0b0a26;--tn-glow:rgba(127,227,255,.55);animation:tn-in-px .7s steps(7,end) both}
:root:not(#_a):not(#_b)[data-theme-id="arcade"] .tn-pill{font:400 7px/1 var(--f-px,monospace);letter-spacing:0;border-radius:0;padding:4px 5px 3px;
  box-shadow:2px 0 0 #0b0a26,-2px 0 0 #0b0a26,0 2px 0 #0b0a26,0 -2px 0 #0b0a26,3px 3px 0 #ff3fa4;animation:tn-beat-px 6s steps(1,end) 1s infinite}
:root:not(#_a):not(#_b)[data-theme-id="arcade"] .tn-glow{border-radius:0;background:radial-gradient(closest-side,rgba(127,227,255,.6),transparent);animation:tn-glow 6s steps(3,end) 1s infinite}
:root:not(#_a):not(#_b)[data-theme-id="arcade"] .tn-a{inset:-5px;border-radius:0;-webkit-mask:none;mask:none;background:
  linear-gradient(#7fe3ff,#7fe3ff) 0 0/3px 3px,linear-gradient(#7fe3ff,#7fe3ff) 100% 0/3px 3px,linear-gradient(#7fe3ff,#7fe3ff) 0 100%/3px 3px,linear-gradient(#7fe3ff,#7fe3ff) 100% 100%/3px 3px;
  background-repeat:no-repeat;opacity:1;animation:tn-blink 6s steps(1,end) 1s infinite}
:root:not(#_a):not(#_b)[data-theme-id="arcade"] .tn-b{inset:0;overflow:hidden;z-index:1}
:root:not(#_a):not(#_b)[data-theme-id="arcade"] .tn-b::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.75);
  transform:translateY(-3px);animation:tn-scan 6s steps(6,end) 1s infinite}
:root:not(#_a):not(#_b)[data-theme-id="arcade"] .t-new.out{animation:tn-out-px .45s steps(5,end) forwards}
@keyframes tn-in-px{0%{opacity:0;transform:scale(.2)}20%{opacity:1;transform:scale(.6,.4)}45%{transform:scale(.9,1.25) translateY(-4px)}65%{transform:scale(1.2,.8)}85%{transform:scale(.95,1.05)}100%{opacity:1;transform:none}}
@keyframes tn-beat-px{0%,84%,100%{transform:none}86%{transform:scale(1.1,.85)}89%{transform:translateY(-3px) scale(.92,1.1)}93%{transform:none}}
@keyframes tn-blink{0%,84%,100%{opacity:1}86%,92%{opacity:0}89%,95%{opacity:1}}
@keyframes tn-scan{0%,84%{transform:translateY(-3px)}100%{transform:translateY(16px)}}
@keyframes tn-out-px{0%{opacity:1;transform:none}30%{opacity:1;transform:scale(1.22,.74)}60%{opacity:0}70%{opacity:1;transform:scale(.6,1.4) translateY(-6px)}100%{opacity:0;transform:scale(.2,2) translateY(-12px)}}

/* ---- Harvest Gold (fall): one leaf drifting down past the pill ---- */
:root:not(#_a)[data-month="harvest"] .t-new{--tn-bg:linear-gradient(180deg,#f6c46c,#e8a93a);--tn-ink:#2a1606;--tn-ring:#1a100a;--tn-glow:rgba(243,154,74,.6)}
:root:not(#_a)[data-month="harvest"] .tn-a{inset:auto;top:-12px;inset-inline-start:-10px;width:9px;height:9px;border-radius:0 100% 0 100%;-webkit-mask:none;mask:none;
  background:linear-gradient(135deg,#f39a4a,#c8591f);opacity:.9;transform:translate(0,14px) rotate(40deg);animation:tn-drift 6s ease-in-out 1s infinite}
@keyframes tn-drift{0%,70%{opacity:0;transform:translate(6px,-6px) rotate(-30deg)}76%{opacity:1}82%{transform:translate(-3px,3px) rotate(20deg)}88%{transform:translate(4px,8px) rotate(-10deg)}
  94%{opacity:.9;transform:translate(0,14px) rotate(40deg)}100%{opacity:0;transform:translate(1px,18px) rotate(50deg)}}

/* ---- Silent Night (Christmas): the star above, snow glints falling ---- */
:root:not(#_a)[data-month="silentnight"] .t-new{--tn-bg:linear-gradient(180deg,#fff1cc,#ffd27f);--tn-ink:#0a1226;--tn-ring:#040815;--tn-glow:rgba(255,226,160,.6)}
:root:not(#_a)[data-month="silentnight"] .tn-a{inset:auto;top:-13px;left:50%;margin-left:-5px;width:10px;height:10px;border-radius:0;-webkit-mask:none;mask:none;background:#fff6dc;
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);opacity:.9;animation:tn-twinkle 6s ease-in-out 1s infinite}
:root:not(#_a)[data-month="silentnight"] .tn-b,:root:not(#_a)[data-month="silentnight"] .tn-c{inset:auto;top:-6px;width:3px;height:3px;border-radius:50%;background:#fff;
  opacity:0;animation:tn-snow 6s linear 1.2s infinite}
:root:not(#_a)[data-month="silentnight"] .tn-b{inset-inline-start:2px}
:root:not(#_a)[data-month="silentnight"] .tn-c{inset-inline-end:3px;width:2px;height:2px;animation-delay:1.6s}
@keyframes tn-snow{0%,70%{opacity:0;transform:translate(0,-4px)}76%{opacity:1}100%{opacity:0;transform:translate(3px,22px)}}

/* ---- Christmas (Star of Bethlehem) + parked Bethlehem: a star with a soft falling beam ---- */
:root:not(#_a):is([data-month="christmas"],[data-month="bethlehem"]) .t-new{--tn-bg:linear-gradient(180deg,#ffe3a0,#f2c46b);--tn-ink:#070d24;--tn-ring:#070d24;--tn-glow:rgba(242,196,107,.6)}
:root:not(#_a):is([data-month="christmas"],[data-month="bethlehem"]) .tn-a{inset:auto;top:-14px;inset-inline-end:-2px;width:11px;height:11px;border-radius:0;-webkit-mask:none;mask:none;background:#fff3cf;
  clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%);opacity:.9;animation:tn-twinkle 6s ease-in-out 1s infinite}
:root:not(#_a):is([data-month="christmas"],[data-month="bethlehem"]) .tn-b{inset:auto;top:-4px;inset-inline-end:3px;width:2px;height:16px;background:linear-gradient(#fff3cf,transparent);
  transform-origin:50% 0;opacity:.4;animation:tn-beam 6s ease-in-out 1s infinite}
@keyframes tn-beam{0%,80%,100%{opacity:.25;transform:scaleY(.5)}90%{opacity:.8;transform:scaleY(1)}}

/* ---- Candlelight (parked): a candle flame flickering above ---- */
:root:not(#_a)[data-month="candlelight"] .tn-a{inset:auto;top:-13px;left:50%;margin-left:-3px;width:6px;height:10px;border-radius:50% 50% 50% 50%/65% 65% 35% 35%;-webkit-mask:none;mask:none;
  background:radial-gradient(circle at 50% 70%,#fff4c8,#f5a742 60%,transparent 75%);transform-origin:50% 100%;opacity:.95;animation:tn-flame 1.8s ease-in-out 1s infinite}
@keyframes tn-flame{0%,100%{transform:scale(1,1) rotate(0)}30%{transform:scale(.9,1.12) rotate(-4deg)}60%{transform:scale(1.06,.94) rotate(3deg)}}

/* ---- New Life (spring): a little sun rising behind the pill ---- */
:root:not(#_a)[data-month="newlife"] .t-new{--tn-bg:linear-gradient(180deg,#6fbf87,#3c8a57);--tn-ink:#fff;--tn-ring:#fff;--tn-glow:rgba(255,214,150,.8)}
:root:not(#_a)[data-month="newlife"] .tn-a{inset:auto;top:-9px;left:50%;margin-left:-9px;width:18px;height:18px;border-radius:50%;-webkit-mask:none;mask:none;z-index:-1;
  background:radial-gradient(circle,#ffe7b0 30%,rgba(255,220,170,.5) 55%,transparent 70%);opacity:.9;animation:tn-rise 6s ease-in-out 1s infinite}
@keyframes tn-rise{0%,76%,100%{opacity:.5;transform:translateY(5px) scale(.8)}90%{opacity:1;transform:translateY(-1px) scale(1.1)}}

/* ---- Spring Garden: a butterfly resting, wings flutter on the beat ---- */
:root:not(#_a)[data-month="springgarden"] .t-new{--tn-bg:linear-gradient(180deg,#d77aa0,#b8507a);--tn-ink:#fff;--tn-ring:#fff;--tn-glow:rgba(184,80,122,.45)}
:root:not(#_a)[data-month="springgarden"] .tn-a,:root:not(#_a)[data-month="springgarden"] .tn-b{inset:auto;top:-8px;inset-inline-start:-6px;width:6px;height:8px;-webkit-mask:none;mask:none;
  background:#8f7be3;border-radius:80% 20% 80% 20%;transform-origin:100% 100%;opacity:.95;animation:tn-flap 6s ease-in-out 1s infinite}
:root:not(#_a)[data-month="springgarden"] .tn-b{inset-inline-start:0;background:#a99cf5;border-radius:20% 80% 20% 80%;transform-origin:0 100%;animation-name:tn-flap2}
@keyframes tn-flap{0%,80%,100%{transform:none}84%,92%{transform:scaleX(.25)}88%,96%{transform:none}}
@keyframes tn-flap2{0%,80%,100%{transform:none}84%,92%{transform:scaleX(.25)}88%,96%{transform:none}}

/* ---- Sunlit Shore (summer): a gentle wave ring spreading from the pill ---- */
:root:not(#_a)[data-month="sunlitshore"] .t-new{--tn-bg:linear-gradient(180deg,#5fc0e6,#2a8fbf);--tn-ink:#fff;--tn-ring:#fff;--tn-glow:rgba(90,184,230,.55)}
:root:not(#_a)[data-month="sunlitshore"] .tn-a{inset:-2px;border-radius:999px;-webkit-mask:none;mask:none;background:none;box-shadow:0 0 0 1.5px rgba(42,143,191,.6);opacity:0;animation:tn-ripple 6s ease-out 1s infinite}
@keyframes tn-ripple{0%,84%{opacity:0;transform:scale(1)}88%{opacity:.9}100%{opacity:0;transform:scale(1.5,1.9)}}

/* ---- Summer Nights: two fireflies glowing and drifting ---- */
:root:not(#_a)[data-month="summernights"] .t-new{--tn-bg:linear-gradient(180deg,#f8d08a,#f4b860);--tn-ink:#120c26;--tn-ring:#120c26;--tn-glow:rgba(210,240,122,.5)}
:root:not(#_a)[data-month="summernights"] .tn-a,:root:not(#_a)[data-month="summernights"] .tn-b{inset:auto;width:4px;height:4px;border-radius:50%;-webkit-mask:none;mask:none;clip-path:none;
  background:#e6ff9a;box-shadow:0 0 6px 2px rgba(210,240,122,.8);opacity:.7;animation:tn-fly 6s ease-in-out 1s infinite}
:root:not(#_a)[data-month="summernights"] .tn-a{top:-8px;inset-inline-start:-6px}
:root:not(#_a)[data-month="summernights"] .tn-b{bottom:-6px;inset-inline-end:-6px;animation-delay:2.5s}
@keyframes tn-fly{0%,100%{opacity:.2;transform:translate(0,0)}40%{opacity:.9;transform:translate(3px,-3px)}70%{opacity:.4;transform:translate(-2px,-5px)}}

/* ---- pause when hidden, static under reduced motion ---- */
html.ap-hidden .t-new,html.ap-hidden .t-new *,html.ap-hidden .t-new *::before{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .t-new,.t-new *,.t-new *::before,.t-new *::after{animation:none!important}
  .t-new.out{opacity:0}
  :root:not(#_a)[data-month="mint"] .tn-b,:root:not(#_a)[data-month="silentnight"] .tn-b,:root:not(#_a)[data-month="silentnight"] .tn-c,:root:not(#_a)[data-month="sunlitshore"] .tn-a{opacity:0}
}