/* HoloInvestor · sidestil for body[data-page="trade"].
   Lenkes bare fra trade.html, rett etter style.css.
   Regler som flere sider bruker, ligger i components.css. */

/* ===== Trade-kalkulator (body[data-page="trade"]): to sider, kvittering, dom ===== */

.trade-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--s6); margin-top: var(--s4); }

.trade-side table td, .trade-side table th { padding: 6px 8px; }

.trade-side select.grade-sel { min-width: 120px; width: auto; }

.trade-side input.qty-inp { width: 72px; min-width: 72px; text-align: right; }

.trade-line-name { max-width: 260px; }
/* Kortminiatyren til venstre for navnet (cellen er en BFC, så den rommer floaten) */
.trade-line-thumb { float: left; margin-right: var(--s2); }

.trade-line-name .stamp { display: block; }

.cash-row { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); }

.cash-row label { color: var(--text-dim); font-size: 0.9rem; }

.cash-row input { max-width: 160px; text-align: right; }

.trade-receipt { max-width: 420px; }

.trade-receipt .leaders { padding: var(--s1) 0; border-bottom: 1px solid var(--line); }

.trade-receipt .leaders .lbl { color: var(--text-dim); }

.trade-receipt .delta { font-size: 0.8rem; margin-left: var(--s2); }

.trade-verdict { font-family: var(--font-mono); font-size: 1rem; font-weight: 500; margin-top: var(--s3); padding: var(--s2) 0; border-top: 2px solid var(--text); display: inline-block; }

.trade-verdict.fair { color: var(--text-dim); border-top-color: var(--text-dim); }

.trade-verdict.you_win { color: var(--gain); border-top-color: var(--gain); }

.trade-verdict.you_lose { color: var(--loss); border-top-color: var(--loss); }

body[data-page="trade"] #summary, body[data-page="trade"] #log { margin-top: var(--s7); }