/* Launch countdown — lives inside the shared nav bar (base.html, every page),
   right after the logo. Target: 2026-10-01 00:00 US Central Time, computed
   in static/js/countdown.js. Design approved as a Claude Artifact preview
   (nav-embedded version, eyes centered, 4-fingertip grip) — 2026-09-15. */

.wwb-cd {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 34px;
  flex: none;
}

.wwb-cd-pill {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--accent-2);
  white-space: nowrap;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 7px;
  padding: 9px 12px;
  text-shadow: 0 0 10px var(--accent-glow);
}

.wwb-cd-unit {
  width: 200px;
  height: 60px;
  user-select: none;
  filter: drop-shadow(0 0 10px var(--accent-glow));
}

.wwb-cd-svg { display: block; width: 100%; height: 100%; }

.wwb-cd-digits {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--cyan-2);
  text-shadow: 0 0 5px var(--cyan-glow);
  font-variant-numeric: tabular-nums;
}

.wwb-cd-cell { display: inline-block; width: 9px; height: 20px; overflow: hidden; position: relative; }
.wwb-cd-strip { display: flex; flex-direction: column; transition: transform .4s cubic-bezier(.4, 0, .2, 1); }
.wwb-cd-strip i { height: 20px; line-height: 20px; font-style: normal; text-align: center; }
.wwb-cd-sep { padding: 0 1px; opacity: .65; }
.wwb-cd-live { font-size: 11.5px; letter-spacing: .06em; }

/* Pupils glance to a new random spot every couple of seconds — see
   static/js/countdown.js startEyeLook(). */
.wwb-cd-pupil-grp { transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) { .wwb-cd-pupil-grp { transition: none; } }

@media (max-width: 768px) {
  /* nav-links collapses into the hamburger drawer at this breakpoint too,
     so the bar is short on room for both the logo and the toggle button. */
  .wwb-cd { margin-left: 14px; }
  .wwb-cd-pill { display: none; }
}

@media (max-width: 480px) {
  /* Small phone — keep the bar to logo + hamburger only. */
  .wwb-cd { display: none; }
}