/* ==========================================
   ETF HOME — default landing layout (/)
   Builds on etf-directory.css for the shared group/table/fund-name styles;
   everything here is specific to the new layout: range chips, sparklines,
   the filled position-in-range bar, and loading skeletons.
   ========================================== */

/* ---- Range period chips ---- */
.range-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 6px; }
.range-chips-label { font-size: 11px; font-family: 'JetBrains Mono', monospace; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }
.range-chip {
  font-size: 12px; font-family: 'JetBrains Mono', monospace; color: var(--text2);
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 16px; cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.range-chip:hover { border-color: var(--accent); color: var(--text1); }
.range-chip.active { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; }

/* ---- Sparkline ---- */
.spark-cell { width: 86px; }
.spark { display: block; width: 78px; height: 22px; overflow: visible; }
.spark polyline { fill: none; stroke: var(--text2); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
.spark .spark-dot { fill: var(--accent); }

/* ---- Filled position-in-range bar (replaces the dot marker) ---- */
.pos-cell { min-width: 170px; }
.pos-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text2); font-family: 'JetBrains Mono', monospace; margin-bottom: 4px; }
.pos-track { width: 100%; height: 8px; background: var(--border); border-radius: 3px; position: relative; overflow: hidden; }
.pos-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--text2); border-radius: 3px 0 0 3px; }
.pos-tick { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text1); border-radius: 1px; }
.pos-meta { font-size: 10px; color: var(--text2); font-family: 'JetBrains Mono', monospace; margin-top: 4px; white-space: nowrap; }

/* ---- Change column (no red/green — sign carries direction, per site rule) ---- */
.chg-cell { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; color: var(--text1); white-space: nowrap; }

/* ---- Loading skeletons ---- */
@keyframes skeletonPulse { 0%,100% { opacity: .45 } 50% { opacity: .15 } }
.sk { display: block; background: var(--text3); border-radius: 3px; animation: skeletonPulse 1.4s ease-in-out infinite; }
.sk-price { width: 58px; height: 13px; margin-left: auto; }
.sk-spark { width: 78px; height: 20px; }
.sk-bar { width: 100%; height: 8px; margin-top: 14px; }
.sk-chg { width: 50px; height: 13px; }

@media(max-width:900px){
  .spark-cell, .spark { display: none; }
}