/* Atlas nudge ticker (owner's handoff, 2026-10-18). Black pills, yellow action, Inter Tight.
   On device it floats 10px above the native glass bar (its zone is 76px + the safe area).
   2026-10-23: the whole pill at about 0.85 (64 -> 54px tall, 300 -> 280 wide), his word: smaller. */
.ant-wrap {
  position: fixed; left: 0; right: 0; z-index: 60;
  /* the pills land 6px (about 1.5mm) above the glass bar: the native side reports the bar's top edge as --nav-top;
     40px of the wrap is shadow room below the pills, so the wrap's bottom sits 34px under that edge */
  bottom: calc(var(--nav-top, calc(76px + env(safe-area-inset-bottom, 0px))) - 28px); /* owner 2026-10-19: ~1mm higher (12px above the bar) */
  overflow: hidden;
  padding: 6px 0 40px 16px; /* the bottom room lets the pill shadow fade out instead of cutting off */
  font-family: "Inter Tight", system-ui, sans-serif;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  animation: ant-in 0.4s cubic-bezier(0.22, 0.8, 0.24, 1);
  touch-action: none; /* the strip owns the finger: sideways swipes it, down puts it away */
}
.ant-single { padding-left: 16px; padding-right: 16px; -webkit-mask-image: none; mask-image: none; }
.ant-single .ant-pill { width: 100%; margin-right: 0; }
/* put away: the strip shrinks into the spot where the tab lands (center, on the bar's top edge) */
.ant-bye { transform-origin: var(--ball-x, 50%) calc(100% - 44px); transform: scale(.1) !important; opacity: 0; transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .26s ease !important; }

/* owner 2026-10-23 (his image): the put-away nudges are a yellow tab rising from the top edge of the tab bar, the sparkle
   and the count in black. Its foot tucks under the bar (the native bar paints over it). 2026-10-23 pm: it rests above the
   tab you are on (--ball-x from index.html's __affordBallSync, the native bar's tab centers) and is a touch smaller (40px). */
.ant-ball {
  position: fixed; left: var(--ball-x, 50%); z-index: 60; transform: translateX(-50%);
  bottom: calc(var(--nav-top, calc(76px + env(safe-area-inset-bottom, 0px))) - 10px);
  height: 40px; min-width: 84px; padding: 0 16px 9px; box-sizing: border-box;
  border: none; border-radius: 16px 16px 0 0; background: #FFD60A; color: #000000;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: "Inter Tight", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  animation: ant-pop .38s cubic-bezier(.22, 1.35, .36, 1) both;
  transition: left .32s cubic-bezier(.22, .8, .3, 1); /* a tab switch slides it over */
}
.ant-ball svg { width: 18px; height: 18px; }
.ant-ball svg path { fill: #000000; }
.ant-ball:active { transform: translateX(-50%) scale(.96); }
.ant-count { font-size: 19px; font-weight: 800; line-height: 1; color: #000000; }
@keyframes ant-pop { from { opacity: 0; transform: translateX(-50%) translateY(14px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

.ant-track {
  display: flex; width: max-content;
  will-change: transform; /* moved by the component's frame loop, not a CSS keyframe */
}
.ant-pill {
  flex-shrink: 0; width: 280px; margin-right: 8px; height: 54px; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 4px 15px; /* 2026-10-23: the pill at 0.85: 4px above and below the words so they never touch the edge; 6px at the right so the x's gray sits 10px in, the same as the black above the yellow */
  border-radius: 27px; background: #000000; color: #FFFFFF;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22); /* soft, and the wrap leaves room so it never ends in a hard line */
}
.ant-spark { flex-shrink: 0; width: 13px; height: 13px; }
.ant-text {
  flex: 1; min-width: 0; text-align: left;
  border: none; background: transparent; padding: 0; color: #FFFFFF;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
/* owner 2026-10-23: at most 3 lines (3 x 15px = 45px inside the pill's 46px), clamped with an ellipsis, never past the edge */
.ant-tx { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 45px; }
/* owner 2026-10-22 pm (his spec): the yellow is a pill padded so the word sits left of the x's disc; 2026-10-23: at 0.85 (40 -> 34px) */
.ant-action {
  position: relative; flex-shrink: 0; height: 34px; margin-right: 8px; padding: 0 28px 0 10px;
  border: none; border-radius: 17px; background: #FFD60A; color: #1C1C1E;
  font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; transition: transform 0.15s ease;
}
.ant-action:active { transform: scale(0.95); }
/* the x: a gray disc on the yellow's right end (8px past it), ringed in black so the yellow tapers to points around it;
   10px of black above the yellow = 10px from the gray disc to the pill's edge. 2026-10-23: at 0.85 (36 -> 30px, ring 3px) */
.ant-x {
  position: absolute; right: -8px; top: 50%; margin-top: -15px;
  width: 30px; height: 30px; box-sizing: border-box; border-radius: 50%;
  background: #3A3A3C; border: 3px solid #000000; color: #FFFFFF;
  display: grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.ant-x::before { content: ""; position: absolute; inset: -7px; } /* a 44px tap area around the 30px disc */
.ant-x svg { width: 8px; height: 8px; display: block; }
.ant-x:active { background: #6E6E73; }

/* pages under the ticker scroll their last item above it and the bar */
html.hasticker .wrap { padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)); } /* -10: the pill shrank 64 -> 54 (2026-10-23) */
html.hasticker body.wzfit[data-tab="home"] .wznav { bottom: calc(var(--nav-top, calc(76px + env(safe-area-inset-bottom, 0px))) + 89px); } /* owner 2026-10-22: Back/Next 8px above the strip (strip top = nav-top + 81 since the 54px pill) */
html.hasball body.wzfit[data-tab="home"] .wznav { bottom: calc(var(--nav-top, calc(76px + env(safe-area-inset-bottom, 0px))) + 40px); } /* the tab is out: the bar clears it (tab top = nav-top + 30) */

/* owner 2026-10-23 night: no carousel and no yellow tab on the Ask Atlas screen (his word); the screen simply covers them */

@keyframes ant-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* People who turn off motion: the entry fade only; the strip still swipes by hand */
@media (prefers-reduced-motion: reduce) {
  .ant-wrap, .ant-ball { animation: none; }
}