/* ============================================================
   MFD CENTRAL — market-ticker.css  (v1, 25 Sep 2026)
   LOCATION: public_html/assets/css/market-ticker.css
   ============================================================
   The live market strip that sits directly under the site header
   (NIFTY 50, SENSEX, Gold, Silver, USD/INR). Markup is built by
   assets/js/market-ticker.js; data comes from api/market-ticker.php.

   Styled as a brand band: the same ink -> navy gradient and gold
   rule as the report mock on the home page. Brand tokens come from
   mfd-theme.css, with plain fallbacks if it is not on the page.

   Readability: every text colour below was chosen for at least
   4.5:1 contrast against the darkest AND lightest part of the band,
   so values stay clear at 13px on phones.
   ============================================================ */

.mt {
  --mt-bg:     linear-gradient(100deg, var(--ink, #0f172a) 0%, var(--navy-deep, #152c6b) 55%, var(--navy, #1e3a8a) 100%);
  --mt-rule:   var(--gold, #d4af37);
  --mt-fg:     #ffffff;
  --mt-label:  #bae6fd;                   /* pale sky, same as the report eyebrow */
  --mt-muted:  rgba(255, 255, 255, .78);
  --mt-sep:    rgba(255, 255, 255, .16);
  --mt-up:     #4ade80;
  --mt-up-bg:  rgba(74, 222, 128, .14);
  --mt-down:   #ff8f8f;
  --mt-down-bg:rgba(255, 143, 143, .14);
  --mt-flat:   #cbd5e1;
  --mt-flat-bg:rgba(203, 213, 225, .12);
  --mt-live:   var(--cyan-glow, #22d3ee);
  --mt-height: 44px;
  --mt-font:   var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --mt-size:   14px;
  --mt-gap:    22px;                      /* space either side of each item */
  --mt-fade:   28px;                      /* soft fade at the left/right edges */

  position: relative;
  display: block;
  height: var(--mt-height);
  overflow: hidden;
  background: var(--mt-bg);
  border-bottom: 2px solid var(--mt-rule);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
  color: var(--mt-fg);
  font: 500 var(--mt-size)/1 var(--mt-font);
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

.mt-viewport {
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--mt-fade), #000 calc(100% - var(--mt-fade)), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 var(--mt-fade), #000 calc(100% - var(--mt-fade)), transparent);
}

.mt-track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
}
.mt-ready .mt-track {
  animation: mt-scroll var(--mt-dur, 40s) linear infinite;
  will-change: transform;
}
.mt.is-paused .mt-track { animation-play-state: paused; }
/* Hover-pause only on devices with a real pointer; on phones a tap toggles pause instead
   (a sticky :hover after a tap would otherwise keep it paused) */
@media (hover: hover) and (pointer: fine) {
  .mt-hover-pause:hover .mt-track { animation-play-state: paused; }
}

.mt-half, .mt-group { display: flex; align-items: center; height: 100%; }

.mt-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--mt-gap);
  height: 100%;
  white-space: nowrap;
  border-right: 1px solid var(--mt-sep);
  font-variant-numeric: tabular-nums;
  transition: background-color .6s ease;
}

.mt-label {
  color: var(--mt-label);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .82em;
}
.mt-value { color: var(--mt-fg); font-weight: 800; letter-spacing: .01em; }
.mt-chg {
  font-weight: 700;
  font-size: .86em;
  padding: 4px 8px;
  border-radius: var(--r-pill, 999px);
}
.mt-chg:empty { display: none; }
.mt-note  { color: var(--mt-muted); font-size: .78em; font-style: italic; }
.mt-note:empty { display: none; }

.is-up   .mt-chg { color: var(--mt-up);   background: var(--mt-up-bg); }
.is-down .mt-chg { color: var(--mt-down); background: var(--mt-down-bg); }
.is-flat .mt-chg { color: var(--mt-flat); background: var(--mt-flat-bg); }

/* Live dot: pulses cyan while that market is in session, grey when closed */
.mt-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .38); flex: none; }
.is-open .mt-dot { background: var(--mt-live); animation: mt-pulse 1.8s ease-out infinite; }

/* A source that is failing keeps its last value, dimmed but still readable */
.is-stale { opacity: .7; }
.mt-offline .mt-item { opacity: .8; }

.mt-flash-up   { animation: mt-flash-up 1.2s ease-out; }
.mt-flash-down { animation: mt-flash-down 1.2s ease-out; }

.mt-status {
  display: flex; align-items: center; height: 100%;
  padding: 0 18px; color: var(--mt-muted); white-space: nowrap; font-size: .92em;
}

@keyframes mt-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes mt-pulse  { 0% { box-shadow: 0 0 0 0 var(--mt-live); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes mt-flash-up   { 0% { background-color: rgba(74, 222, 128, .24); }  100% { background-color: transparent; } }
@keyframes mt-flash-down { 0% { background-color: rgba(255, 143, 143, .24); } 100% { background-color: transparent; } }

@media (max-width: 600px) {
  .mt { --mt-size: 13px; --mt-gap: 15px; --mt-height: 40px; --mt-fade: 14px; }
  .mt-chg { padding: 3px 7px; }
}

/* People who switch off motion get a static, wrapping list instead of a scroller */
@media (prefers-reduced-motion: reduce) {
  .mt { height: auto; min-height: var(--mt-height); }
  .mt-viewport { -webkit-mask-image: none; mask-image: none; }
  .mt-ready .mt-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .mt-half[aria-hidden], .mt-group[aria-hidden] { display: none; }
  .mt-half, .mt-group { flex-wrap: wrap; justify-content: center; height: auto; }
  .mt-item { height: auto; padding: 10px 14px; border-right: none; }
  .is-open .mt-dot, .mt-flash-up, .mt-flash-down { animation: none; }
}

@media print {
  .mt { display: none; }
}