/* ── Shared "all tracked assets" list (AssetList) ──────────────────────────
   One source of truth for the rail/list row styling, used by BOTH the asset
   detail page right-rail and the scanner sidebar "Assets" tab. Loaded by
   asset.html + scanner.html. JS renderer: js/asset-list.js. The asset-only
   mobile inline rail stays in asset.css. */
.ast-rail-card { display: flex; flex-direction: column; min-height: 0; height: 100%; padding: 12px 0 0; }
.ast-rail-head { padding: 0 14px 8px; }
.ast-rail-head h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--text-lo); display: flex; align-items: center; gap: 7px; }
.ast-rail-search { width: 100%; padding: 7px 10px; background: var(--bg-input); border: 1px solid var(--border2); border-radius: var(--r-md); color: var(--text-hi); font-family: var(--font); font-size: 12.5px; outline: none; transition: border-color .12s; }
.ast-rail-search:focus { border-color: var(--accent-2); }
.ast-rail-search::placeholder { color: var(--text-lo); }

.ast-rail-list { overflow-y: auto; overflow-x: hidden; min-height: 0; padding: 4px 4px 8px; }
.ast-rail-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 7px 10px 7px 13px; border-radius: var(--r-md); cursor: pointer; text-decoration: none; color: inherit; transition: background-color .1s, box-shadow .1s; position: relative; }
.ast-rail-row:hover { background: var(--bg-hover); }
/* Active row: solid 3px accent rail on the left + stronger background tint +
   accent symbol. Reads instantly as "this is the one you're on". */
.ast-rail-row.active {
  background: linear-gradient(90deg, rgba(123,92,255,.22) 0%, rgba(123,92,255,.10) 100%);
  box-shadow: inset 3px 0 0 0 var(--accent-2);
}
.ast-rail-row.active:hover { background: linear-gradient(90deg, rgba(123,92,255,.30) 0%, rgba(123,92,255,.14) 100%); }
.ast-rail-row.active .ast-rail-sym   { color: var(--accent-2); }
.ast-rail-row.active .ast-rail-price { color: var(--text-hi); }
.ast-rail-ico { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; background: var(--bg-active); flex: none; }
.ast-rail-ico img, .ast-rail-ico span { width: 100% !important; height: 100% !important; border-radius: 50% !important; margin: 0 !important; object-fit: cover; }
.ast-rail-mid { min-width: 0; }
.ast-rail-sym { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text-hi); }
.ast-rail-sub { font-size: 10.5px; color: var(--text-lo); font-family: var(--mono); margin-top: 1px; }
.ast-rail-right { text-align: right; min-width: 76px; }
/* Tabular-nums so $61,422.04 and $7.30 align on the decimal across rows. */
.ast-rail-price { font-family: var(--mono); font-size: 12px; color: var(--text-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.ast-rail-chg   { font-family: var(--mono); font-size: 10.5px; font-weight: 600; margin-top: 1px; font-variant-numeric: tabular-nums; }
/* Price change = price DIRECTION (up green / down red), NOT flow. Use --green/--red
   so it is NOT flipped by the asset-page flow-sentiment swap on --flow-in/--flow-out. */
.ast-rail-chg.pos { color: var(--green, #10b981); }
.ast-rail-chg.neg { color: var(--red, #e74c5c); }

.ast-rail-empty { color: var(--text-lo); font-size: 12px; padding: 16px 14px; text-align: center; }

/* Live-tick flash on a rail cell whose value just changed (asset page). */
.ast-rail-price.tick-up, .ast-rail-chg.tick-up   { animation: railTickUp   .7s ease-out; border-radius: 4px; padding: 0 3px; margin: 0 -3px; }
.ast-rail-price.tick-down, .ast-rail-chg.tick-down { animation: railTickDown .7s ease-out; border-radius: 4px; padding: 0 3px; margin: 0 -3px; }
@keyframes railTickUp   { 0%, 25% { background: rgba(16, 185, 129, .28); } 100% { background: transparent; } }
@keyframes railTickDown { 0%, 25% { background: rgba(231, 76,  92, .28); } 100% { background: transparent; } }