@import url("experience.css");
/* Trades page. Shared SimTrade components live in experience.css. */
body>main{display:flex;flex-direction:column;max-width:var(--page-max);margin:0 auto;padding:16px 20px;overflow:hidden}
#trade-workspace:not([hidden]),:root[data-auth="pending"] #trade-workspace{display:flex;flex-direction:column;flex:1;min-height:0}
#trade-workspace>*{flex-shrink:0}
#trade-workspace>.trade-layout{flex:1 1 auto;min-height:0}
h1,h2,h3,p{margin:0 0 12px}
h2{font-size:20px;line-height:1.5}
.eyebrow{color:var(--text-muted);font-size:12.5px;margin-bottom:4px}
.subtle{color:var(--text-muted);font-size:13px}
.owner-row{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.owner-row label{font-size:12.5px;color:var(--text-muted)}
.owner-row .sel{min-width:180px;max-width:min(360px,60vw)}
.sync-banner{padding:14px 18px;margin-bottom:16px;font-size:13.5px}
.sync-banner p{margin:4px 0}
.sync-banner p:last-child{margin-bottom:0}
.sync-banner #history-warning{color:var(--amber);font-size:12.5px}
.trade-layout:not([hidden]){display:grid}
.trade-layout{grid-template-columns:minmax(280px,340px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:16px}
.trade-sidebar{padding:16px;min-height:0;overflow-y:auto}
label{font-size:12.5px;color:var(--text-muted)}
.search-row{display:flex;gap:6px;margin-top:6px}
.search-row .rp-search{flex:1;min-width:0}
.search-row button{flex-shrink:0;white-space:nowrap}
.select-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 14px}
.select-row .sel{margin-top:5px}
/* Trade rows reuse the SimTrade side-nav row; content stacks in two lines. */
.side-nav .trade-card{flex-direction:column;align-items:stretch;gap:0;padding:11px 13px}
.trade-card-heading{display:flex;justify-content:space-between;gap:10px;font-weight:650;color:var(--text)}
.trade-card-heading span:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums}
.trade-card-meta{display:block;font-size:11.5px;color:var(--text-faint);margin-top:4px;font-weight:400}
.trade-card-meta .dir-chip{margin-left:2px}
.gain{color:var(--up)}
.loss{color:var(--down)}
#more{width:100%;margin-top:12px}
.detail-panel{min-width:0;min-height:0;overflow-y:auto;padding:20px 24px 24px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px}
.detail-panel .gc-title{margin:22px 0 12px}
.detail-heading{display:flex;justify-content:space-between;gap:16px;align-items:start;margin-top:4px}
.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
#trade-summary .gs-v{font-size:20px}
.facts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;margin:0}
.facts-grid dt{font-size:11.5px;color:var(--text-faint)}
.facts-grid dd{margin:3px 0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.table-scroll{overflow-x:auto;max-width:100%}
.rl-table td,.rl-table th{white-space:nowrap}
.rl-table td{font-variant-numeric:tabular-nums}
.rl-table tbody tr:last-child td{border-bottom:0}
.rl-table td:last-child{white-space:normal;min-width:100px;max-width:280px;overflow-wrap:anywhere}
.provenance{margin-top:24px;font-size:13px;color:var(--text-muted)}
.provenance summary{min-height:44px}
.provenance>:not(summary){margin-left:18px}
.provenance dl{margin:12px 0 12px 18px}
.empty{display:grid;place-items:center;align-content:center;gap:4px;min-height:360px}
.empty .ic{color:var(--text-faint)}
.empty h2{font-size:17px;font-weight:700;color:var(--text);margin:8px 0 0}
.gate{max-width:600px;padding:60px 0;margin:auto}
.gate a{display:inline-block;margin:18px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#detail-error,#action-status{color:var(--up)}
@media(min-width:861px){#back-list{display:none}}
@media(max-width:860px){
  body>main{display:block;padding:12px 12px 24px;overflow-y:auto}
  #trade-workspace:not([hidden]),:root[data-auth="pending"] #trade-workspace{display:block}
  .trade-sidebar,.detail-panel{overflow:visible}
  .page-heading{flex-wrap:nowrap;align-items:start}
  .page-heading>button{flex-shrink:0}
  .trade-layout:not([hidden]){display:block}
  .trade-layout[data-pane=detail] .trade-sidebar{display:none}
  .trade-layout[data-pane=list] .detail-panel{display:none}
  .detail-panel{padding:16px}
  .detail-heading{display:block}
  .actions{justify-content:start;margin:16px 0}
  #trade-summary .gs-v{font-size:18px}
  .gc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .owner-row .sel{flex:1;max-width:none}
}
/* While waiting: the heading, range picker and an empty status card. The list and detail panes stay
   out, because a member without a linked account never gets them; the card's words are not yet known. */
:root[data-auth="pending"] .sync-banner>*{visibility:hidden}