/* SIMUL8OR TRADING FEED v0.2 — requires s8-tokens.css + s8-ui.css.
   Production Option B: shared content hero, trade cards, fills, and paging. */
.fd{background:var(--s8-bg);min-height:100%}
.fd-feed-hero{padding-bottom:var(--s8-7)}

/* filter bar */
.fd-bar{display:flex;align-items:center;gap:var(--s8-2);padding-bottom:var(--s8-4);border-bottom:1px solid var(--s8-line);margin-bottom:var(--s8-4)}
.fd-bar__spacer{flex:1}
.fd-bar .s8-search{width:280px}
.fd-bar .s8-select{width:auto;min-width:132px}
.fd-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fd-search .s8-input{padding-right:34px}
.fd-search__submit{position:absolute;right:3px;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:0;border-radius:var(--s8-r-sm);background:transparent;color:var(--s8-fg-3);cursor:pointer}
.fd-search__submit:hover,.fd-search__submit:focus-visible{background:var(--s8-hover);color:var(--s8-fg)}
.fd-search__submit svg{position:static;width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* trade cards */
.fd-list{display:grid;gap:var(--s8-3)}
.fd-list>.modal{display:none}
.fd-card{border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);background:var(--s8-panel);overflow:hidden;transition:border-color var(--s8-t-fast) var(--s8-ease)}
.fd-card:hover{border-color:var(--s8-line-2)}
.fd-card__head{display:flex;align-items:center;gap:var(--s8-3);padding:var(--s8-3) var(--s8-4);border-bottom:1px solid var(--s8-line)}
.fd-who{display:grid;gap:1px;min-width:0}
.fd-who__name{font-size:var(--s8-fs-md);font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-who__sub{font-size:var(--s8-fs-xs);color:var(--s8-fg-4)}
.fd-tick{display:inline-flex;align-items:center;height:var(--s8-h-xs);padding:0 8px;border:1px solid var(--s8-line-2);border-radius:var(--s8-r-sm);background:var(--s8-inset);font-family:var(--s8-mono);font-size:var(--s8-fs-xs);font-weight:600;letter-spacing:.06em;color:var(--s8-fg)}
.fd-tick--masked{color:var(--s8-fg-4);letter-spacing:.22em;padding-right:6px}
.fd-pnl{margin-left:auto;display:grid;justify-items:end;gap:1px;text-align:right}
.fd-pnl b{font-size:var(--s8-fs-2xl);font-weight:600;letter-spacing:-.025em;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--s8-fg)}
.fd-pnl u{text-decoration:none;font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-fg-4)}
.fd-pnl--up b{color:var(--s8-up)}
.fd-pnl--down b{color:var(--s8-down)}
.fd-avatar-image{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}

