/* ============================================================
 *  OneTab Studio — AGE column polish (additive, no bundle edit)
 *  · uniform fixed-width age pill (like SHORT/LONG badges)
 *  · detailed, meaning-driven mood faces with calm animation
 *  Applied by assets/onetab-age-fix.js (decorates rendered rows).
 * ============================================================ */

/* the age cell: pill + face as one aligned unit, same across rows */
.age-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.age-wrap .badge.age-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;               /* uniform width — fits "265 days"; every pill equal */
  height: 24px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
}
.age-face {
  width: 26px; height: 26px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.age-face svg { width: 22px; height: 22px; display: block; overflow: visible; }

/* ── animations: subtle, slow, detailed — opt-out via reduced-motion ── */
@media (prefers-reduced-motion: no-preference) {
  /* happy: gentle bob + soft blink */
  .af-happy       { animation: af-bob 2.6s ease-in-out infinite; transform-origin: 11px 11px; }
  .af-happy .af-blush { animation: af-blush 3s ease-in-out infinite; }
  /* content: slow blink only */
  .af-content .af-eye { animation: af-blink 4s infinite; transform-origin: center; }
  /* concerned: brow flicker */
  .af-concerned .af-brow { animation: af-browfret 3.4s ease-in-out infinite; transform-origin: center; }
  /* worried: sweat drop slides + swells */
  .af-worried .af-sweat  { animation: af-sweat 3s ease-in-out infinite; transform-origin: center top; }
  /* dizzy: slow head tilt + spiral spin (the "head-spinning") */
  .af-dizzy       { animation: af-tilt 3.2s ease-in-out infinite; transform-origin: 11px 11px; }
  .af-dizzy .af-swirl { animation: af-spin 2.4s linear infinite; transform-origin: center; transform-box: fill-box; }
  /* crying: tears fall in a loop */
  .af-crying .af-tear { animation: af-tear 1.9s ease-in infinite; transform-origin: center top; }
  .af-crying .af-tear.t2 { animation-delay: .9s; }
  /* exhausted: slow droop + faint puff */
  .af-dead        { animation: af-droop 3.6s ease-in-out infinite; transform-origin: 11px 13px; }
  .af-dead .af-puff { animation: af-puff 3.6s ease-in-out infinite; }
}

@keyframes af-bob   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1.4px)} }
@keyframes af-blush { 0%,100%{opacity:.5} 50%{opacity:.75} }
@keyframes af-blink { 0%,92%,100%{transform:scaleY(1)} 96%{transform:scaleY(.15)} }
@keyframes af-browfret { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-.8px)} }
@keyframes af-sweat { 0%{opacity:0;transform:translateY(-1px) scale(.7)} 25%{opacity:1} 70%{opacity:1;transform:translateY(2px) scale(1)} 100%{opacity:0;transform:translateY(4px) scale(1)} }
@keyframes af-tilt  { 0%,100%{transform:rotate(-7deg)} 50%{transform:rotate(7deg)} }
@keyframes af-spin  { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes af-tear  { 0%{opacity:0;transform:translateY(0) scaleY(.6)} 20%{opacity:1} 80%{opacity:1;transform:translateY(6px) scaleY(1)} 100%{opacity:0;transform:translateY(8px) scaleY(1)} }
@keyframes af-droop { 0%,100%{transform:rotate(0)} 50%{transform:rotate(3deg) translateY(.6px)} }
@keyframes af-puff  { 0%,100%{opacity:0} 45%,60%{opacity:.6} }