.trades-gate{
  padding:40px 24px; text-align:center; border-radius:var(--radius-l);
  border:1px solid var(--line); background:rgba(236,231,220,0.025);
}
.trades-gate p{ margin:0 0 18px; }

.trades-layout[hidden]{ display:none; }
.trades-tabs{ margin-bottom:24px; }

.trades-view{ display:none; }
.trades-view--active{ display:block; }


.trades-view__header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:16px;
}
.trades-view__hint{ margin:0 0 16px; font-size:0.86rem; color:var(--paper-dim); }
.trades-subheading{
  margin:22px 0 10px; font-family:var(--font-body); font-weight:600;
  font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--paper-dim);
}
.trades-subheading:first-of-type{ margin-top:0; }

.trade-row-list{ display:flex; flex-direction:column; gap:14px; }
.trade-row{
  padding:16px; border-radius:var(--radius-l);
  border:1px solid var(--line); background:rgba(236,231,220,0.025);
}
.trade-row__header{ display:flex; align-items:center; gap:10px; }
.trade-row__name{ font-weight:600; font-size:0.92rem; color:var(--paper); }
a.trade-row__name{ text-decoration:none; }
a.trade-row__name:hover{ color:var(--gold); }
.trade-row__report{
  flex-shrink:0; width:24px; height:24px; border-radius:50%; border:none; background:transparent;
  font-size:0.8rem; opacity:0.5; cursor:pointer; transition:opacity .2s var(--ease), background .2s var(--ease);
}
.trade-row__report:hover{ opacity:1; background:rgba(163,64,63,0.14); }
.trade-row__time{ margin-left:auto; flex-shrink:0; font-size:0.72rem; color:var(--paper-dim); }
.trade-row__reason{ margin:8px 0 0; font-size:0.8rem; color:var(--paper-dim); font-style:italic; }
.trade-row__columns{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px; }
.trade-row__column-label{
  margin:0 0 8px; font-size:0.68rem; font-weight:600; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--paper-dim);
}
/* Tight min/max (not the usual minmax(Npx, 1fr)) -- a fixed tile size,
   not a responsive one. With an unbounded 1fr max, the SAME grid renders
   at wildly different tile sizes depending purely on how many cards
   happen to be in it (a handful of cards stretches each tile huge, a full
   page of them shrinks toward the 84px floor this replaced) -- and at
   that floor, .card-tile__stats' 2-per-row pills didn't have room to
   render without heavy ellipsis-truncation, i.e. the stats becoming
   unreadable. Matches .trade-builder__grid's size below so every card
   tile in the whole Trades flow (list rows, history, the builder) looks
   the same fixed size regardless of context. */
.trade-row__grid{ grid-template-columns:repeat(auto-fill, minmax(120px, 150px)); gap:8px; }
.trade-row__actions{ display:flex; gap:8px; margin-top:14px; }

.trade-search{ position:relative; margin-bottom:8px; }
.trade-search input{
  width:100%; padding:11px 14px; border-radius:var(--radius-m);
  border:1px solid var(--line); background:rgba(236,231,220,0.04);
  color:var(--paper); font-family:inherit; font-size:0.9rem;
}
.trade-search input:focus{ outline:none; border-color:var(--accent-dim); }
.trade-search__results{
  list-style:none; margin:6px 0 0; padding:6px;
  position:absolute; z-index:5; width:100%;
  border-radius:var(--radius-m); border:1px solid var(--line);
  background:var(--ink-2); box-shadow:0 20px 50px rgba(0,0,0,0.5);
  /* A grid, not a single-column list -- exactly SEARCH_LIMIT=5 columns
     (trades.py) so all 5 possible results always sit in one row, never
     wrapping to a second. auto-fill/minmax(160px,1fr) used to do this by
     estimate, but at .modal__panel--trade's actual 900px width only 4
     columns fit that way (160px + 6px gap doesn't divide evenly into the
     ~800px content width) -- a fixed 5-column grid can't wrap regardless of
     available width. No max-height/overflow here on purpose: if a short
     viewport still can't fit everything, .modal__panel's own overflow-y:auto
     takes over as the one scrollbar, instead of nesting a second one inside
     this. */
  display:grid; grid-template-columns:repeat(5, 1fr); gap:6px;
}
.trade-search__results[hidden]{ display:none; }
.trade-search__result{
  padding:16px 14px; border-radius:var(--radius-s); font-size:0.92rem;
  display:flex; align-items:center; gap:10px;
}
.trade-search__result span{ font-size:1.1rem; }
.trade-search__result:hover{ background:rgba(127,162,201,0.1); }

.trade-builder__target{ margin:0 0 4px; font-size:0.9rem; color:var(--paper-dim); }
.trade-builder__target strong{ color:var(--paper); }
.trade-builder__error{
  margin:8px 0; padding:10px 12px; border-radius:var(--radius-s);
  border:1px solid rgba(216,110,110,0.4); background:rgba(216,110,110,0.08);
  color:#e08a8a; font-size:0.84rem;
}
.trade-builder__error[hidden]{ display:none; }
.trade-builder__columns{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:14px; }
.trade-builder__column .trades-subheading{ display:flex; align-items:center; justify-content:space-between; }
.trade-builder__grid{
  /* Viewport-aware, not a flat height -- on a short window this shrinks
     instead of pushing the modal's own total height past the panel's own
     max-height budget below, which is what used to force .modal__panel's
     outer scrollbar to kick in on top of this grid's own inner one. */
  max-height:min(400px, 42vh); overflow-y:auto; margin-top:8px;
  /* Same fixed size as .trade-row__grid above, see its own comment. */
  grid-template-columns:repeat(auto-fill, minmax(120px, 150px));
}
.trade-builder__sort{ margin-top:10px; }
/* .modal__panel--trade's own width rule moved to css/shared/components.css
   (next to .modal__panel--detail, which it always pairs with) -- it was
   page-scoped here, but profile.html's Cards view-all modal (opened from
   someone else's profile) carries the exact same class for the exact same
   "widen this grid-heavy modal" reason, and profile.html never loads this
   file. That silently left it stuck at .modal__panel--detail's 520px
   max-width -- the identical bug this rule was written to fix here,
   just never applying on the one other page that needed it too. */


@media (max-width:760px){
  .trade-row__columns, .trade-builder__columns{ grid-template-columns:1fr; }
  /* The 5-across search grid (see its own comment above) is deliberately
     fixed at desktop so all 5 results share one row -- on a narrow modal
     that leaves each cell too tight for an emoji + title. Below 760px
     there's no room to keep that promise anyway, so let it settle into a
     normal 2-column wrap instead of crushing every cell. */
  .trade-search__results{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:420px){
  .trade-search__results{ grid-template-columns:1fr; }
}