/* stat strip */
.fd-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) auto;background:var(--s8-panel-2);border-bottom:1px solid var(--s8-line)}
.fd-stat{padding:9px var(--s8-4);border-left:1px solid var(--s8-line);min-width:0}
.fd-stat:first-child{border-left:0}
.fd-stat u{display:block;text-decoration:none;font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-fg-4)}
.fd-stat b{display:block;margin-top:2px;font-size:var(--s8-fs-base);font-weight:600;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-act{display:flex;align-items:center;gap:var(--s8-2);padding:0 var(--s8-3);border-left:1px solid var(--s8-line)}
.fd-chart-frame{display:block;width:100%;height:0;border:0;background:transparent;transition:height var(--s8-t) var(--s8-ease)}

/* fills */
.fd-fillhead{display:flex;align-items:center;gap:var(--s8-2);padding:var(--s8-3) var(--s8-4) 0}
.fd-fillhead .s8-label{color:var(--s8-fg-4)}
.fd-fills{display:grid;gap:2px;padding:var(--s8-2) var(--s8-3) var(--s8-3)}
.fd-fills--rail{position:relative;margin-left:var(--s8-6);padding-left:var(--s8-4)}
.fd-fills--rail::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:1px;background:var(--s8-line-2)}
.fd-fill{position:relative;display:flex;align-items:center;gap:var(--s8-3);min-height:34px;padding:6px 10px;border-radius:var(--s8-r);font-size:var(--s8-fs-sm);transition:background var(--s8-t-fast) var(--s8-ease)}
.fd-fill:hover{background:var(--s8-hover)}
.fd-fills--rail .fd-fill::before{content:"";position:absolute;left:calc(var(--s8-4) * -1);top:50%;width:var(--s8-4);height:1px;background:var(--s8-line-2)}
.fd-side{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:20px;padding:0 5px;border-radius:var(--s8-r-sm);border:1px solid transparent;font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:700;letter-spacing:.08em}
.fd-side--buy{background:var(--s8-up-tint);border-color:var(--s8-up-line);color:var(--s8-up)}
.fd-side--sell{background:var(--s8-down-tint);border-color:var(--s8-down-line);color:var(--s8-down)}
.fd-fill__qty{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.fd-fill__px{color:var(--s8-fg-3);font-variant-numeric:tabular-nums}
.fd-fill__t{margin-left:auto;font-size:var(--s8-fs-xs);color:var(--s8-fg-4);font-variant-numeric:tabular-nums}
.fd-more{display:flex;align-items:center;justify-content:space-between;gap:var(--s8-2);width:100%;height:34px;padding:0 var(--s8-4);border:0;border-top:1px solid var(--s8-line);background:transparent;color:var(--s8-fg-3);font:inherit;font-size:var(--s8-fs-sm);cursor:pointer;transition:background var(--s8-t-fast) var(--s8-ease),color var(--s8-t-fast) var(--s8-ease)}
.fd-more:hover{background:var(--s8-hover);color:var(--s8-fg)}
.fd-more svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fd-card__legacy-actions,.fd-comments-frame{display:none}

/* pagination */
.fd-page{display:flex;align-items:center;gap:var(--s8-3);padding:var(--s8-5) 0 var(--s8-8)}
.fd-page--center{justify-content:center}
.fd-page__nums{display:flex;align-items:center;gap:2px}
.fd-page__meta{font-size:var(--s8-fs-sm);color:var(--s8-fg-4);font-variant-numeric:tabular-nums}
.fd-page__edge,.fd-page__current{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:32px;height:32px;padding:0 9px;border:1px solid transparent;border-radius:var(--s8-r);color:var(--s8-fg-2);font-size:var(--s8-fs-sm);font-variant-numeric:tabular-nums;text-decoration:none;transition:background var(--s8-t-fast) var(--s8-ease),color var(--s8-t-fast) var(--s8-ease),border-color var(--s8-t-fast) var(--s8-ease)}
.fd-page a.fd-page__edge:hover{background:var(--s8-hover);color:var(--s8-fg)}
.fd-page__current{background:var(--s8-panel-2);border-color:var(--s8-accent-line);color:#fff;font-weight:600}
.fd-page__edge.is-disabled{opacity:.35}
.fd-page svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:900px){
  .fd-bar{flex-wrap:wrap}
  .fd-bar__spacer{display:none}
  .fd-chips{width:100%}
  .fd-bar .s8-search{flex:1;width:auto;min-width:220px}
  .fd-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fd-stat:nth-child(4){border-left:0}
  .fd-act{grid-column:1/-1;justify-content:flex-end;padding:var(--s8-2) var(--s8-3);border-left:0;border-top:1px solid var(--s8-line)}
}
@media(max-width:600px){
  .fd-feed-hero{padding-bottom:var(--s8-6)}
  .fd-bar .s8-search,.fd-bar .s8-select{width:100%;min-width:0}
  .fd-card__head{align-items:flex-start;flex-wrap:wrap}
  .fd-card__head .fd-tick{order:3;margin-left:46px}
  .fd-pnl b{font-size:var(--s8-fs-xl)}
  .fd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fd-stat:nth-child(3),.fd-stat:nth-child(5){border-left:0}
  .fd-stat:nth-child(4){border-left:1px solid var(--s8-line)}
  .fd-fills--rail{margin-left:var(--s8-3);padding-left:var(--s8-3)}
  .fd-fill{align-items:flex-start;flex-wrap:wrap;gap:6px 10px}
  .fd-fill__t{width:100%;margin-left:56px}
  .fd-page{flex-direction:column}
}