/* ==========================================================================
   @digithings/design — quant-native/styles.css
   Scoped under `.qn-*`. Consumes tokens from ../tokens.css.
   Muted emerald / muted copper for directional color — never Bloomberg red.
   ========================================================================== */

/* --- Blueprint background ---------------------------------------------- */
.qn-blueprint-bg {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.02) 0,
    rgba(255, 255, 255, 0.02) 1px,
    transparent 1px,
    transparent 8px
  );
}

/* --- Directional colors (muted) ---------------------------------------- */
.qn-up   { color: var(--accent-digiquant); }
.qn-down { color: var(--accent-digiclaw); }

/* --- Metric (tabular numerics) ----------------------------------------- */
.qn-metric {
  font-family: var(--font-family-mono);
  font-feature-settings: "tnum" 1, "ss01" 1;
  letter-spacing: 0.01em;
  text-align: right;
}

/* --- Chart frame ------------------------------------------------------- */
.qn-chart-frame {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  padding: var(--space-3);
}
.qn-chart-frame > svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --- Ticker ------------------------------------------------------------ */
.qn-ticker {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  background: rgba(10, 10, 10, 0.7);
  font-family: var(--font-family-mono);
  font-size: 12px;
  color: var(--text-primary);
  padding: 10px 0;
}
.qn-ticker-track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
}
.qn-ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0 28px;
  border-right: 1px dashed var(--border-color);
}
.qn-ticker-sym {
  color: var(--fg);
  letter-spacing: 0.04em;
}
.qn-ticker-px { margin-left: 2px; }
.qn-ticker-delta { margin-left: 2px; }

@media (prefers-reduced-motion: reduce) {
  .qn-ticker-track {
    transform: translateX(0) !important;
    padding-left: var(--space-3);
  }
}