/* ═══════════════════════════════════════════════════════════════════
   Deals ticker — views/partials/deals_ticker.php  (site-wide 2026-11-08)
   Three modes of one component, all espresso on any page background:
     .dt            card bar (home feed, inside the content column)
     .dt.dt--strip  full-bleed strip directly under the nav (writeups, listings)
     .dt-ann        one-line announcement strip (logged-out landing, above nav)
   Marquee pauses on hover/focus and when off-screen (.dt--off, via JS).
   Reduced motion gets a static scrollable row. Tokens from wuc-tokens.css.
   Moved out of home.css; the .dt rules below are the 2026-11-07 originals.
   ═══════════════════════════════════════════════════════════════════ */
.dt {
  position: relative; display: flex; align-items: stretch;
  background: var(--wuc-espresso-dark, #1a0f06); color: var(--wuc-cream, #e8ddd0);
  border: 1px solid rgba(240,192,128,0.18); border-radius: 14px;
  overflow: hidden; min-height: 46px; margin-bottom: 16px;
  box-shadow: 0 6px 20px -12px rgba(26,15,6,0.45);
  font-family: var(--wuc-font-body, 'DM Sans', system-ui, sans-serif);
}
.dt[hidden] { display: none; }
.dt::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--wuc-copper, #c17d3c), var(--wuc-gold-highlight, #f0c080), var(--wuc-primary, #e87a35)); }
.dt-label {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px;
  background: rgba(232,122,53,0.14); border-right: 1px solid rgba(240,192,128,0.18);
  font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--wuc-gold-highlight, #f0c080);
  white-space: nowrap; text-decoration: none;
}
.dt-label .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wuc-primary, #e87a35); animation: dtPulse 2s ease-out infinite; }
.dt-label .txt-full { display: none; }
@media (min-width: 560px) { .dt-label .txt-full { display: inline; } .dt-label .txt-short { display: none; } }
@keyframes dtPulse { 0% { box-shadow: 0 0 0 0 rgba(232,122,53,.55); } 70% { box-shadow: 0 0 0 7px rgba(232,122,53,0); } 100% { box-shadow: 0 0 0 0 rgba(232,122,53,0); } }
.dt-track { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
.dt-run { display: flex; white-space: nowrap; will-change: transform; animation: dtMarquee var(--dt-speed, 42s) linear infinite; }
.dt:hover .dt-run, .dt:focus-within .dt-run, .dt.dt--off .dt-run { animation-play-state: paused; }
@keyframes dtMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.dt-item { display: inline-flex; align-items: center; gap: 9px; padding: 0 18px; height: 46px; font-size: 13.5px; color: var(--wuc-cream, #e8ddd0); position: relative; text-decoration: none; }
.dt-item:focus-visible { outline: 2px solid var(--wuc-gold-highlight, #f0c080); outline-offset: -4px; border-radius: 8px; }
.dt-item .brand { font-weight: 700; color: #fff; }
.dt-item.match .brand { color: var(--wuc-gold-highlight, #f0c080); }
.dt-item:hover .brand { text-decoration: underline; text-decoration-color: var(--wuc-gold-highlight, #f0c080); text-underline-offset: 3px; }
.dt-item .off { color: var(--wuc-cream, #e8ddd0); }
.dt-item .code { font-family: var(--wuc-font-mono, 'DM Mono', Menlo, monospace); font-size: 11.5px; background: rgba(240,192,128,0.14); color: var(--wuc-gold-highlight, #f0c080); border: 1px dashed rgba(240,192,128,0.45); padding: 1px 7px; border-radius: 5px; }
.dt-item .ends { font-size: 11px; font-weight: 600; color: #ffb199; background: rgba(232,122,53,0.16); padding: 2px 8px; border-radius: 999px; }
.dt-item .new { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0e6e5a; background: #c9efe3; padding: 2px 7px; border-radius: 999px; }
.dt-item + .dt-item::before { content: ""; position: absolute; left: -2px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--wuc-copper, #c17d3c); transform: translateY(-50%); }
.dt-cta { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-left: 1px solid rgba(240,192,128,0.18);
  font-weight: 600; font-size: 13px; color: var(--wuc-gold-highlight, #f0c080); white-space: nowrap; text-decoration: none; }
.dt-cta:hover { color: #fff; }
.dt-cta .arrow { transition: transform .15s; }
.dt-cta:hover .arrow { transform: translateX(3px); }
.dt-cta .long { display: none; }
@media (min-width: 560px) { .dt-cta .long { display: inline; } }
.dt-x { flex: none; width: 34px; display: grid; place-items: center; background: transparent; border: 0; border-left: 1px solid rgba(240,192,128,0.18);
  color: var(--wuc-cream-muted, #ddd0c0); font-size: 16px; cursor: pointer; font-family: inherit; line-height: 1; }
.dt-x:hover { color: #fff; background: rgba(255,255,255,0.05); }
.dt-x:focus-visible { outline: 2px solid var(--wuc-gold-highlight, #f0c080); outline-offset: -3px; }

/* Full-bleed strip under the nav: no radius, no side borders, 42px, sits flush. */
.dt.dt--strip { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; margin: 0; min-height: 42px; box-shadow: none;
  border-bottom-color: rgba(240,192,128,0.14); }
.dt.dt--strip::before { height: 1px; opacity: .8; }
.dt.dt--strip .dt-item { height: 42px; }
.dt.dt--strip .dt-label { padding: 0 16px; }
@media (min-width: 1100px) { .dt.dt--strip .dt-label { padding-left: max(16px, calc((100% - 1340px) / 2)); } }

/* Announcement strip: one deal at a time, crossfade handled by JS toggling .on */
.dt-ann { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 36px;
  padding: 0 44px 0 14px; background: var(--wuc-espresso-sunken, #120a04); color: var(--wuc-cream, #e8ddd0);
  font: 13px/1.2 var(--wuc-font-body, 'DM Sans', system-ui, sans-serif); border-bottom: 1px solid rgba(240,192,128,.14); }
.dt-ann[hidden] { display: none; }
.dt-ann-k { display: flex; align-items: center; gap: 8px; flex: none; font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--wuc-gold-highlight, #f0c080); white-space: nowrap; text-decoration: none; }
.dt-ann-k .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wuc-primary, #e87a35); animation: dtPulse 2s ease-out infinite; }
/* Messages stack in one grid cell, so the container takes the width of the widest deal (absolute children gave it 0 width). */
.dt-ann-msgs { display: grid; flex: 0 1 auto; min-width: 0; max-width: 62ch; min-height: 36px; }
.dt-ann-msg { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--wuc-cream, #e8ddd0); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .35s; pointer-events: none; }
.dt-ann-msg.on { opacity: 1; pointer-events: auto; }
.dt-ann-msg b { color: #fff; font-weight: 700; }
.dt-ann-msg .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dt-ann-msg .code { font-family: var(--wuc-font-mono, 'DM Mono', Menlo, monospace); font-size: 11px; color: var(--wuc-gold-highlight, #f0c080); border: 1px dashed rgba(240,192,128,.45); padding: 0 6px; border-radius: 5px; flex: none; }
.dt-ann-msg:hover b { text-decoration: underline; text-decoration-color: var(--wuc-gold-highlight, #f0c080); text-underline-offset: 3px; }
.dt-ann-go { flex: none; color: var(--wuc-gold-highlight, #f0c080); font-weight: 600; white-space: nowrap; text-decoration: none; }
.dt-ann-go:hover { color: #fff; }
.dt-ann .dt-x { position: absolute; right: 6px; top: 0; bottom: 0; width: 32px; border-left: 0; }
@media (max-width: 640px) {
  .dt-ann { justify-content: flex-start; }
  .dt-ann-k .txt { display: none; }
  .dt-ann-msgs { flex: 1 1 auto; }
  .dt-ann-go .long { display: none; }
}
@media (min-width: 641px) { .dt-ann-go .short { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .dt-run { animation: none !important; overflow-x: auto; scrollbar-width: none; }
  .dt-run .dup { display: none; }
  .dt-label .dot, .dt-ann-k .dot { animation: none; }
  .dt-track { -webkit-mask-image: none; mask-image: none; }
  .dt-ann-msg { transition: none; }
}