/* market-wire.css — CoryBuilt
   A single 38px rail pinned to the bottom of the viewport.
   This is the only element on the site that moves continuously.
   Everything else settles. That contrast is the point. */

:root {
  --wire-h: 38px;
  --wire-ink: #08080a;
  --wire-rule: #23232a;
  --wire-dim: #6d6e77;
  --wire-text: #d6d6dc;
  --wire-up: #35b9c2;
  --wire-down: #e2593f;
  --wire-flat: #8a8b93;
}

/* Keep the rail from ever sitting on top of page content. */
body {
  padding-bottom: calc(var(--wire-h) + env(safe-area-inset-bottom, 0px));
}

.market-wire {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  height: calc(var(--wire-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: stretch;
  background: color-mix(in srgb, var(--wire-ink) 88%, transparent);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-top: 1px solid var(--wire-rule);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1;
  color: var(--wire-text);
  contain: layout paint;
}

/* Session badge sits still on the left so the eye has an anchor. */
.market-wire__clock {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 0 14px;
  border-right: 1px solid var(--wire-rule);
  background: var(--wire-ink);
  color: var(--wire-dim);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.market-wire__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wire-flat);
  flex: 0 0 auto;
}
.market-wire__clock[data-session='open'] .market-wire__dot { background: var(--wire-up); }
.market-wire__clock[data-session='pre'] .market-wire__dot,
.market-wire__clock[data-session='after'] .market-wire__dot { background: #b7912f; }

.market-wire__time { color: var(--wire-text); font-variant-numeric: tabular-nums; }

/* Scrolling track */
.market-wire__viewport {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}

.market-wire__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  will-change: transform;
  animation: wire-scroll var(--wire-duration, 90s) linear infinite;
}

.market-wire:hover .market-wire__track,
.market-wire:focus-within .market-wire__track { animation-play-state: paused; }

@keyframes wire-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.market-wire__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  white-space: nowrap;
  border-right: 1px solid color-mix(in srgb, var(--wire-rule) 60%, transparent);
}

.market-wire__sym { color: var(--wire-text); letter-spacing: 0.08em; }
.market-wire__px { font-variant-numeric: tabular-nums; }
.market-wire__chg { font-variant-numeric: tabular-nums; }

.market-wire__item[data-dir='up']   .market-wire__px,
.market-wire__item[data-dir='up']   .market-wire__chg { color: var(--wire-up); }
.market-wire__item[data-dir='down'] .market-wire__px,
.market-wire__item[data-dir='down'] .market-wire__chg { color: var(--wire-down); }
.market-wire__item[data-dir='flat'] .market-wire__px,
.market-wire__item[data-dir='flat'] .market-wire__chg { color: var(--wire-flat); }

.market-wire__spark { display: block; opacity: 0.72; }

.market-wire__empty {
  display: flex;
  align-items: center;
  padding: 0 18px;
  color: var(--wire-dim);
}

/* Brief highlight when a price actually changes — the only motion that
   reports something, so it earns its place. */
.market-wire__item.is-fresh { animation: wire-flash 900ms ease-out 1; }
@keyframes wire-flash {
  0%   { background: color-mix(in srgb, currentColor 14%, transparent); }
  100% { background: transparent; }
}

/* Reduced motion: no scroll, no flash. The rail becomes a horizontally
   scrollable strip the reader controls. */
@media (prefers-reduced-motion: reduce) {
  .market-wire__track { animation: none; width: auto; }
  .market-wire__viewport { overflow-x: auto; scrollbar-width: none; }
  .market-wire__viewport::-webkit-scrollbar { display: none; }
  .market-wire__item.is-fresh { animation: none; }
}

@media (max-width: 640px) {
  .market-wire { font-size: 11px; }
  .market-wire__clock { padding: 0 10px; gap: 6px; }
  .market-wire__clock .market-wire__session-name { display: none; }
  .market-wire__item { padding: 0 14px; gap: 6px; }
}