/* ============================================================
   SimpliWealth — market-ticker.css  (v1, 1 Oct 2026)
   LOCATION: public_html/assets/css/market-ticker.css
   ============================================================
   The live market strip that sits directly under the site header
   on the home page (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 as the footer and the
   "Start here" band, warming into a deep rose, with a rose rule
   underneath. Brand tokens come from site.css, with plain
   fallbacks in case this file is ever used on its own.

   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, #1b1c1e) 0%, #26161d 55%, #3a1428 100%);
  --mt-rule:   var(--rose, #ef1963);
  --mt-fg:     #ffffff;
  --mt-label:  #ff8ab4;                   /* soft rose, same as the band eyebrow */
  --mt-muted:  rgba(255, 255, 255, .74);
  --mt-sep:    rgba(255, 255, 255, .14);
  --mt-up:     #4ade80;
  --mt-up-bg:  rgba(74, 222, 128, .14);
  --mt-down:   #ff9b9b;
  --mt-down-bg:rgba(255, 155, 155, .14);
  --mt-flat:   #d4d4d8;
  --mt-flat-bg:rgba(212, 212, 216, .12);
  --mt-live:   #4ade80;                   /* green "market open" pulse */
  --mt-height: 44px;
  --mt-font:   var(--sans, "Inter", "Segoe UI", system-ui, -apple-system, 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;
  z-index: 2;                             /* above the fixed glass backdrop (z-index 0) */
  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(27, 28, 30, .12);
  color: var(--mt-fg);
  font: 500 var(--mt-size)/1 var(--mt-font);
  letter-spacing: 0;
  -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: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .8em;
}
.mt-value { color: var(--mt-fg); font-weight: 600; letter-spacing: .01em; }
.mt-chg {
  font-weight: 600;
  font-size: .86em;
  padding: 4px 8px;
  border-radius: 100px;
}
.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 green while that market is in session, grey when closed */
.mt-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .34); 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, .22); }  100% { background-color: transparent; } }
@keyframes mt-flash-down { 0% { background-color: rgba(255, 155, 155, .22); } 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; }
}