/* ════════════════════════════════════════════════════════════
   Daily Dispatch — header bell + modal carousel
   ════════════════════════════════════════════════════════════ */

:root { --daily-bevel: 8px; }

/* ── Daily Dispatch modal ──────────────────────────────────── */
.modal--daily .modal__backdrop {
  background: var(--scrim-modal);
  opacity: 0; transition: opacity .2s ease-out;
}
.modal--daily.is-visible .modal__backdrop { opacity: 1; }

.daily {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: min(620px, 94vw); max-height: min(90vh, 680px);
  --daily-rim: var(--banner-azure);
  background: var(--daily-rim);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .22s ease-out, transform .4s var(--ease-out-expo);
}
.modal--daily.is-visible .daily { opacity: 1; transform: translateY(0) scale(1); }
.modal--daily.is-out .daily { opacity: 0; transform: translateY(10px) scale(.99); }
.modal--daily.is-out .modal__backdrop { opacity: 0; }
.daily::before {
  content: ""; position: absolute; inset: 1px; z-index: 0;
  background: var(--banner-fill-deep);
  border-radius: calc(var(--radius-lg) - 1px);
  pointer-events: none;
}
.daily > * { position: relative; z-index: 1; }

.daily__head {
  position: relative;
  display: flex; flex-direction: column; gap: 2px;
  padding: 34px 24px 12px 32px;
  border-bottom: 1px solid var(--banner-border);
}
.daily__kicker {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; color: var(--banner-azure-bright);
}
.daily__title {
  font-size: var(--text-xl); font-weight: 700; color: var(--banner-text);
  margin: 0; line-height: 1.2;
}
.daily__sub {
  font-size: var(--text-xs); color: var(--banner-text-faint);
  text-transform: uppercase; letter-spacing: .08em;
}
.daily__close {
  position: absolute; top: calc(var(--space-4) + 2px); right: var(--space-4);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  color: var(--banner-text-faint); background: transparent; border: none;
  cursor: pointer; transition: color var(--dur), background var(--dur);
}
.daily__close:hover { color: var(--banner-text); background: var(--banner-surface); }

/* ── Carousel stage ────────────────────────────────────────── */
.daily__stage {
  position: relative;
  flex: 1; min-height: clamp(180px, 32vh, 240px);
  overflow: hidden;
}
.daily__slide {
  position: absolute; inset: 0;
  display: flex; align-items: stretch;
  opacity: 0; pointer-events: none;
  transform: translateX(18px);
  transition: opacity .25s var(--ease-out-quint), transform .35s var(--ease-out-expo);
}
.daily__slide.is-active { opacity: 1; pointer-events: auto; transform: translateX(0); }
.daily__slide.is-exiting { opacity: 0; transform: translateX(-18px); }

.daily__slide.is-active .daily__card-title,
.daily__slide.is-active .daily__blurb,
.daily__slide.is-active .daily__cta {
  opacity: 0; transform: translateY(8px);
  animation: dailyTextIn .35s var(--ease-out-expo) forwards;
}
.daily__slide.is-active .daily__blurb { animation-delay: .06s; }
.daily__slide.is-active .daily__cta { animation-delay: .12s; }
@keyframes dailyTextIn {
  to { opacity: 1; transform: translateY(0); }
}

.daily__card {
  position: relative; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-6);
  text-align: left; color: var(--banner-text-dim);
  background: transparent; border: none; cursor: pointer;
  overflow: hidden;
}
.daily__card::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(135deg, var(--daily-accent, var(--banner-azure)) 0%, transparent 60%),
    linear-gradient(to top, color-mix(in srgb, var(--banner-fill-deep) 95%, transparent) 0%, color-mix(in srgb, var(--banner-fill-deep) 45%, transparent) 60%, transparent 100%);
  opacity: .18;
  transition: opacity var(--dur);
}
.daily__card:hover::before { opacity: .28; }
.daily__card--azure { --daily-accent: var(--banner-azure); }
.daily__card--gold { --daily-accent: var(--banner-gold); }
.daily__card--violet { --daily-accent: var(--banner-violet); }

.daily__bg {
  position: absolute; right: 16px; bottom: 16px; z-index: 0;
  color: var(--daily-accent, var(--banner-azure)); opacity: .08;
  pointer-events: none;
}
.daily__bg svg { width: 120px; height: 120px; }
.daily__scrim {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to top, var(--banner-fill-deep) 0%, transparent 55%);
  pointer-events: none;
}

.daily__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.daily__topline {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
}
.daily__kicker-inline {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--daily-accent, var(--banner-azure));
}
.daily__timer {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 7px; color: var(--banner-ink);
  border-radius: 4px;
}
.daily__timer--open { background: var(--banner-azure); }
.daily__timer--soon { background: var(--banner-gold); color: var(--banner-ink-on-gold); }
.daily__timer svg { width: 12px; height: 12px; }

.daily__card-title {
  font-size: var(--text-xl); font-weight: 700; color: var(--banner-text); line-height: 1.2;
}
.daily__blurb {
  font-size: var(--text-sm); color: var(--banner-text-dim); line-height: 1.55; max-width: 46ch;
}
.daily__meta {
  font-size: var(--text-xs); color: var(--banner-text-faint); text-transform: uppercase; letter-spacing: .08em;
}
.daily__cta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: var(--space-1);
  font-size: var(--text-sm); font-weight: 700; color: var(--daily-accent, var(--banner-azure));
}
.daily__cta svg { width: 12px; height: 12px; }

/* ── Pager (dots + count) ──────────────────────────────────── */
/* Segmented-bar pagination matching the Brief banner control, plus a mono
   "i / n" readout so it is unmistakably a multi-item control. */
.daily__pager {
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--banner-border);
}
.daily__dots {
  display: flex; justify-content: center; align-items: center; gap: 6px;
}
.daily__dot {
  width: 24px; height: 4px; padding: 20px 3px; border: none; cursor: pointer;
  background: rgba(140,190,235,.5); background-clip: content-box;
  transition: background var(--dur);
}
.daily__dot:hover { background: var(--banner-azure-bright); background-clip: content-box; }
.daily__dot.is-active { background: var(--banner-azure); background-clip: content-box; box-shadow: 0 0 8px var(--banner-azure-glow); }
.daily__dot:focus-visible { outline: 2px solid var(--banner-azure-bright); outline-offset: 3px; }
.daily__count {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--banner-text-faint);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}

/* ── Footer ────────────────────────────────────────────────── */
.daily__foot {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
}
.daily__foot-right { display: flex; gap: var(--space-2); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 560px) {
  .daily__head { padding: var(--space-4) var(--space-4) var(--space-2); }
  .daily__title { font-size: var(--text-lg); }
  .daily__card { padding: var(--space-4); }
  .daily__card-title { font-size: var(--text-lg); }
  .daily__bg { right: -40px; bottom: -40px; }
  .daily__bg svg { width: 180px; height: 180px; }
  .daily__foot { flex-direction: column; align-items: stretch; }
  .daily__foot-right { justify-content: flex-end; }
}